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:
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:
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:
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:
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!