Skip to main content

How-tos

This page provides a full-fledged reference about initializing, configuring, customizing and working with JavaScript Event Calendar.

Basic principles

In this section you can find out basic principles of work with Event Calendar

TopicDescription
InitializationLearn how to initialize Event Calendar
ConfigurationLearn how to configure Event Calendar
CustomizationLearn how to customize Event Calendar
StylizationLearn how to stylize Event Calendar
LocalizationLearn how to localize Event Calendar

API reference

In this section you can find out corresponding references of Event Calendar API

TopicDescription
Event Calendar inner eventsLearn how to work with Event Calendar inner events
Event Calendar methodsLearn how to work with Event Calendar methods
Event Calendar propertiesLearn how to work with Event Calendar properties
Event Bus methodsLearn how to work with Event Bus methods
RestDataProvider methodsLearn how to work with RestDataProvider methods
State methodsLearn how to work with State methods

How to work with events

In these sections you can find out how to perform operations with events, work with events data and corfigure events

Performing operations with events

TopicDescription
Adding new eventsLearn how to add new events (without opening an editor)
Creating new eventsLearn how to create new events and open an editor
Deleting eventsLearn how to delete events
Updating eventsLearn how to update events

Working with event data

TopicDescription
Getting event dataLearn how to get the event data by its ID
Loading initial dataLearn how to load the initial event data
Parsing event dataLearn how to parse the event data
Serializing event dataLearn how to serialize the event data

Configuring events

TopicDescription
Creating eventsLearn how to enable/disable creating events (see the readonly parameter)
Creating events via dndLearn how to enable/disable creating events via dnd (see the dragCreate parameter)
Creating events via double clickingLearn how to enable/disable creating events via double clicking (see the createEventOnDblClick parameter)
Resizing events via dndLearn how to enable/disable resizing events via dnd (see the dragResize parameter)
Dragging (moving) eventsLearn how to enable/disable dragging (moving) events (see the dragMove parameter)
Editing eventsLearn how to enable/disable editing events (see the readonly parameter)
Setting an events heightLearn how to set a fix height of events (see the eventHeight parameter)
Setting an events time stepLearn how to set a time step when moving events (see the timeStep parameter)
Setting an events default durationLearn how to set a time step when moving events (see the defaultEventDuration parameter)
Setting an events positioningLearn how to set positioning of events (see the eventOverlay parameter)
Customizing an events appearanceLearn how to customize an event appearance using templates

How to work with calendars (event types)

In these sections you can find out how to perform operations with calendars (event types), work with calendars data and corfigure calendars

Performing operations with calendars (event types)

TopicDescription
Adding new calendarsLearn how to add new calendars
Deleting calendarsLearn how to delete calendars
Updating calendarsLearn how to update calendars

Working with calendars (event types) data

TopicDescription
Loading initial dataLearn how to load the initial data for calendars

Configuring calendars (event types)

TopicDescription
Editing calendarsLearn how to enable/disable editing calendars (see the readonly parameter)
Setting a calendar stateLearn how to set a calendar state (see the active parameter)
Setting a calendar colorLearn how to set a calendar color (see the color parameter)

How to work with events editor

In this section you can find out how to work with an events editor

TopicDescription
Autosaving modeLearn how to enable/disable an editor autosave mode (see the autoSave parameter)
Configuring an editor appearanceLearn how to configure an editor appearance
Updating editor settingsLearn how to update editor settings in a runtime

Configuring date format for editor fields

You can specify a custom date format for editor fields via the editorShape.config.format property:

Event Calendar Date Formar

const editorShape = [
{
type: "date",
key: "start_date",
config:{
format: "%d/%m/%Y", // you can specify any other format
},
label: "Start date",
time: true
},
{
type: "date",
key: "end_date",
config:{
format: "%d/%m/%Y", // you can specify any other format
},
label: "End date",
time: true
},
// other editor fields
];

new eventCalendar.EventCalendar("#root", {
editorShape,
// other configuration properties
});
tip

Explore the Format topic for more information about available date formats!

To get more information on how to configure the time and date format in the Event Calendar, refer to the Time and Date format section.

How to work with inner events

TopicDescription
Executing inner eventsLearn how to execute the inner event
Intercepting inner eventsLearn how to intercept the inner event
List of inner eventsSee the list of Event Calendar inner events
Reordering inner eventsLearn how to add the inner event into the Event Bus order
Subscribing on inner eventsLearn how to subscribe on the inner event

How to work with view modes

In this section you can find out how to configure and customize view modes

Configuring the hour scale in Day/Week views

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;
}
important

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

How to work with REST API

TopicDescription
Loading server data for eventsLearn how to load server data for events
Loading server data for calendarsLearn how to load server data for calendars
Working with serverLearn how to work with server via REST API

How to work with state

TopicDescription
Getting DataStoreLearn how to get a DataStore object
Getting StateStore propertiesLearn how to get an object of the StateStore properties
Getting StateStore reactive propertiesLearn how to get an object of the StateStore reactive properties

How to work with TypeScript

TopicDescription
Working with TypeScriptLearn how to work with TypeScript

Any questions left?

info

You can also leave your questions in the comments below!