New Release: Mobiscroll 5.9 & 5.9.1

Announcements
1

What’s New

We are shipping hierarchy support for the timeline view. Besides this the v5 select is getting group option support plus improvements to the schedulers colored ranges are enabling entirely new use cases.

Timeline hierarchy and grouping

The timeline view of the event calendar provides a great solution when a lot of resources need to be scheduled. With a list of assets and a corresponding timeline everything is straight forward right until there are so many resources that some grouping and organizing is necessary. As a solution we are adding hierarchical grouping to the resources where each parent is a resource in itself. These hierarchies can be of variable depth and are collapsible. Check out this work order scheduling demo that is fully benefiting from the hierarchy support.


Timeline hierarchy and grouping

Two new helper methods for the event calendar

The event data and invalids can be easily accessed through their options. That data though is the actual raw data with recurrence rules, exceptions and single occurrence events. There are times when decisions need to be made based on the actual occurrence of the events, like collision detection or other complex business rules. Behind the scenes the event calendar evaluates the recurrence rules in order to print the event to the screen but that is not easily accessible from the outside. With the two new methods getEvents and getInvalids we are giving the tools in the hands of the developers so that they can easily query the processed event and invalid data.

Titles for colored ranges

We have introduced colored backgrounds and ranges in version 5.2. Since then we learned that a lot of times colored backgrounds are used to highlight specific time ranges eg. “on-site time”, “office time”, “deep work time” that have a meaning but the color is usually not enough. These are not actual events but are categories in someones schedule.
We are adding title/label support similarly to invalid ranges to help users understand the meaning of colored backgrounds, so for example In case of workforce management the event can be scheduled within the correct boundaries, like office work for when the person is at the office.


Colored backgrounds with labels

Group options for the select

We are adding more of the v4 features to the select component as time goes on. With 5.9 support for rendering group headers is landing while separate wheel rendering is not available yet, but will follow soon.


Group headers for the select

Date filtering with presets

A common use case for the range picker is filtering. This can be done with a simple picker, but there are times when specific ranges are usually what users are looking for. A great example is google analytics with common presets like Yesterday, Today, This week, This month. We made an interactive example for this use-case with a responsive UI that is great for both mobile and desktop.


Date filtering on desktop

We have used a combination of components including the popup, range and forms. It renders a dropdown for bigger screens and a modal with bottom display on small screens. Check out the example here.


Date filtering on smaller screen

Scheduling meetings across multiple timezones

In a more and more globalized world it is not uncommon that people from different timezones work together. And because a lot of teams are distributed setting up and synchronizing meetings across multiple timezones becomes a challenge.
Timezone support was added to the event calendar a couple of versions ago, however that didn’t solve the problem of having an overview for resource availability across different timezones. With the new colored background labels we were able to put a working example together that helps team leaders see the availability of their teammates and easily scheduler meetings. Give this example go and see how you can use the labels to show timezone offsets.


Meeting planner across timezones

What’s next

We are working on printer friendly support for the event calendar, start/end hours for the timeline view among other features and improvements.

Read the full blog post

MOBISCROLL 5.9

All Components

FIXED

  • We fixed the SCSS file generation, where the order of the rules was incorrect, causing style bugs when the SCSS file was used instead of the CSS.

Datepicker

FIXED

  • We fixed an issue in the datepicker, that allowed end times to be selected before the start time when selecting only time ranges.
  • We fixed a styling issue where the time scroller wheel was not expanded to full width in desktop mode.
  • We fixed a bug that caused the set button to remain disabled even though a value was selected. The problem occured when using the calendar and time controls and having the range labels hidden.
  • We fixed an issue, where the placeholder did not appear in case of tag input.

Eventcalendar

NEW

  • We added the getEvents method which will return the event data between a given range.
  • We added the getInvalids method which will return the invalid values between a given range.
  • We added the onEventHoverIn and onEventHoverOut lifecycle events, that enable the creation of custom actions when events are hovered.

Forms

FIXED

  • We fixed a styling issue, where the input text SCSS variable was not applied on the input label.

Scheduler

NEW

  • We added the title and textColor properties for the colors option to customize the title and the title color of the colored ranges.
  • We added the currentResource property for the event data object, which can be used to pass the resource object to the custom event template.
  • We added the getEvents method which will return the event data between a given range.
  • We added the getInvalids method which will return the invalid values between a given range.

Select

NEW

  • We added support for displaying group headers.

FIXED

  • We fixed an issue where the change events were not triggered when the select component was initialized on a select html element.
  • We fixed an issue, where the placeholder did not appear in case of tag input.

Timeline

NEW

  • We added grouping/hierarchy support for the resources. The resource object has two new properties the children property which holds the child resources and the collapsed property determining the collapsed state of the actual group.
  • We added the title and textColor properties to the colors option to customize the title and the text color of the colored ranges.
  • We added the currentResource property to the event data object passed to the custom event template, which holds the resource where the event is being rendered.

FIXED

  • We fixed the form component initialization inside the resource templates in jQuery and plain Javascript.
  • We fixed the target argument for the onEventCreated and onEventUpdated events, which was not set properly.
  • We fixed an issue, where in week or month view events started on the previous week or month were not displayed.
  • We fixed the rendering and drag & drop for all-day events.
  • We fixed the min and max options where the time part was not taken into account.

MOBISCROLL 5.9.1

Agenda

FIXED

  • We fixed an issue where the selected date on the calendar was changed when switching from month view to week view, when the agenda was displayed together with the calendar.

Datepicker

FIXED

  • We fixed an issue where the time parts of the selected date, which cannot be selected (e.g. seconds) was not set to 0.

Eventcalendar

FIXED

  • We fixed all-day events rendering when timezones are used. All-day events will ignore timezones, they will be displayed for the whole day in every timezone.

Scheduler

NEW

  • We added a space on the right (or left in RTL) of the events, so a new event can be created on the time slot where an event already exists.

FIXED

  • We fixed an issue where the dragged event remained faded when it was tapped on touch screen.
  • We fixed all-day events rendering when timezones are used. All-day events will ignore timezones, they will be displayed for the whole day in every timezone.

Timeline

FIXED

  • We fixed all-day events rendering when timezones are used. All-day events will ignore timezones, they will be displayed for the whole day in every timezone.
  • We fixed an issue where the dragged event remained faded when it was tapped on touch screen.
  • We fixed an issue where the colored range title did not appear when used with Angular.
  • We fixed an issue where the onEventHoverIn and onEventHoverOut events were not fired.
  • We fixed an issue where in case of external drop the event was always set to all-day.

For the full changelog please visit our release history.

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