Happy to introduce updates and new features to the event calendar, agenda, date & time, and the Vue components along with accessibility fixes and additions.

Render events by the exact time

The primary job of the event calendar is to show events, while in combination with the agenda it can be used for navigation as well. Events can be rendered as labels or as a list in a pop-over. Label rendering has several different options ranging from controlling the number of labels all the way to templating, however, it always rendered the labels as full-width events filling the whole day cell of the calendar. With the latest version, we are introducing the eventDisplay property that can either be fill or exact where the latter will position and render the event according to its start and end times. This is super handy in situations where the start and end of an event is relevant in the context of the calendar view. A good example is a booking or reservation calendar with rendering that takes the actual check-in and check-out time into account.

Check how this interactive example of a reservation calendar shows booked days from various sources.

Show empty days in the agenda

The job of the Agenda view is to provide a list of events that are scheduled for a custom range, grouped by days. The list of events can be customized through templating and custom renderers, along with completely empty states for event creation however, day headers without events were not shown at all. Starting with 5.32 it is possible to enable empty day header rendering through the showEmptyDays property of the agenda configuration.

Explore the empty day option for the agenda.

Agenda day header templating

Along with the ability to show empty day headers within the agenda, with templating the headers it is now possible to not only show additional information besides the date but also to provide contextual actions like adding new events.

Check out how you can add a new event button to the agenda day headers.

Timeline drag & drop UX improvements

We have improved on the event drag & drop experience especially when resources are grouped and rendered as a hierarchy. For flat lists, moving events between resources is not a problem. Even if all resource groups are expanded, it’s easy to move an event to any resource. The problem occurs only in situations if someone wants to move an event to a resource that is hidden under a collapsed group. With the event picked up, if you hover over a group that has event creation turned off and is collapsed, the group will automatically expand after a couple of milliseconds.

See it in action and give things a try.

Typescript types to Vue props

Types landed for the Vue props, making the Vue version of Mobiscroll that much easier to use. This reduces development time errors and brings auto-suggest and built-in documentation right into your IDE.

Resource objects within lifecycle events

We have added the relevant resource objects and references to various lifecycle events if views where built-in resource management is supported. Events that are triggered for both the Scheduler and Timeline view now receive the resources as arguments which is useful in situations where you would be interested in where the event is coming from and going to or just simply the full resource object that the event is tied to. You won’t have to manually look up the resource based on an ID and in some cases write recursive functions to do it.

Various date & time bugfixes

The Date & time component received various fixes that piled up with time. These handle new issues and edge cases that present themselves to customers.

Accessibility fixes for the calendars

With every new iteration, we are making our components more accessible. Fixed some issues with VoiceOver and TalkBack and added some new aria labels where relevant.

Popup demos

Not lastly, we are happy to introduce the new demo page section for the popup. It should help you understand basic usage and also show examples of how it complements the event calendar and date picker components.

What’s next

We are preparing the last big release of the year with great features for resources, like reorder, drag & drop along with load on scroll, zoom, and more new capabilities for the timeline.

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