Happy to introduce a packed 5.26 with new features and improvements. We are adding more customization capabilities to the timeline view with templating headers and footers. Drag & drop has been enhanced by introducing fine-grain control over the interactions on an event, resource and instance level, along with new drag and drop features that allow events to be dragged between instances and from a calendar to a placeholder container.

Templating timeline header and footer across different resolutions

Templating or custom render functions are an important piece of the puzzle when it comes to customization. You will want to almost always use some kind of templating, wether if it’s just the events, resources or things like headers and footers of the timeline columns. Templating allows you to alter the default look and feel and show any custom field that is relevant to your use-case.

We are adding renderHour and renderHourFooter for customizing hourly and sub-hourly headers and footers. The same template can be used if your columns go below the hour.

The renderDay and renderDayFooter options were there before, so in the same way as before this controls the day resolution headers and footers.

If you are setting weekly resolution or if you have week numbers displayed, the renderWeek and renderWeekFooter options will help in customizing the content and format.

In case of month headers or monthly resolution, the renderMonth and renderMonthFooter options are there for templating.

Annual resolution is covered by the renderYear and renderYearFooter options.

Take a look at this example where you can see every header and footer template in action.

Control event drag & drop interaction

Creating, resizing and moving events around are all core features of the event calendar. While it was and still is possible to enable or disable clickToCreate, dragToCreate, dragToMove and dragToResize on an instance level, now we are adding dragInTime and dragBetweenResources to limit the allowed actions on events.

Besides these two instance level options, the eventDragInTime, eventDragBetweenResources and eventResize locks all underlying events in time, to the resource and blocks the resize interaction. To learn more about the other properties of the resource, take a look at this example.

On the event level it’s three new properties: dragInTime, dragBetweenResources and resize, that allow the same control on an event to event basis. You can check out all the properties of the event object. 

Take a look at how this works in the calendar view, scheduler and timeline.

Unscheduling by dragging events out of a calendar

External drag & drop was introduced in version 5.2. That made it possible to drag events from an external container or list onto the calendar. This is a pretty common interaction for scheduling different appointments, jobs, events. In some cases unscheduling jobs is also a necessary and very helpful action. In those situations the users will want to move the events back to a staging area or back to the same list of unscheduled events.

With the help of the new dropcontainer component that can be initialized on any container that is to expect events dragged from a Mobiscroll event calendar, it is now possible to unschedule by dragging events out and dropping them some place else. 

While picking up the events and moving them around, new lifecycle events like onEventDragEnter, onEventDragLeave, onItemDragEnter, onItemDragLeave and onItemDrop are triggered so that things like highlighting drop targets or any custom logic can be executed during the action.

Take a look at these new interactions on the calendar and scheduler views.

Dragging events between calendars

In most situations the real-life workflows can be modeled with the help of a single event calendar instance, may that be a timeline, scheduler or simply a month view. There are situations however that might require multiple instances for a great user experience and adding to that, events should be movable between those instances.

We are introducing drag & drop between separate calendar instances. This opens up doors for more complex views, like two synchronized timelines for supporting advanced scheduling workflows.

It is just a matter of turning externalDrag and externalDrop on for the instances in question.

Just in the same way as for moving events back to a placeholder the appropriate lifecycle events will be triggered that can be used to fine-tune the UX.

Give this a try on the calendar view, scheduler or timeline. 

Doctor’s appointment use-case

Appointments can be booked then scheduled, unscheduled and maybe events moved between doctors in case of emergencies. In this use-case demo we are focusing on dragging booked appointments with set variables, like intervention type, length … to a scheduler from a list of booked appointments and then back to the list to put them in a pending/unscheduled state. Past or ongoing appointments are locked in place and all other events can be moved between resources as well.

Take a look at the demo in action.

Updates to the Vue Beta

Fixes and improvements land for the Vue version of Mobiscroll. With the private beta moving along we are steadily making progress towards the public beta.

What’s next

We are making progress with Mobiscroll for Vue. Besides chewing through the demos along with the documentation, the next step for the Vue version is a public beta.

New features like built-in control over event overlaps, timeline quarter resolution and other useful tools are in the pipeline as well.

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