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.
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:
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
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
displayTimezone options are set – the
exclusiveEndDates options is automatically changed to
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.
More useful features are coming to the event calendar including hierarchy support, event listing mode and new mode for the time picker.
Illustration by Ouch.pics.