Skip to main content

Common Configuration

You can configure the Event Calendar appearance and functionality via corresponding API. The available parameters will allow you to:

  • configure the timetable grid via the config property
  • configure the editor fields via the editorShape property
  • configure validation of the editor fields via the editorValidation property
  • set the initial sidebar state via the sidebar property
  • set the initial view mode via the mode property
  • set the initial theme via the theme property
  • set the initial date via the date property
  • set the initial set of colors used in colorpicker via the colors property
  • customize the appearance of visual elements via the templates property
  • apply the desired locale via the locale property
  • load data for events and calendars via the events and calendars properties

Timetable Grid​

To configure the appearance and functionality of timetable grid, you can use the config property.

Configuring behaviour​

In the object of the config parameter you can manage the following behaviour:

  • an ability to create new events by drag-n-drop dragCreate: boolean
  • an ability to reschedule events by resizing dragResize: boolean
  • an ability to reschedule events by drag-n-drop dragMove: boolean
  • an ability to display info popup by click eventInfoOnClick: boolean
  • an ability to open editor by double click editorOnDblClick: boolean
  • an ability to create new event by double click createEventOnDblClick: boolean
  • an ability to overlay events eventsOverlay: boolean
  • an ability to auto save the event data (via the editor) autoSave: boolean
  • an ability to block all operations with events readonly: boolean
// create Event Calendar
new eventCalendar.EventCalendar("#root", {
    config: {
        dragCreate: true,
        dragResize: true,
        dragMove: true,
        eventInfoOnClick: true,
        editorOnDblClick: true,
        createEventOnDblClick: true,
        eventsOverlay: true,
        autoSave: true,
        readonly: false,
        ...
    },
    // other configuration parameters
});

Configuring appearance​

In the object of the config parameter you can also set the grid appearance:

  • a height of the grid header tableHeaderHeight: number
  • a height of the events eventHeight: number
  • a step of moving events via drag-n-drop timeStep: number
  • a start and end time of day timeRange: [number, number]
  • a duration of the new created events by default defaultEventDuration: number
config: {
    ...,
    tableHeaderHeight: 20,
    eventHeight: 50,
    timeStep: 5,
    timeRange: [9, 17],
    defaultEventDuration: 60
}

Configuring view modes​

In the object of the config parameter you can also set the appearance and functionality for each view mode separately. For this, you need to specify the corresponding objects with settings in the views array.

Day and Week view modes​

The Day and Week view modes can be set in the following way:

  • a height of multievents eventHeight: number (common config for all view modes)
  • enables/disables an ability to overlay events eventsOverlay: boolean
  • a step of moving events via d-n-d timeStep: number
  • an array with start and end time of day timeRange: array
  • a space between events (px) eventMargin: string
  • a right padding of the grid column (px) columnPadding: string
// settings of the "Day" and "Week" modes
const day_and_week_settings = {
    eventHeight: 40,
    eventsOverlay: false, 
    timeStep: 15,
    timeRange: [9, 19],
    eventMargin: "20px", // if "eventsOverlay: false" only
    columnPadding: "150px"
};
// Event Calendar settings
config: {
    ...,
    views: [
        {
            id: "week",
            label: "Week",
            layout: "week",
            config: day_and_week_settings
        },
        { 
            id: "day", 
            label: "Day",
            layout: "day", 
            config: day_and_week_settings, 
        },
        // other view modes settings
    ]
}
tip

The hour height of the time scale in Day and Week views is defined by the --wx-event-calendar_hour-cell-height css variable and can be specified in css:

.wx-event-calendar{
    --wx-event-calendar_hour-cell-height: 100px !important;
}

This value can be modified at any time the event will adjust its position automatically and will be displayed at correct position relatively to the time scale.

The hour width of the time scale is defined by the --wx-event-calendar_hour-scale-width variable:

.wx-event-calendar{
    --wx-event-calendar_hour-cell-width: 100px !important;
}
note

The !important directive is required for this style to work!

Month view mode​

The Month view mode can be set in the following way:

  • a height of multievents eventHeight: number (common config for all view modes)
  • a min height of a grid cell dayHeight: number
  • a max number of events per cell maxEventsPerCell: number
// settings of the "Month" mode
const month_settings = {
    eventHeight: 35,
    dayHeight: 60,
    maxEventsPerCell: 4
};
// Event Calendar settings
config: {
    ...,
    views: [
        {
            id: "month",
            label: "Month",
            layout: "month",
            config: month_settings
        },
        // other view modes settings
    ]
}

Timeline view mode​

The Timeline view mode can be set in the following way:

// settings of the "Timeline" mode
const timeline_settings = {
    colsCount: 90,
    minEventWidth: 50,
    colsWidth: 90,
    minSectionHeight: 100,
    sectionWidth: 158,
    step: [7, "day"],
    key: "section",
    header: [
        { unit: "month", step: 1, format: "MMM" },
        { unit: "day", step: 1, format: "d MMM" },
    ],
    sections: [
        { id: "1", label: "Section 1" },
        { id: "2", label: "Section 2" },
        { id: "3", label: "Section 3" },
    ],
    unassignedCol: true,
};
// Event Calendar settings
config: {
    ...,
    views: [
        {
            id: "month",
            label: "Month",
            layout: "month",
            config: timeline_settings
        },
        // other view modes settings
    ]
}

Editor​

The editor consists of the fields for managing the events data. To configure the editor fields (controls), you can use the editorShape property. You can use the following types of the editor fields:

Text and Textarea types​

The editor fields of text and textarea types you can set in the following way:

new eventCalendar.EventCalendar("#root", {
    editorShape: [
        ...eventCalendar.defaultEditorShape,
        {
            type: "text", // or "textarea"
            key: "label_key",
            label: "Event label",
            config: { 
                readonly: false,
                focus: true,
                disabled: false,
                placeholder: "Type your tips here",
                type: "text", // or "number"/"password"
                inputStyle: "height: 50px;"
            }
        },
        // settings of other fields
    ]
});

Combo and Multiselect types​

The editor field of combo and multiselect types you can set in the following way:

new eventCalendar.EventCalendar("#root", {
    editorShape: [
        ...eventCalendar.defaultEditorShape,
        {
            type: "multiselect", // or "combo"
            key: "priority_key",
            label: "Event priority",
            options: [
                { id: 1, label: "high" },
                { id: 2, label: "medium" },
                { id: 3, label: "low" }
            ],
            config: {
                disabled: false,
                placeholder: "Select priority"
            },
            template: (option) => {
                return `<div className="multiselect-wraper">
                    <img src=${option.avatar} alt="" className="multieselectOption-img" />
                    ${option.label} </div>`
            }
        },
        // settings of other fields
    ]
});

Radio type​

The editor field of radio type you can set in the following way:

new eventCalendar.EventCalendar("#root", {
    editorShape: [
        ...eventCalendar.defaultEditorShape,
        { 
            type: "radio",
            key: "priority",
            label: "Priority",
            options: [
                { value: 1, label: "High" },
                { value: 2, label: "Medium" },
                { value: 3, label: "Low" }
            ]
        },
        // settings of other fields
    ]
});

Color and ColorSchema types​

The editor fields of color and colorSchema types you can set in the following way:

new eventCalendar.EventCalendar("#root", {
    editorShape: [
        ...eventCalendar.defaultEditorShape,
        { 
            type: "colorSchema", 
            key: "colorschema_key",
            label: "Event color",
            colors: [
                {
                    background: "#d62b31",
                    border: "#32a852",
                    textColor: "#e5f01d",
                    colorpicker: "background"
                },
                {
                    background: "#ccf5ff",
                    border: "#00CDFF",
                    textColor: "#e5f01d",
                    colorpicker: "background"
                }
            ],
            config: {
                clear: true,
                placeholder: "Select color"
            }
        },
        { 
            type: "color", 
            key: "color_key",
            label: "Color control",
            colors: ["#d62b31", "#32a852", "#e5f01d", "#00CDFF", "#ccf5ff"],
            config: {
                clear: true,
                placeholder: "Select color"
            }
        },
        // settings of other fields
    ]
});

Checkbox type​

The editor field of checkbox type you can set in the following way:

new eventCalendar.EventCalendar("#root", {
    editorShape: [
        ...eventCalendar.defaultEditorShape,
        {
            type: "checkbox", 
            key: "checkbox_key",
            label: "Event checkbox",
            text: "Check this checkbox"
        },
        // settings of other fields
    ]
});

Date type​

The editor field of date type you can set in the following way:

new eventCalendar.EventCalendar("#root", {
    editorShape: [
        ...eventCalendar.defaultEditorShape,
        {
            type: "date", 
            key: "start_date_key",
            label: "Start date",
            time: true
        },
        // settings of other fields
    ]
});

Files type​

The editor field of files type can be set in the following way:

const url = "https://some_backend_url";
new eventCalendar.EventCalendar("#root", {
    editorShape: [
        ...eventCalendar.defaultEditorShape,
        {
            type: "files", 
            key: "attached", // the "attached" key is used when providing the event data via the "events" property
            label: "Attachment",
            uploadURL: url + "/uploads",
            config: {
                accept: "image/*", // "video/*", "audio/*"
                disabled: false,
                multiple: true,
                folder: false
            }
        },
        // settings of other fields
    ]
});

Recurring type​

The editor field of recurring type can be set in the following way:

const events = [
    {
        ...,
        recurring: true,
        STDATE: new Date("2023-01-27T15:00:00"),
        DTEND: new Date("2023-06-27T15:00:00"),
        // repeat the event on working days only
        RRULE: "FREQ=WEEKLY;INTERVAL=1;BYDAY=Mo,Tu,We,Th,Fr"
    }, {...}
];

new eventCalendar.EventCalendar("#root", {
    events,
    editorShape: [
        {
            type: "recurring", 
            label: "Repeat event"
        },
        // settings of other custom fields
    ]
});

Linking editor fields to the data​

info

To link the editor field to the corresponding event data field, you need to provide a unique key for the editor field. The value of this key will be set automatically in the event data object. You can also provide the initial event data via this key.

// editor settings
const editorShape = [ 
    { 
        type: "text",
        key: "label_key",
        label: "Event label",
        config: {
            placeholder: "Enter new label here"
        }
    },
    { 
        type: "color",
        key: "color_key",
        label: "Event color",
        colors: ["#65D3B3", "#FFC975", "#58C3FE"],
        config: {
            clear: true
        }
    }
];
// events data
const events = [
    {
        label_key: "Volvo",
        color_key: "#65D3B3",
        start_date: new Date("2022-04-24T08:00:00"),
        end_date: new Date("2022-04-24T09:00:00")
    },
    {
        label_key: "BMW",
        color_key: "#FFC975",
        start_date: new Date("2022-04-24T10:00:00"),
        end_date: new Date("2022-04-24T11:00:00")
    }
];
// create Event Calendar
new eventCalendar.EventCalendar("#root", {
    editorShape,
    events
    // other configuration parameters
});
note

Unless you specify the editor settings via the editorShape property, the widget will apply a defaultEditorShape set of parameters!

Editor fields validation​

To validate data entered into editor fields, you can use the editorValidation property. See the example below for more details:

// create Event Calendar
new eventCalendar.EventCalendar("#root", {
    editorValidation: event => {
        if (!event.text) return "Text is required";
    }
    // other configuration parameters
});

To configure a sidebar state, you can use the sidebar property. There are 3 available states:

  • sidebar: { show: true } - the sidebar is shown (a toggle button for switching sidebar is shown)
  • sidebar: { show: false } - the sidebar is hidden (a toggle button for switching sidebar is shown)
  • sidebar: null - the sidebar and toggle button are hidden

To provide the initial data for calendars (event types) located on the sidebar, you can use the calendars property

// create Event Calendar
new eventCalendar.EventCalendar("#root", {
    sidebar: { show: false }, // the sidebar is hidden initially
    calendars: [ // data for calendars (event types) located on sidebar
        {
            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"
            }
        }
    ]
    // other configuration parameters
});

View Modes​

To set an initial view mode, you can use the mode property. There are 6 default view modes:

  • mode: "day" - the "Day" view mode
  • mode: "week" - the "Week" view mode
  • mode: "month" - the "Month" view mode
  • mode: "year" - the "Year" view mode
  • mode: "agenda" - the "Agenda" view mode
  • mode: "timeline" - the "Timeline" view mode
  • mode: custom_view_id - the custom view mode
// create Event Calendar
new eventCalendar.EventCalendar("#root", {
    mode: "timeline", // the "Timeline" mode is displayed initially
    // other configuration parameters
});
info

Use the config.views property to set a custom view mode

Initial Date​

To set (select) an initial date, you can use the date property:

  • date: new Date("2022-04-28 09:00:00") - an initially selected date
// create Event Calendar
new eventCalendar.EventCalendar("#root", {
    date: new Date("2022-04-28T09:00:00"), // the initially selected date
    // other configuration parameters
});

Example​

In this snippet you can see how to configure Event Calendar: