Skip to main content



Optional. An array of objects containing the events data


events?: [
start_date: Date,
end_date: Date,
allDay?: boolean,
id?: string | number,
type?: string | number,
text?: string,
details?: string,
dragResize?: boolean,
readonly?: boolean,
dragMove?: boolean,
color?: {
background?: string,
border?: string,
textColor?: string
[custom_key: string]?: any
{...} // other events data


For each event you can specify the following parameters (data):

  • start_date - (required) a start date of the event
  • end_date - (required) an end date of the event
  • allDay - (optional) enables/disables the event duration throughout the day

If the allDay parameter is set to true, the start_date and end_date parameters of the event will be ignored!

  • id - (optional) an ID of the event
  • type - (optional) a type (calendar) of the event
  • text - (optional) a label of the event
  • details - (optional) details of the event
  • dragResize - (optional) enables/disables an ability to resize the event via d-n-d
  • readonly - (optional) enables/disables an ability to perform all the event's operations
  • dragMove - (optional) enables/disables an ability to move the event via d-n-d
  • color - (optional) an object with the style parameters of the event. Here you can specify the following parameters (styles):
    • background - (optional) a HEX code of the event background color
    • border - (optional) a HEX code of the event border color
    • textColor - (optional) a HEX code of the event text color
  • custom_key - (optional) a custom key of the event

To set the events data dynamically, you can use the parse() and setConfig() methods. You can also update the event data using the updateEvent() method.


// create Event Calendar
new eventCalendar.EventCalendar("#root", {
events: [
start_date: new Date("2021-05-24T00:00:00"),
end_date: new Date("2021-06-08T00:00:00"),
allDay: false,
id: "1",
type: "work",
text: "Current event",
details: "Philippe-Chatrier Court\n Paris, FRA",
dragResize: true,
readonly: false,
dragMove: true,
color: {
background: "#EDD1EC",
border: "#AD44AB",
textColor: "#3e98db"
custom_key: "Custom key of the event"
// other events data
// other configuration parameters