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.

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.

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.

What’s next

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

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

Illustration(s) from absurd.design.