New Release: Mobiscroll 5.16

Announcements
1

What’s New

Happy to introduce multiple timezone tracks for the scheduler, a new way to disable values in the date picker and lifecycle events that enable new interactions.

Showing time tracks for multiple timezones

Since the introduction of timezones back in 5.7 (it is possible to pass the data in one timezone and render it in a different timezone). This is being controlled through the dataTimezone and displayTimezone options.

The displayTimezone can be changed on the fly which is useful if someone wants to have a branch or timezone picker right in the calendar. Just think of a business that operates across multiple locations.

Building on top of this we are adding the possibility to display multiple time tracks with different timezones. This comes in handy if you need to see times side-by-side, for example when you have to coordinate resources across timezones. Every track can have a custom label so that people can understand it at a glance. Take a look at this example with three timezones.


Showing multiple timezone tracks

Preparing the date-time picker for selection

Setting up min-max values and disabling dates & times that are not available anymore is key to a great booking experience. After digging into customer feedback we learned there were two main approaches to invalidating dates and times.

It comes down to what data is stored. People either had the invalid times at hand, which is usually the case for bookings, appointments and so on. Or they had easy access to the valid times, which is the case for opening hours. Starting with 5.16, developers have the choice of passing invalids where all dates and times are valid except the ones passed in the invalid option or start with everything invalidated and pass only the valid dates, times and ranges in the valid option.

Play around with the configuration and see how you can either invalidate dates/times or set the only valid dates/times.


Enabling or disabling values

Highlighting drop areas on event drag & drop

In all views of the event calendar where drag & drop is applicable - calendar view, scheduler and timeline - certain ranges or resources can be disabled. These can be set when the UI is initialized or it can be dynamically updated. The same is applicable to background colors and almost every option of the event calendar.

Being able to dynamically change options opens up very deep customization and virtually limitless possibilities.

To give you a great example, we have built a demo that involves external tasks (events) that can be dragged onto a timeline view. These tasks are of two categories, software projects and hardware projects. When assigning a task to a teammate, you want to make sure to assign the SW projects to software people and HW projects to someone that can actually handle it.

In order to reduce errors we’ve added dynamic validation in addition to dynamically highlighting the resources that can accept such a task. All this is being done in the new onEventDragStart and onEventDragEnd lifecycle events. In these lifecycle events we know which task has been grabbed, its category and we can disable resources that are not a fit and highlight the resources that are available for the job. We can use the onEventDragEnd handler to reset the disabled resources and colors.

Play around with the demo and check out its code.


Highlight drop areas on event drag and drop

Year view for the Timeline

Setting up a yearly timeline is as easy as passing type: 'year' to the view.timeline option. This is consistent across the other views and is a nice QOL improvement that requires just a single setting instead of three. Check out the year view along with month, week and day views.

https://demo.mobiscroll.com/timeline/daily-weekly-monthly-yearly-timeline#https://mcusercontent.com/03c1c3fac1ec96e655be9d223/images/62ccf763-2360-5e2e-772a-435376026884.gif(image larger than 4 MB)

Timeline year view

React 18 bugfixes and ongoing support

One of the issues that came up with the latest React was related to the quick navigation year-month picker for the calendar and event calendar components. After interacting with the picker, the UI was not removed and it overlapped the main component, which in some cases made it unusable. This and many other things can easily show up during new major releases of underlying frameworks. That’s why we are keeping things up to date and always recommend you upgrade to the latest version.

What’s next

We are continuously working to make Mobiscroll better for you with every release. That’s why we are looking forward to an updated layouting engine for the timeline that will come with virtual scrolling and other goodies. Stay tuned!

Read the full blog post

MOBISCROLL 5.16

Agenda

FIXED

  • We fixed an issue in React 18, where the year and multi-year views were not correctly removed from the markup after animation. This made the component unusable.

Datepicker

NEW

  • We added a new valid option, that can be used instead of the invalid option to set valid dates, times, ranges instead of invalidating values.

FIXED

  • We fixed an issue, where the timezone plugins couldn’t be imported from packages that only contained the Datepicker component.
  • We exported the MbscPopupDisplay option, which was not reachable before. This is necessary if the display is set dynamically.
  • We fixed an issue in React 18, where the year and multi-year views were not correctly removed from the markup after animation. This made the component unusable.
  • We fixed an issue on the date wheel, where the ‘D’ letter from the week day name was incorrectly replaced with the date number.
  • We fixed an issue with time validation, where some hours were not displayed as disabled in 24 hour format if the min/max options were also used.
  • We added the aria-hidden attribute on the calendar months that are out of view.
  • We fixed the value parsing which was not working in case of the 'preset-range' selection mode.

Eventcalendar

NEW

  • We added the onEventDragStart and onEventDragEnd lifecycle events which are triggered when an event is being dragged. This applies to both on-calendar events and external (to-be-created) events.

FIXED

  • We fixed an issue in React 18, where the year and multi-year views were not correctly removed from the markup after animation. This made the component unusable.

Scheduler

NEW

  • We added support for displaying the time tracks in multiple timezones at the same time. The timezones can be listed using the timezones property of the schedule object under the view option.
  • We added the onEventDragStart and onEventDragEnd lifecycle events which are triggered when an event is being dragged. This applies to both on-calendar events and external (to-be-created) events.

FIXED

  • We fixed the height of the events ending exactly at daylight saving time.
  • We fixed the navigate function to correctly scroll to the selected date horizontally if it’s out of view.
  • We fixed an issue in React 18, where the year and multi-year views were not correctly removed from the markup after animation. This made the component unusable.

Timeline

NEW

  • We added the year view type to the timeline, which can be used instead of type: 'month' and size: 12.
  • We added the onEventDragStart and onEventDragEnd lifecycle events which are triggered when an event is being dragged. This applies to both on-calendar events and external (to-be-created) events.

FIXED

  • We fixed the width of the events ending exactly at daylight saving time.
  • We fixed the sticky day/month/week labels which did not work after opening/collapsing resource groups or after changing the resources in Angular.
  • We fixed an issue in React 18, where the year and multi-year views were not correctly removed from the markup after animation. This made the component unusable.

For the full changelog please visit our release history.

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