New Release: Mobiscroll 5.7 & 5.7.1 & 5.7.2

Announcements
1

What’s New

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.


Dynamically change the timezone

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.


Month view for the timeline with resources

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.


Multiple select input

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.

Read the full blog post

MOBISCROLL 5.7

Agenda

NEW

  • We added exclusive end date support for events, invalids and colors. When enabled using the exclusiveEndDates option, ranges that end on 00:00 will count until the previous day. This option is automatically turned on when working with timezones.
  • We added support for displaying events in different timezones. The dataTimezone and displayTimezone options enable you to parse the event data in one timezone, and then display it in another. We use external libraries to handle the timezone information, currently supporting moment-timezone and luxon .

Datepicker

FIXED

  • We fixed the disabling of the show/hide animation, which did not work correctly.

Eventcalendar

NEW

  • We added exclusive end date support for events, invalids and colors. When enabled using the exclusiveEndDates option, ranges that end on 00:00 will count until the previous day. This option is automatically turned on when working with timezones.
  • We added support for displaying events in different timezones. The dataTimezone and displayTimezone options enable you to parse the event data in one timezone, and then display it in another. We use external libraries to handle the timezone information, currently supporting moment-timezone and luxon .

FIXED

  • We fixed the onCellDoubleClick event, which only worked with clickToCreate enabeled.
  • We fixed the mouse cursor styling on empty days.

Scheduler

NEW

  • We added exclusive end date support for events, invalids and colors. When enabled using the exclusiveEndDates option, ranges that end on 00:00 will count until the previous day. This option is automatically turned on when working with timezones.
  • We added vertical and horizontal auto-scroll to drag & drop. The viewport automatically follows when the event approaches the edge of the scrollable area.
  • We added support for displaying events in different timezones. The dataTimezone and displayTimezone options enable you to parse the event data in one timezone, and then display it in another. We use external libraries to handle the timezone information, currently supporting moment-timezone and luxon .
  • We added a month view to the timeline.

FIXED

  • We fixed the dragTimeStep option, which was not working correctly if was greater than 1 hour.

Select

NEW

  • We added multiple select inputs. This brings a new styling to mobiscroll inputs that are linked to multi-select pickers by displaying each selection as separate chips (small containers with text that stand out) on the UI.

FIXED

  • We fixed a bug that prevented the value selection when using the select with reactive forms in Angular 9+.

Timeline

NEW

  • We added vertical and horizontal auto-scroll to drag & drop. The viewport automatically follows when the event approaches the edge of the scrollable area.

MOBISCROLL 5.7.1

Scheduler

FIXED

  • We fixed a bug in the monthly timeline view that didn’t render the last day.

MOBISCROLL 5.7.2

Scheduler

FIXED

  • We fixed the event drag & drop on touch devices in Angular where an error was thrown if there was interaction with the events.

Timeline

FIXED

  • We fixed the timeline resources column was not scrolling alongside the grid in Angular.
  • We fixed the incorrect resource calculation during drag & drop interactions when there was vertical scroll in the grid.

For the full changelog please visit our release history.

PS. You will find an upgrade guide for moving from Mobiscroll 4 to Mobiscroll 5.