New release: Mobiscroll 5.0 Beta 6

Announcements
1

What’s New

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.


8am to 5pm work scheduler with lunch break


Work calendar with disabled weekends and specific ranges

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.


Prevent overlapping and double booking

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 …


Mobiscroll Scheduler with iOS 14 theme


Mobiscroll Event calendar with iOS 14 theme


Mobiscroll Agenda with iOS 14 theme


Mobiscroll Calendar with iOS 14 theme


Mobiscroll Range picker with iOS 14 theme


Mobiscroll Time picker with iOS 14 theme

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.

1748×868 567 KB

New Mobiscroll Segmented with iOS14 theme

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.


New Mobiscroll Range picker UX

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.


Picker positioning on desktop

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.

1060×924 339 KB

Enable drag & drop on the website

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.

Read the full blog post

MOBISCROLL 5.0-beta6

All Components

FIXED

  • We fixed the onInit lifecycle event that was not being triggered.

Agenda

NEW

  • We updated the styling of the iOS theme to match iOS 14.

FIXED

  • We fixed an issue where the onPageChange and onPageLoading event were fired twice when changing views, and once with wrong arguments.

Datepicker

NEW

  • We updated the styling of the range labels.
  • We improved on picker positioning in desktop layout.
  • We added setTempVal and getTempVal methods to help in adding custom logic and behavior to the selection experience. This is especially useful for ‘hijacking’ the selection before it is submitted, like adding a ‘one-way’ mode to the range picker.
  • We added an onTempChange lifecycle event that can be used to customize the value picking experience.
  • We are introducing localized helper text for the start and end labels (visible for range pickers). They serve as a placeholder for empty states and can be overriden through the rangeStartHelp and rangeEndHelp options.
  • We added clear buttons to the range start/end labels to make clearing one or both easy for users.

FIXED

  • We improved on the range highlight of the proposed selection visible when hovering.
  • We fixed the hover effect on hidden days for the windows theme.
  • When selecting the range on a calendar, the automatic switching from start to end selection will only happen once the range is selected. Afterwards, to refine the range the labels can be used to switch the active selection.
  • We added missing property definitions to the Datepicker component, that fixed the AOT builds in Angular 8.
  • We fixed the disabled buttons click event in angular, so they won’t trigger when the buttons are disabled.
  • We fixed a bug in the minRange and maxRange options, so the selectable range is updated right away when they are changed dynamically.
  • Update the input floating labels when values are set.
  • When switching between the start and end date in the case of range selection, the calendar navigates to the already selected date.
  • We won’t disable the set button in case of the range selection, when switching between start-end selection requires the closing of the picker. For example, when there are no labels shown and the picker has distinct start and end inputs.

Eventcalendar

NEW

  • We updated the styling of the iOS theme to match iOS 14.
  • We added support for blocked out dates that don’t allow interaction through drag & drop and drag to create.

FIXED

  • We disabled drag & drop for calendars without labels.
  • We fixed an issue where the onPageChange and onPageLoading event were fired twice when changing views, and once with wrong arguments.
  • We fixed the firstDay and lastDay of the onPageChange , onPageLoading and onPageLoaded events in case of month view, to take into account the visible outer days as well.

Forms

FIXED

  • We fixed the input, textarea and dropdown components to keep the existing css classes on the orginal html element in case of jQuery / Javascript.
  • We fixed the dropdown component, which was throwing and error in Angular 10.

Scheduler

NEW

  • We updated the styling of the iOS theme to match iOS 14.
  • We added support for blocked out dates that don’t allow interaction through drag & drop and drag to create.

FIXED

  • We fixed the drag & drop for all day events for jQuery and javascript, where extra copies of the dragged event were appearing.
  • We fixed the event time calculations for the drag & drop of recurring events.
  • We fixed the event and oldEvent arguments of the onEventUpdate and onEventUpdated events.
  • We fixed an issue where the onPageChange and onPageLoading event were fired twice when changing views, and once with wrong arguments.

Segmented

NEW

  • The iOS theme received the makeover consistent with and ready for iOS14. It consists of a brand new styling, drag interaction, and zoom animation.

For the full changelog please visit our release history. The beta is available to customers with and active Event Calendar or Framework and Complete license. Get in touch if you are interested.

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

Download the latest version now