New Release: Mobiscroll 5.12 & 5.12.1

What’s New

Happy to introduce the latest release where the new select component is getting all v4 features and then some. The recently launched timeline view of the event calendar is getting great adoption and receives a number of refinements along with new features like work shift support.

Select component with templating

The select is an easy solution for rendering a dropdown on desktop and scroller on mobile. You can initialize it on any HTML select or pass a list of items though the data option. With this release we have taken the idea that we started in v4 of being able to add HTML instead of text as items and pushed it further. Going forward you can set up custom templates and render functions in a similar manner how templating works across Mobiscroll. This enables a wide range of new use-cases for the select component.


Select item templating

A dropdown with image support

With the new templating capability we are providing a solution for image, image & text pickers. This was a stand-alone component in v4 but now becomes part of the v5 select. It makes working and switching to/from a text-only picker to a picker with custom content so much easier. This also means that features, like multiple select, filtering, group options … can now be used with “image & text” pickers.


Select with image support

Group wheels added to the select

Group option support was added a couple of releases ago. We are adding the showGroupWheel option that renders a separate wheel providing quick access to the different groups. Selecting an item in the group wheel scrolls the option list to the appropriate position. This is especially useful if you are working with long lists.


Select with group options and separate group wheel

Supporting shifts in the event calendar timeline

The timeline view has many work-related use-cases, it makes scheduling and managing multiple resources easy. In a lot of industries like healthcare, hospitality, manufacturing, telecom, military, emergency services … placing employees into shifts is a common practice.

With the introduction of slots we are providing the tools to set up and configure shifts. These are rendered under the days, instead of the individual hours and they provide a secondary dimension on top resources. Slots can have a custom data structure besides their base fields and they support templating. Make your shift headers show all the relevant information, counts, fill level and render any custom content.


Employee shift planning

Improving the overall usability of the timeline

As the adoption of the timeline view grows we are shipping more improvements and refinements to make the user experience better and help developers deliver on their projects. One of the new improvements we added is the sticky rendering of the event labels. When events are scrolled out of view, we are keeping the event title and times visible for as long as possible. This is a small thing, but it always shows users the essentials rather than have them scroll back to the beginning of the label.


Timeline with sticky labels

Another feature we added is the templating capability of the empty space above the resource list. This unused but valuable screen real estate provides a great opportunity for showing headers or even filtering through the resourceHeaderTemplate and renderResourceHeader methods.


Resource header templating

Country picker with filtering

With the new item templating capability married with filtering we are shipping a new interactive demo for a country picker. Use it in your event forms or as a stand-alone component in any HTML form.


Country picker with flags and filtering

Restaurant shift management

As shift support landed through the slots feature, one of the most common applications of work shifts is in the hospitality industry. Managing restaurants is not easy, so we have built a small example with a couple of nice features, like multiple shifts per day (Night, Breakfast, Lunch, Dinner, After hours), grouped resources for employees (Baristas, Bartenders, Chefs, Cleaners, Cooks, Hosts, Managers, Servers and Sommeliers), switching between week and day views, filtering for shifts and dynamic shift summaries.


Restaurant shift management

What’s next

Dynamic timeline row heights with multiple day/week/month views and print mode for the event calendar.

Read the full blog post

MOBISCROLL 5.12

Datepicker

FIXED

  • We fixed the calendar swipe, which was not working in RTL mode (regression introduced in v5.8.0).
  • We fixed an issue in the mobile scroller, where the value was not set through the Set button, if the wheels were not moved before.

Eventcalendar

FIXED

  • We fixed the calendar swipe, which was not working in RTL mode (regression introduced in v5.8.0).
  • We fixed the calendar next page navigation in Angular, which failed if the first day of the next month was selected on the view.

Scheduler

NEW

  • We improved the event label rendering to remain sticky on scrolling. This improves the overall UX of the scheduler.

FIXED

  • We fixed recurring events, where sometimes an occurrence did not appear on the first or last day of the view.
  • We fixed the external drop to prevent overwriting the drag event data when extendDefaultEvent is also used.

Select

NEW

  • We added item templating support that enables custom styled content and markup inside the select items. Using the itemTemplate or the renderItem options, depending on which framework you use, you can render any component/element inside the wheels of the select.
  • We introduced the group wheel for selects with grouping. Using the showGroupWheel option, the group wheel is rendered containing the labels of the groups to improve navigation in case of long lists.

FIXED

  • We fixed the onFilter event. Returning false will now correctly prevent the built in filtering.
  • We fixed an issue that prevented value selection on desktop when clicking on items selected through defaults.

Timeline

NEW

  • We added templating support for the empty cell above the resource column through the renderResourceHeader and resourceHeaderTemplate options
  • We improved the event label rendering to remain sticky on scrolling. This improves the overall UX of the timeline.
  • We introduced a new a horizontal level daily grouping feature called slots . This can be used instead of the continuous timeline for custom time slots and work shifts.

FIXED

  • We fixed recurring events, where sometimes an occurrence did not appear on the first or last day of the view.
  • We fixed the external drop to prevent overwriting the drag event data when extendDefaultEvent is also used.
  • We fixed the navigation logic of the year/month selector from the header to always scroll to the first day of the selected month.

MOBISCROLL 5.12.1

Datepicker

FIXED

  • We fixed an issue, where the Set button disabled state was not updated on range end date selection in Angular.

Scheduler

FIXED

  • We fixed the display of all-day events in case of resources grouped by date.
  • We fixed the positioning of the overlapping events in RTL mode, Angular.
  • We fixed the text overflow for short events in Safari.
  • We fixed the event resize when resources were used in group by date mode.

Timeline

FIXED

  • We fixed the display of colored and invalid ranges spanning across multiple days, which appeared only on the first day, when used together with slots.
  • We fixed the display of the dragged event spanning across multiple days, which appeared only on the first day, when used together with slots.
  • We fixed an issue where in listing mode, events created with click were spanning across 2 days.

For the full changelog please visit our release history.

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