DayPilot.Calendar.update

The update() method updates and redraws the JavaScript Calendar component. There are two supported update modes:

1. You can apply changes by directly modifying the properties on the DayPilot.Calendar object before invoking update():

dp.viewType = "Resources";
dp.update();

2. You can pass a set of changes using the options parameter:

dp.update({viewType: "Resources"});

This method can be called before init(). In that case it will only set the properties specified using the options parameter. The Calendar component will be rendered when you call the init() method.

This method cannot be called after the component has been disposed using dispose(). In that case, an exception will be thrown.

Declaration

DayPilot.Calendar.update([options]);

Parameters

• options - object with properties and events to be updated (object)

The options object can specify any of the standard properties and event handlers.

Special Properties

The following options properties have a special meaning:

• columns - specifies the columns array (will be translated to columns.list); since 2019.2.3845

• events - specifies the events array (will be translated to events.list); if this is the only property a partial update will be performed (see Optimized Update below)

• scrollToHour - the Calendar will scroll vertically to the specified hour after update

• zoom - index of the zoom level to be set (since 2023.1.5540)

Optimized Update

An optimized partial update will be performed if the only property in the options object is one of these properties:

• events (since 2019.1.3531)

Example:

dp.update({events: [ { id: 1, start: "2020-10-01T12:00:00", end: "2020-10-01T14:00:00", text: "Event 1" } ]});

Examples

Loading events using the options parameter:

var data = [
  {
      id: 1,
      start: DayPilot.Date.today().addHours(10),
      end: DayPilot.Date.today().addHours(11),
      text: "Event 1"
  },
  {
      id: 2,
      start: DayPilot.Date.today().addHours(13),
      end: DayPilot.Date.today().addHours(16),
      text: "Event 2"
  }
];
dp.update({events: data});

Changing the calendar view type:

dp.viewType = "Day";
dp.update();