Skip to main content

calendars

Description​

Optional. An array of objects containing the calendars (event types) data

info

A calendar is a set of parameters you can apply to the events to group them by these parameters!

Usage​

calendars?: [
    { 
        id: string | number,
        label: string,
        readonly: boolean,
        active: boolean,
        color?: {
            background?: string, 
            border?: string,
            textColor?: string
        }
    }, {...}
];

Parameters​

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

  • id - (required) an ID of the calendar
  • label - (required) a text label of the calendar
  • active - (required) shows/hides events of the current calendar
  • readonly - (optional) enables/disables an ability to edit and delete the current calendar
  • color - (optional) an object with the style parameters, applied to the events of current calendar. Here you can specify the following parameters (styles):
    • background - (optional) a HEX code of the event background color related to the current calendar
    • border - (optional) a HEX code of the event border color related to the current calendar
    • textColor - (optional) a HEX code of the event text color related to the current calendar

Default config​

note

You can export the default config using the eventCalendar.defaultCalendars expression.

const defaultCalendars = [
    {
        id: "work",
        label: "Work",
        readonly: false,
        active: true,
        color: {
            background: "#d5eaf7",
            border: "#098CDC"
        }
    },
    {
        id: "meeting",
        label: "Meeting",
        readonly: false,
        active: true,
        color: {
            background: "#E6E5EC",
            border: "#7A67EB"
        }
    },
    {
        id: "rest",
        label: "Rest",
        readonly: false,
        active: true,
        color: {
            background: "#EDD1EC",
            border: "#AD44AB"
        }
    },
    {
        id: "movie",
        label: "Movie",
        readonly: false,
        active: true,
        color: {
            background: "#CEEDC3",
            border: "#77D257"
        }
    }
];
info

To set the calendars config dynamically, you can use the setConfig() method. You can also update the calendar data using the updateCalendar() method, add a new calendar using the addCalendar() method, and delete a calendar via the deleteCalendar() method.

Example​

// custom calendars
const 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"
        }
    }
];
// create Event Calendar
new eventCalendar.EventCalendar("#root", {
    calendars
    // other configuration parameters
});

Related sample: Event Calendar. Event color