New Release: Mobiscroll 5.8 & 5.8.1

Announcements
1

What’s New

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.


Appointment booking with calendar & time grid

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.


Select with local & 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.


Calendar with iOS style fitness tracker

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.


Scheduler with custom date header template

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.


Employee shift planning

What’s next

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

Read the full blog post

MOBISCROLL 5.8

All Components

FIXED

  • We fixed the global display mode when set thorugh setOptions .

Agenda

FIXED

  • We fixed a bug between the agenda and version 2 of the luxon timezone library.

Datepicker

NEW

  • We introduced the minTime and maxTime options, that limit the time part of the selection in a recurring manner. Times before minTime and times after maxTime can’t be selected on the date picker’s time and time grid control. This is useful when limiting opening hours for example.
  • We added the renderDay and dayTemplate options for custom day cell rendering that can be used to customize the full content of the calendar cells.
  • We added the renderDayContent and dayContentTemplate options to improve on the customizability. These options will be helpful if you only want custom content and don’t want to bother with the basic look of the days.
  • We added the timegrid control that can be used for time selection as an alternative to the scroller and time list, especially useful for appointment booking.

Eventcalendar

NEW

  • We added the renderDay and dayTemplate options for custom day cell rendering that can be used to customize the full content of the event calendar cells.
  • We added the renderDayContent and dayContentTemplate options to improve on the customizability. These options will be helpful if you only want custom content and don’t want to bother with the basic look of the days.

FIXED

  • We fixed a bug between the event calendar and version 2 of the luxon timezone library.

Scheduler

NEW

  • We added the renderDay and dayTemplate options for custom day cell rendering that can be used to customize the headers of the scheduler time grid.
  • We added the renderDayContent and dayContentTemplate options to improve on the customizability. These options will be helpful if you only want custom content and don’t want to bother with the basic look of the days.

FIXED

  • We fixed a bug between the scheduler and version 2 of the luxon timezone library.

Select

NEW

  • We added support for filtering values making it easier to use with large datasets. Filtering can be turned on with the filter: true option. It renders a filter input above the values. The filterEmptyText and filterPlaceholderText is localized.

Timeline

NEW

  • We introduced event listing, that provides a summary for the timeline. Controlled thoguh the eventList property that is localted under the view configuration settings. This can be used to easily visualize shifts and daily workloads.

MOBISCROLL 5.8.1

Datepicker

FIXED

  • We fixed the invalid value styling on the date scroller wheels, which got broken in 5.7.0.
  • We fixed a styling issue, where the hidden outerdays background color was still shown when using the colors option.

Eventcalendar

FIXED

  • We fixed a styling issue, where the hidden outerdays background color was still shown when using the colors option.

Forms

FIXED

  • We fixed an issue that prevented the placeholder text to show up on the textarea component in Angular.

Timeline

FIXED

  • We fixed an issue, where the timezone options were not taken into account on the timeline view, when a timezone plugin was used.

For the full changelog please visit our release history.

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