New Release: Mobiscroll 5.15 & 5.15.1 & 5.15.2

Announcements
1

What’s New

I am excited to announce third party calendar integration with Google Calendar and Outlook Calendar, along with timezone support for the date & time pickers.

Show and manage events coming from third party calendars

Whether you would like to load events from a public calendar or you would like to enable the management of the events from private calendars, let people use their Outlook or Google calendars as a backend, that’s all possible with the new integration plugin. We have studied the stories we heard from customers and there were three distinctive jobs:

  • People just wanted to show events from a public calendar in a nice, responsive view on their website
  • Developers wanted to enable their users to load their personal calendars so that they can have a better handle on scheduling
  • Developers wanted to enable their users to load, add/edit/delete and sync events to their personal calendars

We are launching a new product that can be loaded as an add-on on top of the event calendar and provides a unified and easy way to handle these jobs with Google and Outlook Calendars. The API includes authentication, calendar listing, loading and event syncing with add/edit/delete.


Syncing with private outlook calendar

https://demo.mobiscroll.com/eventcalendar/sync-events-google-calendar#https://mcusercontent.com/03c1c3fac1ec96e655be9d223/images/a7e9a533-2ae5-9c56-2f29-825461cfa818.gif(image larger than 4 MB)

Syncing with private google calendar

The best thing is that you won’t need to write complicated plumbing code to convert the events coming from the external calendars in a format that Mobiscroll understands. The reading and writing, conversion is all done in the plugin. Of course, it is possible to extend it and write a more complex event handling logic if needed.

The integration plugin is available as an add-on to the “Scheduling & Calendaring” license and it is included in the “Complete” license.


Show events from public google calendars

Give the demos a look, load your google & outlook calendar events or see how you can display events from public google calendars. There are examples available for the:

Work with different timezones in the date & time picker

Since we introduced timezones to the event calendar, supporting use-cases that involve multiple timezones became much easier, the code became cleaner and it was a more polished experience using Mobiscroll.

One piece of the puzzle that was missing was the date & time pickers supporting multiple timezones. This was really an issue when events were edited and shown in one timezone but saved in a different one.

Starting with 5.15 it is possible to pass datetimes in one timezone (usually UTC in multi-timezone scenarios) and enable selection in either local time or any timezone for that matter

Before 5.15 this needed to be handled manually by developers, meaning they had to convert the datetimes between data and display timezones.


Handling data timezone & display timezone in the date picker

We use external libraries to handle the timezone conversion, currently supporting moment-timezone and luxon, the same way as it is handled in the event calendar. Check out this guide on how to get started and explore the demos.

What’s next

We are working on a number of QOL improvements, multiple timezone tracks for the scheduler and virtual scrolling for the timeline.

Read the full blog post

MOBISCROLL 5.15

All Components

NEW

  • We added a new calendar integration plugin that comes with Google Calendar and Outlook Calendar integration for syncing, loading, reading and writing events and calendars. Let your users sync with their personal and work calendars.

FIXED

  • We fixed the yearly recurrence, which was not working correctly if month was not explicitly specified, now it takes the month of the event start.
  • We fixed the weekly recurrence, which was not working if week day was not explicitly specified, now it takes the week day of the event start.
  • We fixed the date parser to accept ISO8601 basic format as well (e.g. '20210214T1000' as well, not just '2021-02-14T10:00' )

Datepicker

NEW

  • We added support for timezones. The dataTimezone and displayTimezone options enable you to store the value 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 a bug in case of the range selection, when the same range was selected twice, the end date time part was jumping to the end of the day.
  • We fixed the bottom display on iOS 15 Safari, where there was an extra space under the picker.
  • We fixed the time grid css style loading that didn’t take the included themes in account.

Eventcalendar

FIXED

  • We fixed the occasional initial flash of styling in desktop mode.
  • We fixed a bug in the year view where the first month wasn’t always January after dynamically switching from timeline or scheduler.
  • We fixed the lastDay argument of the onPageLoading and onPageLoaded events, which was not correct in case of the year view.
  • We fixed the year view that appeared incorrectly in the Windows theme.

Forms

FIXED

  • We fixed the stepper css style loading that didn’t take the included themes in account.

Scheduler

FIXED

  • We fixed the the event positioning logic for external drag & drop that ended up in an error in some cases.
  • We fixed the drag & drop, which worked incorrectly in day mode with resources.

Select

FIXED

  • We fixed the bottom display on iOS 15 Safari, where there was an extra space under the picker.

Timeline

FIXED

  • We fixed the the event positioning logic for external drag & drop that ended up in an error in some cases.
  • We fixed the resize and drag & drop, where day boundaries were incorrectly calculated for all-day events and in event listing mode.

MOBISCROLL 5.15.1

All Components

FIXED

  • We fixed a runtime error in Angular, which occured if the reflect-metadata package was also used in the project.

Agenda

FIXED

  • We fixed an issue where the agenda scroll was jumping, if selectedDate was used in controlled mode in React.

Datepicker

FIXED

  • We fixed the validation, which did not work correctly when single date wheel was used on the date scroller. Recurring invalids were only loaded for the next and previous months from the initial date.
  • We improved compatibility with Ionic input to make it work correctly with floating labels and trigger the ionChange event as well.
  • We added aria-label attributes to the next and previous buttons on the calendar.

Eventcalendar

FIXED

  • We added the missing label and labels properties to the MbscLabelClickEvent interface.
  • We added aria-label attributes to the next and previous buttons on the calendar.
  • We fixed an issue where the selected date was not displayed correctly when timezones were used.

Forms

FIXED

  • We fixed an issue where it was not possible to uncheck a radio button in jQuery and Javascript.
  • We improved the accessibility of the segmented item by allowing to specify aria-label for icon-only items.

Scheduler

FIXED

  • We fixed the the event positioning logic for external drag & drop that still ended up in an error, when the external event was dragged from the right side.
  • We fixed an issue where some occurrences of weekly recurring events were skipped.
  • We fixed the date argument of the onCellClick event, which was incorrect on the day of daylight saving start or end.

Timeline

FIXED

  • We fixed the resize in event listing mode and for all-day events, if there was no end date specified.
  • We fixed an issue where some occurrences of weekly recurring events were skipped.
  • We fixed the date argument of the onCellClick event, which was incorrect on the day of daylight saving start or end.
  • We fixed the drag & drop of all-day events, where the day boundaries were not respected.

MOBISCROLL 5.15.2

Calendar integrations

NEW

  • We added support for loading public Google calendars, without the need for authentication.

FIXED

  • We fixed an error which occurred if the loaded Google calendar was not present on the calendar list of the user.
  • We fixed the type definition of the Google calendar integration to accept the apiKey option.

Datepicker

FIXED

  • We fixed the localization of month names in multiple month view in Angular.
  • We fixed the calendar styling which did not expand to full width in bottom mode in Angular.
  • We fixed the parsing of the input value, which was not working if timezones were used.

Eventcalendar

FIXED

  • We fixed the localization of month names in multiple month view in Angular.
  • We fixed the length of the recurring event occurrence in case of all-day events, which, depending on the end time, was shown one day longer or shorter on the day of daylight saving change.
  • We improved and simplified the calculation of the event label widths, which was not exactly accurate on the print view.

Select

FIXED

  • We fixed an issue where the input value was not updated if the text of the selected value has been changed.

Timeline

FIXED

  • We fixed the event length calculation on the days of daylight saving change.

For the full changelog please visit our release history.

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