Skip to main content

CRUD

Updating event properties​

The Eventcalendar is bound to an array of event objects as described in the data binding section. To update a single event with new event data, it's not enough to update the particular event object. A new event array reference is also needed otherwise the change won't be picked up by the eventcalendar.

Updating an event title
import { Component } from '@angular/core';
import { MbscCalendarEvent, MbscEventcalendarView } from '@mobiscroll/angular';

@Component({...})
export class MyComponent {
  myView: MbscEventcalendarView = {
    calendar: { type: "month" },
    agenda: { type: "month" },
  };

  myEvents: MbscCalendarEvent[] = [
    { id: 'id1' start: '2023-09-24', end: '2023-09-30', title: 'Short trip!'},
    { id: 'id2' start: '2023-10-12', end: '2023-10-12', title: 'Birthday'},
    { id: 'id3' start: '2023-12-24', end: '2023-12-26', title: 'X-mas'},
  ];

  editEvent(eventID: string) {
    const myNewArray = [...this.myEvents];
    const index = myNewArray.findIndex((ev) => ev.id === eventID);
    myNewArray[index].title = 'My Birthday';
    this.myEvents = myNewArray;
  }
}
<mbsc-eventcalendar [data]="myEvents" [view]="myView"></mbsc-eventcalendar>
<mbsc-button (click)="editEvent('id2')">Edit second event</mbsc-button>

The same concept can be used to add or delete a calendar event. Or to update any properties of an event with incoming data, regardless where the data comes from (outside of the eventcalendar), be it an edit form or an external API.

Working with servers​

The Eventcalendar exposes a variety of events that are triggered on certain actions made on calendar events. These events can be used to send your data to your API or save it to a persistent storage.

Event create​

To enable the creation of events on the Eventcalendar you can use the dragToCreate and the clickToCreate options (desktop browsers only).

When an event is about to be created using click or drag on the Eventcalendar UI, the onEventCreate event is fired. If not canceled by returning false a temporary event is created on the Eventcalendar followed by the onEventCreated. Any of these two events are passed the event properties that can be used to save the event to a persistent storage or to send it through an API.

Save a new event through an API
import { Component } from '@angular/core';
import axios from 'axios';
import { MbscCalendarEvent, MbscEventcalendarView, MbscEventCreateEvent } from '@mobiscroll/angular';

@Component({...})
export class MyComponent {
  myView: MbscEventcalendarView = {
    calendar: { type: "month" },
    agenda: { type: "month" },
  };

  myEvents: MbscCalendarEvent[] = [];

  saveEvent(args: MbscEventCreateEvent) {
    const eventToSave = args.event;
    // you can use whatever library you want instead of axios
    axios.post('/your-api', eventToSave);
  }
}
<mbsc-eventcalendar (onEventCreate)="saveEvent($event)" [data]="myEvents" [view]="myView"></mbsc-eventcalendar>

Event update​

Similar to event creation above, to enable event editing you can use the dragToResize and dragToMove options.

When an event is about to be updated by dragging on the Eventcalendar UI, the onEventUpdate event is fired. If not canceled by returning false the calendar event is updated on the calendar. This update is followed by the onEventUpdated. Any of these two events are passed the calendar event previous and new properties that can be used to save the event to a persistent storage or to send it through an API.

Send an updated event through an API
import { Component } from '@angular/core';
import axios from 'axios';
import { MbscCalendarEvent, MbscEventcalendarView, MbscEventUpdatedEvent } from '@mobiscroll/angular';

@Component({...})
export class MyComponent {
  myView: MbscEventcalendarView = {
    schedule: { type: "week" },
  };

  myEvents: MbscCalendarEvent[] = [
    { id: 'id1' start: '2023-09-24', end: '2023-09-30', title: 'Short trip!'},
  ];

  updateEvent(args: MbscEventUpdatedEvent) {
    const updatedEvent = args.event;
    // you can use whatever library you want instead of axios
    axios.post('/your-api', updatedEvent);
  }
}
<mbsc-eventcalendar (onEventUpdated)="updateEvent($event)" [data]="myEvents" [view]="myView"></mbsc-eventcalendar>
info

When updating a recurring event from the UI (by dragging for example), the update won't affect all the occurences of the event. A single instance is updated from a set of occurences by adding an exception to the rule and creating another event with the changed properties.

Adding this exception to the rule is an update to the event, so the onEventUpdate and onEventUpdated will be fired as expected. There will also be an onEventCreate and `onEventCreated event fired for the changed occurence, that is not be part of the recurring set anymore.

In case you would like to edit a recurring event, you can use the updateRecurringEvent helper function:

updateRecurringEvent​

(originalRecurringEvent: MbscCalendarEvent, oldEventOccurrence: MbscCalendarEvent, newEvent: MbscCalendarEvent, updatedEvent: MbscCalendarEvent, updateMode: "all" | "current" | "following", timezone: string, timezonePlugin: MbscTimezonePlugin) => {newEvent: MbscCalendarEvent | null, updatedEvent: MbscCalendarEvent}

Updates a recurring event, returns the updated and the new event.

Parameters:

  • originalRecurringEvent - The original event to update.

  • oldEventOccurrence - The original event occurrence in case of & (what is dragged).

  • newEvent - The created even in case of & (where is dragged).

  • updatedEvent - The updated event from popup.

  • updateMode - The update type.

Event delete​

When an event is selected on the Eventcalendar, hitting the Delete or Backspace button will delete the event.

Just before the event is deleted, the onEventDelete event is fired. Returning false from the onEventDelete will prevent the delete from happening. If not prevented, there will be an onEventDeleted event fired and the event will be removed from the Eventcalendar.

Either one of these events can be used to send the deletion through an API.

Notify a server of an event deletion
import { Component } from '@angular/core';
import axios from 'axios';
import { MbscCalendarEvent, MbscEventcalendarView, MbscEventDeletedEvent } from '@mobiscroll/angular';

@Component({...})
export class MyComponent {
  myView: MbscEventcalendarView = {
    schedule: { type: "week" },
  };

  myEvents: MbscCalendarEvent[] = [
    { id: 'id1' start: '2023-09-24', end: '2023-09-30', title: 'Short trip!'},
  ];

  deleteEvent(args: MbscEventDeletedEvent) {
    const theEvent = args.event;
    // you can use whatever library you want instead of axios
    axios.post('/your-api', theEvent);
  }
}
<mbsc-eventcalendar (onEventDeleted)="deleteEvent($event)" [data]="myEvents" [view]="myView"></mbsc-eventcalendar>
caution

When deleting a recurring event, there will not be an onEventDelete nor an onEventDeleted event fired because the event is not deleted actually. A single instance is deleted from a set of occurences by adding an exception to the rule.

Adding this exception to the rule is an update to the event, so the onEventUpdate and onEventUpdated are fired instead of the delete.