Happy to introduce the public beta of Mobiscroll for Vue, quarter resolution to the timeline view, along with easier validation control, new event connection types, and drag & drop improvements.

Mobiscroll for Vue

The public beta is out for a couple of weeks now, all v5 demos are available for the Vue version and a new documentation is implemented. The beta label is coming off shortly as well.

Avoid double booking

When it comes to scheduling resources, overlapping events are not allowed in a lot of cases. More than just one event happening at the same time is still a thing and we not removing that, but we are introducing the eventOverlap option that is applicable to the instance, resources or individual events. 

Prior to having this option it was necessary to rely on the onEventCreate and onEventUpdate lifecycle events and manually check and handle the overlap there.

Play around with this example to understand how you can control overlap validation or check out this great example for making doctor’s appointments.

Timeline event connections

We had event connection for some time now – since they were introduced in version 5.19, with some limitations. We only supported finish-to-start connections which went from the end of one event and connected to the beginning of another event.

We are introducing four connection types: finish-to-start, start-to-finish, start-to-start and finish-to-finish.

Check out how you can control the event connections in this example.

Timeline Q1, Q2, Q3, Q4

We are adding horizontal quarter resolution to the timeline view. Use it for dividing the view into quarters.

Templating of the quarter header and footers is new as well and comes with this release.

Check out how to customize the header and footer in case of any timeline resolution and learn how to configure quarter resolution for your view.

Drag & drop control and improvements

We have added dragInTime support for external events. In times of scheduled but unassigned events listed externally of the calendar might be already fixed. When assigning such events it is better to just fix them in time in the calendar and let users only move them between resources rather than retroactively modifying them.

Time slots inherited the same drag & drop controls that the resources have. This means if eventDragBetweenSlots is true, the events won’t be draggable between time slots. Eg. if someone wants for move an assignment and keep it in a specific shift, they can do that now without the need to write a custom validation logic in the lifecycle events.

Agenda empty state

The empty state template was introduced in version 5.26. Being able to create a custom template/render function for the views that don’t have events is useful for showing CTAs, images and text.

Check out this example and customize the agenda empty state through the renderAgendaEmpty and the agendaEmptyTemplate.

What’s next

We are working on a couple of powerful features, like being able to fix certain rows at the top of the timeline, better control over handling many overlapping events along with new tools for a nice zoom feature.

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