Today we are happy to announce the release of DHTMLX Event Calendar 2.2. It is a minor update with a pack of API enhancements that will certainly contribute to the development of this product. In v2.2 of our JavaScript Event Calendar, you will get acquainted with the novelties related to editing and storing recurring events, the ability to specify default values for the event editor, and calendar editor validation.
In this blog post, we provide a detailed overview of this minor update.
Updated Format of Recurring Events
The ability to specify the recurrence of appointments for all view modes is one of the most widely used features of our Event Calendar. In this minor update, we introduced several changes designed to simplify the work with recurring events via custom code.
The events property received 3 new optional parameters:
- recurringEventId – an ID of the original series
- originalStartTime – the start time of the event before editing
- status – status of the event deleted from the series i.e. “canceled”
In addition, the flow of API events that are fired upon editing the recurring series has been changed a bit. Whenever the series are modified from the UI, it triggers several calls of the update-event API event.
Firstly, the update-event will fire with a new mode parameter. This event will indicate that the series has been modified, while mode specifies the type of modification chosen by the user: the whole series or this and future events. In response to this event, the Calendar will perform required changes to the series and will trigger add-event or update-event used to modify the series and insert new records if needed.
This is a relatively minor change to the event flow of the calendar. The most important takeaway here is that if you handle API events manually you should usually ignore update-event that contains the mode flag. This parameter indicates the first stage of modifying the series and the real changes will be included in the subsequent event calls.
Moreover, these new parameters changed the way our Event Calendar stores data on exceptions in recurring series in recurring events.
Previously, this kind of data was stored in the RRULE format as EXTADE:
...other,
RRULE: "FREQ=DAILY;EXDATE=2022-06-01T04:00:00.000Z"
}
Now storing the data on exceptions with the RRULE format works as follows:
- exceptions contain the id of the parent series in the recurringEventId property, so you can easily find all exceptions of series by code
- exception dates are no longer written to EXDATE section of RRULE of the parent series. Instead, each exception contains the date-time of the original occurrence they replace in the originalStartTime property
- deleted occurrences are stored as separate entries and have their status value specified as “cancelled”
The new version of our Event Calendar is still compatible with the old data, so the migration should not be necessary. However, any changes made to old recurring series will be saved in a new format.
We’ve also fixed several format issues, where RRULE values generated by the Event Calendar deviated from iCalendar specification.
In practice, these changes will facilitate the integration of our calendar data with Google Calendar and other popular calendar tools.
Default Values for Event Editor
Improving the development experience with DHTMLX products is one of the key considerations for our team when preparing new releases. In v2.2, it becomes possible to specify default values for the event editor.
To do that, there is a new defaultEditorValues parameter in the config property. It returns an object with default values of the event editor:
return {
text: "My default text",
// ...
}
}
This new feature contributes to a better experience with the library and the overall efficiency of the development process.
Validation in Calendar Editor
When building a JavaScript day planner, you should certainly ensure data integrity and accuracy within the system. That’s where validation comes into play. Our Event Calendar component already offers this useful feature for the event editor. Starting from v2.2, you can also define and apply certain validation rules to the calendar editor.
To enable this feature, you’ll need to add a new calendarValidation function into the configuration object of Event Calendar.
console.log(calendar);
if (!calendar.text) return "Text is required";
}
Similarly to the editorValidation function, it returns an alert message with text.
Bugfixes
Here’s a list of bugs we’ve fixed for this release:
- Hidden events in the Month view are no longer rendered to DOM
- Fixed work of Weekly recurrence when editing a single event in the Month view
- Recurring exception is now working if start_date is not specified
- Fixed recurring workdays bug
- The config.viewControl property is set to “auto” for mobile devices
- UI regression in the Year view
Lastly, we also have to mention that the header of our Event Calendar is now more adaptive to various types of mobile devices.
All migration details to v2.2 are provided in the corresponding section of our documentation.
You can review all aspects of this release one more time in the “What’s new” section.
If you want to try the updated DHTMLX Event Calendar in your scenarios, just download a free 30-day trial version. For our current clients, v2.2 is available in their Client’s Area.