Skip to main content

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
  • 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 createEventOnDbClick: 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,
createEventOnDbClick: 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 coresponding objects with settings in the views object.

Day and Week view modes

For the Day and Week view modes you can set the following parameters (features):

  • 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 column width of the "hour" scale hourScaleWidth: number
  • a row height of the "hour" scale hourHeight: number
  • 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],
hourScaleWidth: 50,
hourHeight: 40,
eventMargin: "20px", // if "eventsOverlay: false" only
columnPadding: "150px"
};
// Event Calendar settings
config: {
...,
views: {
day: day_and_week_settings,
week: day_and_week_settings,
month: {...}
}
}

For the Month view mode you can set the following parameters (features):

  • 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: {
day: {...},
week: {...},
month: month_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: [
{
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 type

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

new eventCalendar.EventCalendar("#root", {
editorShape: [
{
type: "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"
}
},
// 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: [
{
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: [
{
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: [
{
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: [
{
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
]
});

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!

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 3 available view modes:

  • mode: "day" - the "Day" view mode
  • mode: "week" - the "Week" view mode
  • mode: "month" - the "Month" view mode
// create Event Calendar
new eventCalendar.EventCalendar("#root", {
mode: "week", // the "Week" mode is displayed initially
// other configuration parameters
});

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: