Skip to content

Latest commit

 

History

History
217 lines (163 loc) · 14 KB

howtos.md

File metadata and controls

217 lines (163 loc) · 14 KB
sidebar_label title description
How-tos
JavaScript Event Calendar How-Tos
You can explore the How-tos page of DHTMLX JavaScript Event Calendar library in the documentation. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX Event Calendar.

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

Topic Description
Learn how to initialize Event Calendar
Learn how to configure Event Calendar
Learn how to customize Event Calendar
Learn how to stylize Event Calendar
Learn how to localize Event Calendar

API reference

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

Topic Description
Event Calendar inner events Learn how to work with Event Calendar inner events
Event Calendar methods Learn how to work with Event Calendar methods
Event Calendar properties Learn how to work with Event Calendar properties
Event Bus methods Learn how to work with Event Bus methods
RestDataProvider methods Learn how to work with RestDataProvider methods
State methods Learn 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

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

Working with event data

Topic Description
Getting event data Learn how to get the event data by its ID
Loading initial data Learn how to load the initial event data
Parsing event data Learn how to parse the event data
Serializing event data Learn how to serialize the event data

Configuring events

Topic Description
Creating events Learn how to enable/disable creating events (see the readonly parameter)
Creating events via dnd Learn how to enable/disable creating events via dnd (see the dragCreate parameter)
Creating events via double clicking Learn how to enable/disable creating events via double clicking (see the createEventOnDblClick parameter)
Resizing events via dnd Learn how to enable/disable resizing events via dnd (see the dragResize parameter)
Dragging (moving) events Learn how to enable/disable dragging (moving) events (see the dragMove parameter)
Editing events Learn how to enable/disable editing events (see the readonly parameter)
Setting an events height Learn how to set a fix height of events (see the eventHeight parameter)
Setting an events time step Learn how to set a time step when moving events (see the timeStep parameter)
Setting an events default duration Learn how to set a time step when moving events (see the defaultEventDuration parameter)
Setting an events positioning Learn how to set positioning of events (see the eventOverlay parameter)
Customizing an events appearance Learn 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)

Topic Description
Adding new calendars Learn how to add new calendars
Deleting calendars Learn how to delete calendars
Updating calendars Learn how to update calendars

Working with calendars (event types) data

Topic Description
Loading initial data Learn how to load the initial data for calendars

Configuring calendars (event types)

Topic Description
Editing calendars Learn how to enable/disable editing calendars (see the readonly parameter)
Setting a calendar state Learn how to set a calendar state (see the active parameter)
Setting a calendar color Learn 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

Topic Description
Autosaving mode Learn how to enable/disable an editor autosave mode (see the autoSave parameter)
Configuring an editor appearance Learn how to configure an editor appearance
Updating editor settings Learn 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

Topic Description
Executing inner events Learn how to execute the inner event
Intercepting inner events Learn how to intercept the inner event
List of inner events See the list of Event Calendar inner events
Reordering inner events Learn how to add the inner event into the Event Bus order
Subscribing on inner events Learn 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

Topic Description
Loading server data for events Learn how to load server data for events
Loading server data for calendars Learn how to load server data for calendars
Working with server Learn how to work with server via REST API

How to work with state

Topic Description
Getting DataStore Learn how to get a DataStore object
Getting StateStore properties Learn how to get an object of the StateStore properties
Getting StateStore reactive properties Learn how to get an object of the StateStore reactive properties

How to work with TypeScript

Topic Description
Working with TypeScript Learn how to work with TypeScript

Any questions left?

Ask the community

:::info You can also leave your questions in the comments below! :::