Adding/Deleting Events

Adding events

To add an event to Scheduler, you can use one of three methods:

1. addEvent - adds a new event and invokes the onEventAdded or onEventChanged event;
2. addEventNow - adds a new event and opens the lightbox to confirm. Doesn't invoke any events;
3. setEvent - adds a new event to the scheduler's data pool. Doesn't invoke any events.

The recommended way is the addEvent method:

const eventId = scheduler.addEvent({
    start_date: new Date(2026, 5, 16, 9, 0),
    end_date:   new Date(2026, 5, 16, 12, 0),
    text: "Meeting",
    holder: "John", // custom data
    room: "5"       // custom data
});

Validating lightbox fields

Default values for lightbox controls

Updating events

There are two common ways to update events in Scheduler:

1. If you only need to re-render the event on the client, use updateEvent.
2. If you need to apply and save changes on the server (e.g., via dataProcessor), call addEvent after updating the event object.

const eventId = scheduler.addEvent({
    start_date: new Date(2026, 5, 16, 9, 0),
    end_date:   new Date(2026, 5, 16, 12, 0),
    text: "Meeting"
});
 
const event = scheduler.getEvent(eventId);
event.text = "Conference"; // change event data

scheduler.updateEvent(event.id); // repaint without sending to the server
//or
scheduler.addEvent(event.id); // repaint and send update to the server

Deleting events

To delete an existing event from the scheduler, use the deleteEvent method:

const data = [
    { id: 1, start_date: "2026-04-01 09:00", end_date: "2026-04-01 12:00", text: "Task1" },
    { id: 2, start_date: "2026-04-02 12:00", end_date: "2026-04-02 20:00", text: "Task2" }
];

scheduler.parse(data);
...
scheduler.deleteEvent(2);

If you have dataProcessor initialized, events added to or deleted from Scheduler are automatically synced with the data source. See the detailed information in the Server-Side Integration guide.

Fully custom lightbox