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().
[]
dp.events.list = [ { start:"2023-12-18T14:00:00", end:"2023-12-18T16:00:00", id: 1, text: "Meeting" } ];
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:"2023-12-18T14:00:00", end:"2023-12-18T16:00:00", id: 1, text: "Meeting" } ]; config: DayPilot.CalendarConfig = { viewType: "Week", startDate: "2023-12-18" }; }
In the React calendar, the events.list value can be set using events attribute of the <DayPilotCalendar> tag:
constructor(props) { this.events = [ { start:"2023-12-18T14:00:00", end:"2023-12-18T16:00:00", id: 1, text: "Meeting" } ]; } render() { return ( <div> <DayPilotCalendar viewType={"Week"} startDate={"2023-12-18"} events={this.events} /> </div> ); }