Announcing DHTMLX Event Calendar 1.1 with Year and Agenda Views, New Editor Types, and Extended Styling Options

by
| |
3 minutes
| Leave a comment

A few months after releasing our JavaScript Event Calendar, we’re happy to announce its first minor release. In this update, you’ll be able to set and customize two new timeline view modes, i.e., Year and Agenda. We also added features to use multiselect and radio types of the editor field and highlight grid cells via API.

Download a free trial of Event Calendar v1.1 >

Year and Agenda View Modes

Starting from version 1.1, DHTMLX Event Calendar provides five built-in timeline view modes. Besides the already available Day, Week, and Month modes, users can now schedule their activities in Year and Agenda views.

You can specify an initial view mode via the mode property:

// create Event Calendar
new eventCalendar.EventCalendar("#root", {
    mode: "year"
    // other configuration parameters
});

The code snippet below demonstrates all currently available views. You can switch the timeline between different view modes using the selector on the toolbar.

Moreover, we extended the templates property by adding “yearEvent” and “agendaEvent” parameters so you can easily specify custom templates for the events of the Year and Agenda views respectively:

const { format } = dateFns; // date-fns library  (https://date-fns.org/)
new eventCalendar.EventCalendar("#root", { // create Event Calendar
    templates: {
         // the event template of the "Year" mode
        yearEvent: ({ event, calendar }) => {
            return `
                <div className="wrapper">
                    <i className="mdi mdi-calendar-multiple"> </i>
                    <span className="multievent_label">${event.text}</span>
                </div>`;
        },
        // the event template of the "Agenda" mode
        agendaEvent: ({ event, calendar }) => {
            const { start_date, end_date, text } = event;
            const start = format(start_date, "HH:mm");
            const end = format(end_date, "HH:mm");
            const label = `
                <b>Event:</b> ${text} </br>
                <b>Time:</b> ${start}-${end}`;
            return `
                <div>
                    <span className="label"> ${label} </span>
                </div>
            `;
        }
    },
    // other configuration parameters
});

The “agendaDate” parameter allows setting a custom template to the date cells in the Agenda view mode:

        agendaDate: ({ event, calendar }) => {
            const day = format(date, "do");
            const week = format(date, "dddd");
            return `
                <div className="custom-date">
                    <b>${day}</b>
                    ${week}
                </div>
            `;
        },
Highlighting Grid Cells

DHTMLX Event Calendar 1.1 enables you to style grid cells by applying a custom CSS selector via the “cellCss” parameter of the config property. It’s applicable to any of the timeline view modes containing cells.

You can read more about Event Calendar configuration options in the documentation.

Multiselect and Radio Editor Types

By default, DHTMLX Event Calendar includes an editor consisting of multiple controls for manipulating data of the selected event. This release brings new multiselect and radio types of controls.

The editor’s appearance and functionality can be managed via the editorShape property. For example, you can set the radio type in the following way:

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

On the snippet below, you can explore the updated list of editor controls by double-clicking any of the events or selecting the “Edit event” button on the popup window.

Other Updates

We updated the colors property that contains the parameters of colors used in colorpicker. From now on, you can export default colors using the defaultColors parameter.

Starting from v1.1, you can download the DHTMLX Event Calendar widget via npm.

You can read about the Event Calendar v1.1 functionality in the “What’s new” article in the documentation.

To update the widget from an older version, check the “Migration to newer versions” article.

To estimate the functionality of the updated Event Calendar, download a free trial.

You’re free to share your thoughts on future releases as well as ask your questions about DHTMLX Event Calendar in the comments below. We’ll be glad to hear from you!

Related Materials