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.

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.

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.

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

Photo by Jason Leung on Unsplash.