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.
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.
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.
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.
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.
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.
What’s next
Dynamic timeline row heights with multiple day/week/month views and print mode for the event calendar.
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 therenderItem
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
andresourceHeaderTemplate
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.