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.

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.

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.

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.

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!

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

Illustration by Icons 8 from Ouch!