DayPilot.Calendar.events.list

The events.list property (array) stores the event data source used by the JavaScript Calendar component. You can use it to load calendar events.

Declaration

DayPilot.Calendar.events.list

Default Value

[]

Notes

The array items must follow the DayPilot.Event.data structure.

The events are displayed after calling init() or update(). To load the data from a remote endpoint instead of assigning it directly, use DayPilot.Calendar.events.load().

Event text stored in DayPilot.Event.data.text is HTML-encoded automatically. Use DayPilot.Event.data.html only when you intentionally provide trusted HTML content.

Examples

JavaScript

const calendar = new DayPilot.Calendar("dp", {
  viewType: "Week",
  startDate: "2025-12-18",
  // ...
});

calendar.events.list = [
  {
    start: "2025-12-18T14:00:00",
    end: "2025-12-18T16:00:00",
    id: 1,
    text: "Meeting",
  },
];

calendar.init();

Angular

In the Angular calendar component, set the events input.

<daypilot-calendar [config]="config" [events]="events"></daypilot-calendar>

events: DayPilot.EventData[] = [
  {
    start: "2025-12-18T14:00:00",
    end: "2025-12-18T16:00:00",
    id: 1,
    text: "Meeting",
  },
];

config: DayPilot.CalendarConfig = {
  viewType: "Week",
  startDate: "2025-12-18",
  // ...
};

React

In the React calendar, pass the event data using the events prop.

const events = [
  {
    start: "2025-12-18T14:00:00",
    end: "2025-12-18T16:00:00",
    id: 1,
    text: "Meeting",
  },
];

<DayPilotCalendar
  viewType="Week"
  startDate="2025-12-18"
  events={events}
  {/* ... */}
/>

Vue

In the Vue calendar, pass the data using the :events prop.

<DayPilotCalendar
  :viewType="'Week'"
  :startDate="'2025-12-18'"
  :events="events"
  <!-- ... -->
/>

const events = ref([
  {
    id: 1,
    start: "2026-01-01T12:00:00",
    end: "2026-01-01T14:00:00",
    text: "Event 1",
  },
]);

See Also

Event Loading [doc.daypilot.org]

DayPilot.Event.data

DayPilot.Calendar.events.load()

DayPilot.Calendar.init()

DayPilot.Calendar.update()

DayPilot.Calendar Class