I am happy to introduce 5.14 which addresses pain points in the event calendar and date pickers. The event calendar comes with new ways to render event labels, week numbers got introduced to the timeline, days can now be hidden in both the scheduler and timeline and the date picker inputs get keyboard typing support on desktop. Let’s dig in.

Accommodate any number of labels in the event calendar

Event calendars are part of our lives in both a personal and work context. These calendars should not just be pretty, but improve our lives and help us solve tasks faster, make better progress. A pretty common question arose in data heavy use-cases: how to see all events without the need to click on a “show more…” button. Due to how the calendar view was laid out, there was no easy solution. It was possible to increase the height of the calendar so that every row grew equally.

This had a couple of drawbacks:

• What is the max number of events we need to support? How do we know it, what if it changes? – Turns out it’s never a fixed number.
• What happens if only some days have a lot of events and others don’t? – There will be a lot of unused space in some of the calendar rows.

We solved this design problem by adding variable row height support. This lets you set up the labels property under the view.calendar option to render all labels or render up to a specific number of labels. The rows of the calendar will be of variable height and it will use as much of the available space as possible. Besides this new feature you are still able to have equal row heights if necessary.

Play around with this live example and see it for yourself.

Week numbers in the timeline

Week numbers can now be shown out of the box in the timeline view of the event calendar. Enable it through the weekNumbers property of the view.timeline option.

See how week numbers are rendered in this live example.

Work week, hidden days in the timeline and scheduler

Hiding weekends is useful in a lot of calendaring scenarios. Most businesses don’t operate on weekends so hiding Saturdays and Sundays makes the calendar more focused. This was possible for single week views, but was not an option for continuous, multi-day, multi-week, month or year views. Specific days, like weekends can still be disabled and greyed out, but starting with 5.14 you can set a startDay and endDay that repeats every week and defines which days are visible.

View, try and download this live example.

Monthly schedule

We are introducing month views to the scheduler. This supports resources, start-end dates and everything that you’d expect and know from day and week views.

Check out this live example of a monthly scheduler.

Typing dates

One question that we heard over and over again is how to let people type into the date picker? Sometimes typing in a date is much faster than picking a value from either a dropdown or a calendar. The problem was that whenever someone clicked on an input, the picker opened and the input became read-only. Starting with 5.14, we removed this constraint for the desktop date pickers that enables typing into the input. We encourage letting people know what the expected format is, but basic parsing happens behind the scenes so that the date can be read into the picker and validated against the min/max & invalid/valid rules.

Check out any of the date picker examples.

What’s next?

We have a couple of new tools, integration plugins with third party calendars in store for you. Integrating and syncing with Google calendar and Outlook calendars will be available out of the box. We are also looking into performance improvements in data-heavy use-cases like working with hundreds of resources over longer periods of time.

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

Illustration by Icons 8 from Ouch!