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:"2023-12-18T14:00:00", 
    end:"2023-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:"2023-12-18T14:00:00", 
      end:"2023-12-18T16:00:00", 
      id: 1, 
      text: "Meeting"
    }
  ];

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

}

React

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>
  );
}