New Release: Mobiscroll 5.10 & 5.10.1

Announcements
1

What’s New

We are adding week selection to the date picker, better validation and tooling for accommodation booking, work hours to the timeline view and a meal planner demo using the event listing mode of the timeline. Besides these new features, bugfixes we are shipping UX improvements, like printing the month in the cell of the first day of the event calendar. We’ve also improved the accessibility of the select component by adding keyboard support to single and multiple selection.

Week selection in the date picker

We are introducing a new range selection mode to the date picker that can be turned on through select: 'preset-range' . Pick a range with predefined parameters:

  • fixed day of the selection from Monday to Sunday is set in the firstSelectDay option.
  • fixed length set in the selectSize option.

While it is not only limited to week selection, 'preset-range' enables the selection of a predefined range in terms of what day of the week its first day falls on and it’s length. Play around with the preset range selection.

Week selection

Advanced validation for accommodation booking

When booking an Airbnb or a house for your next vacation you will need to pick a check-in and a check-out date. The basic rules are that a check-in date needs to happen on an available date, while the check-out date can happen on the first day of the upcoming booking. This requires dynamically changing the invalid of the first day of the next booking when a check-out date is being picked. This is a pretty unique ruleset not easily found in other start-end selection scenarios.

We are solving this by adding a couple of tools to the arsenal. With the onActiveDateChange and rangeEndInvalid we are giving options to developers to build booking experiences that make sense. The rangeEndInvalid option lets people select disabled dates as endDate when booking accommodation, but doesn’t allow the startDate to fall on an already booked date. This is a boolean that you can turn on/off through the option.

For even more customization the onActiveDateChange lifecycle event can be used that is triggered when start/end selection is cycled. Give it a go and see how it works.

Accommodation booking with advanced validation

Setting up work hours in the timeline

The timeline view is useful for managing a lot of resources. It renders horizontally scrollable rows per resource and depending on the scale (hourly, daily) and the length (for a day, week or month) these rows can get long.

We are adding start and end time support to the timeline view which lets you specify the range that is needed. Eg. for a work calendar you might only be interested in a time range from 7am to 7pm. The startTime and endTime is applied to all days in a recurring manner. Give it a try and see what other configuration options are available.

Work hours with timeline view

Weekly meal planner

We’ve built another interactive demo that utilizes the event listing mode of the timeline . The weakly meal planner grid offers an overview of meals across all days of the week, grouped by meal types. The meal types (Breakfast, Elevenses …) are added as resources and the actual meals are events. A simple add/edit screen is implemented which can be further customized as needed. A new meal can be added by double clicking/tapping in the appropriate cells. Give this demo a go and let us know what you think.

Meal planner

What’s next

Multi-month and yearly calendars are coming!

Read the full blog post

MOBISCROLL 5.10

Agenda

FIXED

  • We fixed the date format on the day headers which was incorrect for the following locales: ar - Arabic, bg - Bulgarian, fa - Farsi, fr - French, he - Hebrew, hi - Hindi, it - Italian, ja - Japanese, ko - Korean, lt - Lithuanian, nl - Dutch, sr - Serbian, th - Thai, zh - Chinese.
  • We fixed the date header of the day view agenda, if multiple days are displayed.

Datepicker

NEW

  • We added preset range selection. It can be enabled with select: 'preset-range'. Use it for single or multiple week selection by configuring the firstSelectDay (from Mon-Sun) and selectSize (number of days eg. 3 for three days, 7 for a week or 14 for two weeks).
  • We added the onActiveDateChange lifecycle event that is triggered when the start/end selection is being cycled in case of range selection. It is useful when building a custom validation logic and other advanced interactions.
  • We added the rangeEndInvalid option that lets users pick an end date on the first disabled date occurring after the start date of the range. This is useful for accommodation booking where the check out date can happen on a day that is already occupied.

FIXED

  • We fixed some issues regarding IE11 compatibility in the timegrid control.
  • We fixed a bug that caused the datepicker to change the time part of the selection to the default value when using the calendar and time scroller and setting a temporary value prior to selection.

Eventcalendar

NEW

  • We added the name of the month to the first day cell to improve navigation. This UX improvement helps users derive the selected month at a glance.

Scheduler

FIXED

  • We added the possibility to set the resource of a new event using the extendDefaultEvent option.
  • We fixed the navigate method to always scroll to the given date and time.

Select

NEW

  • We added better keyboard support for single and multiple selection. You can now navigate the wheel with the arrow keys and select options with space and enter keys.

FIXED

  • We fixed the placeholer in the Javascript and jQuery versions.
  • We added the missing inline options for the filterPlaceholderText and the filterEmptyText in angular.

Timeline

NEW

  • We added start/end time support to the timeline view for setting recurring start and end times. Ranges outside the start and end times will not be generated.
  • We improved the scrolling experience of the timeline view and enabled scrolling on the resource list.

FIXED

  • We added the possibility to set the resource of a new event using the extendDefaultEvent option.
  • We fixed the initial height of the resource row in event listing mode.
  • We fixed the navigate method to always scroll to the given date and time.

MOBISCROLL 5.10.1

Agenda

FIXED

  • We fixed an issue with the recurring events from and until dates, where timezone was not handled correctly.
  • We fixed the ordering of all-day events to take into account the time as well, if specified.

Datepicker

FIXED

  • We fixed the hovered date styling for range picking, which did not work, if on start date selection the hovered date was after end, or on end date selection the hovered date was before start.

Eventcalendar

FIXED

  • We fixed an issue with the recurring events from and until dates, where timezone was not handled correctly.
  • We fixed the ordering of all-day events to take into account the time as well, if specified.

Scheduler

FIXED

  • We fixed the external drop to set the resource correctly on the created event.
  • We fixed an issue with the recurring events from and until dates, where timezone was not handled correctly.
  • We fixed the ordering of all-day events to take into account the time as well, if specified.

Timeline

FIXED

  • We fixed an issue which caused an AOT build error in Angular 4.
  • We fixed the external drop to set the resource correctly on the created event.
  • We fixed an issue with the recurring events from and until dates, where timezone was not handled correctly.
  • We fixed the ordering of all-day events to take into account the time as well, if specified.

For the full changelog please visit our release history.

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