Happy to announce Mobiscroll 5.8 with new components like the time grid for booking times, filtering for the v5 select and an event listing mode for the timeline. Besides these new features we are introducing calendar cell templating.

New time picker

The time grid is a new way of rendering time selection that we are adding to the date & time picker. This is an alternative to the time list which renders a scroller on mobile and multi-wheel dropdown on desktop. The main difference is how the available times are laid out in a grid format instead of a scrollable list. This is especially useful for appointment booking and in cases when users are picking form a set of predefined time-slots.

The time grid can be easily enabled in the datepicker from the controls option. Boosting the available controls to five: 'calendar' (calendar view with single, multiple or range selection), 'date' (date scroller & dropdown), 'time' (time scroller & dropdown), 'datetime' (a combination of date and time) and the new 'timegrid' (an alternative to time), you can play around with the time grid on the demo page.

Filtering for the select

The v5 select component receives the filtering feature that was already available in v4. This enables out of the box client side filtering that can be overridden for server-side filtering through the onFilter event. Check out this live example for local and remote filtering.

Calendar, event calendar and scheduler date cell templates

Templating is a key capability of the event calendar and date picker components. Following our product philosophy, that is about providing you the tools that help create the experience you are looking for versus bloat the components with all the bells and whistles that you might want to have, we are adding templating capabilities for the date picker calendar and event calendar cells plus for the date headers of the scheduler.

The date picker calendar cells can now be enhanced with colors, labels, marks or a fully custom template that make things like an iOS style fitness tracker possible.

The event calendar cells can be customized in a similar manner to the date picker cells.

The primary goal of any UI is to help their users make progress and complete task with as little effort as necessary, so contextual cues are key to a great user experience. With that in mind, the scheduler date headers are important elements not only to communicate the date and day, but also provide a great place for relevant information like milestones, key indicators, weather and so on.

Timeline event listing

We introduced the timeline in version 5.6 that solves a big problem when there are a lot of resources to be managed. These can be various assets like equipment, tools, people and so on. Since then the timeline received a number of updates and improvements though version 5.7 and the current release, 5.8.

A new feature that we added is a summary mode that can be enabled though the eventList property of the timeline. This view represents a daily summary rather than an hour-by-hour layout, similar to the event calendar where labels are printed under the appropriate day for the appropriate resource one after the other. The events have an exact height and the resource rows will expand automatically if more events are displayed than the minimum height.

Check out this demo for employee shift planning that utilizes the eventList feature.

What’s next

Stay tuned for grouping and hierarchy support for resources in the timeline view among other features and improvements.

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

Illustration by Ouch.pics.