DayPilot.Month.events.list

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

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

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

Default Value

null

Example

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

Angular Monthly Calendar

In the Angular monthly calendar component, the events.list value can be set using events attribute of the Angular calendar component:

import {Component} from "@angular/core";
import {DayPilot, DayPilotMonthComponent} from "@daypilot/daypilot-lite-angular";

@Component({
  selector: 'calendar-component',
  template: `<daypilot-month [config]="config" [events]="events"></daypilot-month>`,
  styles: [``]
})
export class CalendarComponent {

  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 Monthly Calendar

In the React monthly calendar, the events.list value can be set using events attribute of the <DayPilotMonth> tag:

import React, { useState, useEffect } from 'react';
import { DayPilotMonth } from '@daypilot/daypilot-lite-react';

const ReactCalendar = () => {
  const [events, setEvents] = useState([]);

  useEffect(() => {
    setEvents([
      {
        start: "2025-12-18T14:00:00",
        end: "2025-12-18T16:00:00",
        id: 1,
        text: "Meeting",
      },
    ]);
  }, []);

  return (
    <div>
      <DayPilotMonth
        startDate="2025-12-01"
        events={events}
      />
    </div>
  );
};

export default ReactCalendar;

Vue Monthly Calendar

In the Vue monthly calendar, you can use the :events prop of the <DayPilotMonth> tag:

<template>
  <DayPilotMonth
      :events="events"
  />
</template>

<script setup>
import {DayPilot, DayPilotMonth} from '@daypilot/daypilot-lite-vue';
import {ref, onMounted} from 'vue';

const events = ref([]);

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

onMounted(() => {
  loadEvents();
});

</script>