Skip to main content

Working with data

Initial data loading

When initializing Event Calendar, you can provide the initial data for events, calendars and colors.

const events = [ // data for events
{
id: "1",
start_date: new Date("2021-05-24T00:00:00"),
end_date: new Date("2021-06-08T00:00:00"),
type: "rest",
text: "Current event",
details: "Philippe-Chatrier Court\n Paris, FRA",
allDay: false,
dragResize: true,
readonly: false,
dragMove: true,
color: {
background: "#EDD1EC",
border: "#AD44AB",
textColor: "#3e98db"
},
custom_key: "Custom key of the event"
},
{
id: "2",
start_date: new Date("2021-06-07T00:00:00"),
end_date: new Date("2021-06-13T00:00:00"),
type: "rest",
text: "French Open",
details: "Philippe-Chatrier Court\n Paris, FRA"
},
{
id: "3",
start_date: new Date("2021-06-10T00:00:00"),
end_date: new Date("2021-06-14T00:00:00"),
type: "movie",
text: "Aegon Championship",
details: "The Queens Club\n London, ENG"
},
];

const calendars = [ // data for calendars
{
id: "rest",
label: "Custom Rest",
readonly: true,
active: true,
color: {
background: "#EDD1EC",
border: "#AD44AB",
textColor: "#3e98db"
}
},
{
id: "movie",
label: "Custom Movie",
readonly: false,
active: false,
color: {
background: "#CEEDC3",
border: "#77D257",
textColor: "#3e98db"
}
}
];

const colors = [ // data for colors used in colorpicker
{
background: "#d62b31",
border: "#32a852",
textColor: "#e5f01d",
colorpicker: "background"
},
{
background: "#ccf5ff",
border: "#00CDFF",
textColor: "#e5f01d",
colorpicker: "background"
},
{
background: "#cee8f8",
border: "#098CDC",
textColor: "#e5f01d",
colorpicker: "border"
}
];

// initialize Event Calendar with the initial data for events, calendars and colors
new eventCalendar.EventCalendar("#root", {
events,
calendars,
colors
});

Loading data from local source

To load data for events and calendars from a local source, you can use the parse() method. It takes an array with the needed data as a parameter.

Loading data for events

// create Event Calendar
const calendar = new eventCalendar.EventCalendar("#root", { /*...*/ });
// load data into Event Calendar
calendar.parse(events);

Loading data for events and calendars

// create Event Calendar
const calendar = new eventCalendar.EventCalendar("#root", { /*...*/ });
// load data into Event Calendar
calendar.parse({ events, calendars });

Getting Event Calendar data

To get Event Calendar data, you can use the following methods:

  • getEvent() - gets an object of the event data by the specified ID
  • serialize() - serializes Event Calendar data to JSON

Getting Event Calendar state

To get Event Calendar state, you can use the following methods:

Adding new items

To add new events and calendars, you can use the following methods:

  • addCalendar() - adds a new calendar into Event Calendar
  • addEvent() - adds a new event into Event Calendar (without opening an editor)
  • createEvent() - adds a new event into Event Calendar and opens an editor

Updating items

To update the events and calendars, you can use the following methods:

Deleting items

To remove the events and calendars, you can use the following methods:

  • deleteCalendar() - removes a calendar from Event Calendar by the specified ID
  • deleteEvent() - removes an event from Event Calendar by the specified ID

Example

In this snippet you can see how to provide the initial data for events and calendars: