New Release: Mobiscroll 5.26 & 5.26.1

Announcements
1

What’s New

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.


Hour templating

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


Timeline day templating

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.


Timeline week templating

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


Timeline month templating

Annual resolution is covered by the renderYear and renderYearFooter options.


Timeline month templating

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.


Conditional drag and drop

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.


Unscheduling events

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.


Dragging events between timelines

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.


Doctor’s appointment

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.

Read the full blog post

MOBISCROLL 5.26

All Components

FIXED

  • We fixed a bug in the recurring rule parsing logic that disregarded the until dates time part.

Agenda

NEW

  • We are adding templating to the agenda empty view through the renderAgendaEmpty function (React/jQuery/Javascript), agendaEmptyTemplate (Angular) and agendaEmpty slot (Vue).

FIXED

  • We fixed the scroll to day feature which was not working correctly after changing the view in Angular.

Datepicker

FIXED

  • We fixed the calendar cell layout with week numbers displayed.
  • We fixed an error which was thrown when opening animation was set to false .
  • We added missing props to the Vue component: calendarType , calendarScroll , pages , showOuterDays , showWeekNumbers .

Dropcontainer

NEW

  • We added a new Dropcontainer component that can be used to drop events dragged out from an event calendar.

Eventcalendar

NEW

  • We added the dragInTime option for fine grain control over the allowed drag & drop interactions.
  • We added the resize and dragI`nTime properties to the events to control the allowed drag & drop interactions on individual events.
  • We added the externalDrag option that enables events to be dragged out from the calendar and dropped onto another calendar or any dropcontainer.

Forms

FIXED

  • We fixed the disabled option of the Angular checkbox component to accept boolean values instead of strings.

Popup

FIXED

  • We fixed an error which was thrown when opening animation was set to false .

Scheduler

NEW

  • We added the dragInTime and dragBetweenResources options for fine-tuning the allowed drag & drop interactions.
  • We added the resize , dragInTime and dragBetweenResources properties to the events to control the allowed drag & drop interactions on individual events.
  • We added the eventResize , eventDragInTime and eventDragBetweenResources properties to the resources to control allowed drag & drop interactions on a resource basis.
  • We added the externalDrag option that enables events to be dragged out from the scheduler and dropped onto another instance or any dropcontainer.

Select

FIXED

  • We fixed the display of disabled items after dynamically updating the invalid option.
  • We fixed the filter option which was not working in Vue.
  • We fixed the v-model value binding for Vue.

Timeline

NEW

  • We added the dragInTime and dragBetweenResources options for fine-tuning the allowed drag & drop interactions.
  • We added the resize , dragInTime and dragBetweenResources properties to the events to control the allowed drag & drop interactions on individual events.
  • We added the eventResize , eventDragInTime and eventDragBetweenResources properties to the resources to control allowed drag & drop interactions on a resource basis.
  • We added the renderHour / renderHourFooter and hourTemplate / hourFooterTemplate options for custom time content rendering in the timeline header and footer.
  • We added the renderWeek / renderWeekFooter and weekTemplate / weekFooterTemplate options for custom week content rendering in the timeline header and footer.
  • We added the renderMonth / renderMonthFooter and monthTemplate / monthFooterTemplate options for custom month content rendering in the timeline header and footer.
  • We added the renderYear / renderYearFooter and yearTemplate / yearFooterTemplate options for custom year content rendering in the timeline header and footer.
  • We added the externalDrag option that enables events to be dragged out from the timeline and dropped onto another instance or any dropcontainer.

FIXED

  • We fixed the display of event connections in Vue.

MOBISCROLL 5.26.1

Eventcalendar

FIXED

  • We fixed the external drag which was not working correctly on the calendar view.

For the full changelog please visit our release history.

PS. You will find an upgrade guide for moving from Mobiscroll 4 to Mobiscroll 5.