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.

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.

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.

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.

What’s next

Multi-month and yearly calendars are coming!

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

Illustration by Ouch .pics.