Happy to introduce timezone support to the event calendar, a month view for the timeline and further improvements with the launch of version 5.7.

Timezone support

Operating across multiple timezones within the same instance of the event calendar was a big challenge. Eg. working across multiple states in the US. Before 5.7 the event calendar always worked in the local client timezone which was fine in most cases, however things like daylight saving times complicated things in addition to data massaging that needed to happen for dates and times that were in a different timezone.

To make working with dates and times easy we are introducing two new options: dataTimezone and displayTimezone. Going forward you can simply do things like load the data in UTC and display it in EST. This is super useful even if you don’t need to support multiple timezones or if you don’t have realtime timezone switching on the UI. Learn how to set it up.

Telling Mobiscroll about the timezone of the data

If the date-times you pass contain TZ information, the dataTimezone will be extracted from it what you can of course override by explicitly specifying the value.

Telling Mobiscroll what the display timezone should be

The displayTimezone sets the active timezone for the event calendar and can be dynamically changed either from a custom timezone picker or from code runtime by updating the option.

We use external libraries to handle the timezone information, currently supporting moment-timezone and luxon. Check out this guide on how to use either of the libraries.

Month view for the Timeline

We’ve released the new timeline component in version 5.6 to a great reception. While it solves many scheduling jobs, it was missing a month view that we’ve addressed with version 5.7.

To switch from a daily or weekly timeline all you need to do is set the type of the timeline object under the view option to 'month‘. Take it on a spin in this example.

Exclusive end dates

Up until version 5.7 the end times and end dates were inclusive. Passing '2021-07-21 00:00:00' as the events end date meant that the event ended on the 21st instead of the 20th. That ended up being displayed as an event spanning two days in the calendar instead of a one day event just for the 20th. This is how we worked with end dates throughout previous versions of Mobiscroll and because we’ll have to remain backward compatible this is how it will remain for the entirety of version 5.x. The default behavior will change starting Mobiscroll 6.

For now it needs to be manually turned on through the exclusiveEndDates option. When working with timezones – if any of the dataTimezone or displayTimezone options are set – the exclusiveEndDates options is automatically changed to true.

In fact the Timezone support forced us to reconsider how we are handling end-dates. The old way posed a number of issues that was not possible to solve otherwise. Learn more about exclusive end dates in the documentation.

Multiple select input

As multiple select inputs with chips were introduced to the multiple date picker we have added the same input rendering to the select as well. Multiple select components that are linked to Mobiscroll inputs will be rendered with a chip-ui in a similar manner to the multiple date picker.

What’s next

More useful features are coming to the event calendar including hierarchy support, event listing mode and new mode for the time picker.

For a full list of changes check out the release notes and download the latest version.

Illustration by Ouch.pics.