While preparing for the end of the year and the final release of Mobiscroll 5 we are proud to introduce the sixth beta of v5. We fixed a bunch of bugs, implemented a number of improvements and introduced a couple of new things. Updates for iOS 14 , blocked dates & times for the event calendar and a new segmented styling are some of the highlights.

Managing event overlaps and setting up work calendars

With the addition of invalid date & time ranges you can now configure work weeks, calendars and schedulers. Disabling weekends, setting up launch breaks and configuring the start and end of a workday is simple and easy to understand.

With the help of two new events: onEventCreate and onEventUpdate you can now check, prevent and manage double booking times or event overlaps. These lifecycle events are fired whenever a new or existing event is moved or created by drag & drop. You can cancel the action, let users know and provide alternatives.

An updated styling ready for iOS 14 and getting closer to Big Sur

Apple has been busy with their UI updates lately. iOS 14 was released in the past couple of weeks while macOS 11 hit the shelves in the past couple days. With the latest updates it is obvious that they are in the process of unifying the two design languages. Besides rounded corners there are other changes like the usage of heavier fonts, bigger spacing in headers, unified card layout design …

We are pretty pleased with how the update iOS theme turned out for Mobiscroll. Updates have trickled down to the event calendar, agenda, scheduler and the picker components.

New segmented components

Along with the iOS 14 updates we moved the segmented component into 2020. It received the updated look & functionality that was introduced in iOS 13. Drag support, zoom animations, plus it’s customizable.

Improved range picker

The new range pickers was launched as part of date & time in the fourth beta. While it had welcome improvements compared to v4 we felt that there was still work to do, so we went back and explored a number of use-case where a date and/or time range selection happens:

• Flight booking
• Booking accommodation
• Booking resources, like an electric scooter or renting a car
• Scheduling and setting up events in a calendar

Basically everywhere where a “from” and “until” or an “outbound” and “return” is needed. After this research we sat down, debated and made a couple of tough choices on how to handle the various scenarios without sacrificing simplicity and adding bloat. There were a bunch of refinements and possibly the most notable is the usage of the segmented control for the fully customizable start and end labels, with the addition of clear buttons that simplify correcting dates.

Improved desktop layout for pickers

We refined how the date pickers show up when desktop layout is enabled. Instead of centering the modal to the middle of the input we are always aligning them to the left of the input (and the right when RTL is enabled). This is a more unified and cleaner approach compared to how it looked before.

Experiment with drag & drop on the demo page

We added control over the drag & drop features to the event calendar and scheduler demos. This way you can easily turn it on/off and play with the different examples. Please note that some demos have it always enabled.

Using Mobiscroll 4 along with v5

Maybe one of the most recurring questions these past weeks was wether if it’s possible to use Mobiscroll 4 components with Mobiscroll 5? The short answer is yes, the long answer can be seen in this article on how to approach v4 + v5 components. With the gradual and conditional conversion of v4 components to v5 there are solutions and we are ready to help if you bump into any issues.

What’s next?

End of 2020 is almost upon us and the plan remains the same as before. We are working hard on getting the final version in your hands as soon as possible. Until then give the new beta a go and let us know what you think.