DayPilot.Month.events.list

The events.list property holds an array with the monthly event calendar data.

Declaration

DayPilot.Month.events.list

Default Value

null

Notes

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

• The events will be displayed after calling init() or update().

• In Angular, React, and Vue wrappers, use the component events input or prop to provide the event collection.

Examples

JavaScript

You can supply the event collection during initialization.

const dp = new DayPilot.Month("dp", {
  startDate: "2025-12-01",
  events: [
    {
      start: "2025-12-18T14:00:00",
      end: "2025-12-18T16:00:00",
      id: 1,
      text: "Meeting"
    }
  ],
  // ...
});
dp.init();

You can also assign events.list directly before initialization.

const dp = new DayPilot.Month("dp", {
  startDate: "2025-12-01",
  // ...
});
dp.events.list = [
  {
    start: "2025-12-18T14:00:00",
    end: "2025-12-18T16:00:00",
    id: 1,
    text: "Meeting"
  }
];

dp.init();

After the component is initialized, you can replace the event array.

dp.events.list = [
  {
    start: "2025-12-19T10:00:00",
    end: "2025-12-19T11:00:00",
    id: 2,
    text: "Review"
  }
];

Refresh the monthly calendar using update().

dp.update();

Angular

In the Angular monthly calendar component, set the event data using the events attribute of the Angular component.

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

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

config: DayPilot.MonthConfig = {
  startDate: "2025-12-01",
  // ...
};

React

In the React monthly calendar, set the event data using the events prop of <DayPilotMonth>.

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

<DayPilotMonth
  startDate="2025-12-01"
  events={events}
  {/* ... */}
/>

Vue

In the Vue monthly calendar, use the :events prop of <DayPilotMonth>.

<script setup>
import {ref} from "vue";

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

<template>
  <DayPilotMonth
    :events="events"
    <!-- ... -->
  />
</template>

See Also

DayPilot.Event.data

DayPilot.Calendar.init()

DayPilot.Calendar.update()

DayPilot.Month Class