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.

info

If there are multiple events with the same id, the calendar will drop an error as soon as it finds a duplicated id. It is expected that each event has its own unique id, or that the id is not specified (and then the calendar will generate its own id).

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:

• api.getReactiveState() - gets an object with the reactive properties of the StateStore
• api.getState() - gets an object with the current properties of the StateStore
• api.getStores() - gets an object with the DataStore

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:

• updateCalendar() - updates the calendar data by the specified ID
• updateEvent() - updates the event data by the specified ID

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: