DayPilot.Calendar.events.list

The events.list property is an array that holds event calendar data. You can use it to load calendar events.

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

[]

Example

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

Angular Calendar

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

import {Component} from "@angular/core";
import {DayPilot, DayPilotCalendarComponent} from "daypilot-pro-angular";

@Component({
  selector: 'calendar-component',
  template: `<daypilot-calendar [config]="config" [events]="events"></daypilot-calendar>`,
  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.CalendarConfig = {
    viewType: "Week",
    startDate: "2025-12-18"
  };

}

React Calendar

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

import React, { useState, useEffect } from 'react';
import { DayPilotCalendar } 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>
      <DayPilotCalendar
        viewType="Week"
        startDate="2025-12-18"
        events={events}
      />
    </div>
  );
};

export default ReactCalendar;

Vue Calendar

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

<template>
  <DayPilotCalendar
      :viewType="'Week'"
      :events="events"
  />
</template>

<script setup>
import {DayPilot, DayPilotCalendar} 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>