New Release: Mobiscroll 5.11 & 5.11.1

Announcements
1

What’s New

I am excited to share the multi-month view for the date picker and event calendar. It enables multiple month views as a grid, quarter and year views that are super useful for rendering overviews of longer periods of time.

Multiple month, quarter and year views

We had multiple month support for the date picker before 5.11 where you could have a two month calendar for picking a date or a start/end range. Building an overview of the next six months or a full year with a nice grid layout was not possible before. With the new calendar type year and the size option for calendar type month it is now possible to render a two by three 6 month view, a three by three 9 month view or a three by four year view and so much more. Use it for summary views, quarter views, annual views, overviews of bookings, events and for whatever you can display on a calendar. See it in action for the date picker and the event calendar.

quarter-year-calendar
quarter-year-calendar3360×1892 1.57 MB

Quarter and year view

Select with empty state

NULL support is landing to the Mobiscroll select. This is an upgrade compared to the native option list where a value once selected cannot be cleared and empty states are not supported by browsers. Before, you had to add a dummy option with the text of “Please select …” but it never was an empty value. People were struggling with implementing null-values for some time now and we are happy to provide this starting with 5.11. The empty state support is seamless, you don’t have to turn on any option for this to work and there is no default value selected if not set otherwise.


Select empty state

Rental availability & booking

The new multi-month and year views enable new use-cases like a rental availability view for six months. We’ve built an interactive demo that renders 6 months at once and even lets you make a new selection by picking a start & end date. It shows variable pricing based on season, colors the months accordingly and renders already made bookings with distinctive check-in and check-out dates. Utilizing the recently released rangeEndInvalid option the selection is correctly validated respecting the general booking rules. See it in action with the full source code for Javascript, jQuery, Angular and React.


Rental availability and booking

What’s next

Built-in shift support for the event calendar timeline and finishing touches to the v5 select.

Read the full blog post

MOBISCROLL 5.11

Datepicker

NEW

  • We added multiple month and year view to the calendar and range picker. Enable it though the calendarType and calendarSize options. Use it to build quarterly views, 6 month views or full year views.
  • We have updated the styling of the week numbers.

FIXED

  • We fixed the rendering of the labels when outer days were not shown.

Eventcalendar

NEW

  • We improved on the rendering of the labels to indicate whether a label continues on the next week or in the next month.
  • We added multiple month and year view to the event calendar. Enable it though the calendar.type and calendar.size under the view option. Use it to build quarterly views, 6 month views or full year views.
  • We have updated the styling of the week numbers.

FIXED

  • We fixed the rendering of the labels when outer days were not shown.

Forms

FIXED

  • We fixed the floating labels to render correctly if the initial value is 0.
  • We fixed the textarea sizing, which was not working correctly in Angular on programatic value change.

Popup

FIXED

  • We fixed a quirky issue that happened in Safari. Whenever a picker was opened from within a popup the page got scrolled to top when closing the popup.

Scheduler

FIXED

  • We fixed scroll to time in React strict mode. This happened for development builds when calling the navigate function.
  • We fixed the rendering of events where no duration is added.

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.

Timeline

FIXED

  • We fixed scroll to time in React strict mode. This happened for development builds when calling the navigate function.
  • We fixed the display of events with no duration.
  • We added a minimum width to events. This fixes the rendering of events where no duration or a very short duration is added.

MOBISCROLL 5.11.1

All Components

FIXED

  • We fixed an issue which caused the React server side rendering to fail with the trial version.

Agenda

FIXED

  • We fixed the daily agenda rendering where events were not displayed on the day of daylight saving change.

Datepicker

FIXED

  • We fixed an issue where the initial calendar view was not updated if min or max was changed dynamically, and there was no selected value.

Forms

FIXED

  • We fixed an issue which caused the ‘Cannot flush updates when React is already rendering’ error in React, when a toast or snackbar was closing.

Popup

FIXED

  • We fixed an issue which caused the ‘Cannot flush updates when React is already rendering’ error in React, if the popup was not closed with a click (e.g. on element hover out, or automatic close with a timer).

Scheduler

FIXED

  • We fixed the view rendering to render the days from the same week if startDay and endDay was changed dynamically, e.g. changing from week to work week.
  • We fixed the firstDay and lastDay arguments of the onPageLoading , onPageLoaded and onPageChange events to based off of the rendered days rather than the entire week.
  • We fixed the ‘start-end’ validation that is triggered on drag & drop, to allow events starting right at an invalid range ending.
  • We fixed the drag & drop in RTL mode, which was not working correctly if there was horizontal scrolling in the view.
  • We fixed the scrolling during drag & drop, which was not working correctly in RTL mode.

Select

FIXED

  • We fixed an issue which caused the ‘Cannot update during an existing state transition’ error in React if picker was closed using keyboard (Enter or Esc).

Timeline

FIXED

  • We fixed and improved the scrolling performance of the header, which followed the horizontal movement of the timeline body with a visible latency.
  • We fixed an erratic behavior of the resource column that happened on iOS 14 and earlier versions of Safari.
  • We fixed the scroll to time functionality in RTL.
  • We fixed the view rendering to render the days from the same week if startDay and endDay was changed dynamically, e.g. changing from week to work week.
  • We fixed the firstDay and lastDay arguments of the onPageLoading , onPageLoaded and onPageChange events to based off of the rendered days rather than the entire week.
  • We fixed the ‘start-end’ validation that is triggered on drag & drop, to allow events starting right at an invalid range ending.
  • We fixed the event resize handle touch area on touch devices, so it’s easier to grab the resize handles of an event.
  • We fixed the scrolling during drag & drop, which was not working correctly in RTL mode.

For the full changelog please visit our release history.

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