New Release: Mobiscroll 5.31 & 5.31.1 & 5.31.2

Announcements
1

What’s New

Launching empty resource list template, better control over event ordering, performance update for the timeline view along with resource search & filtering and managing shifts and tasks within the same view.

Variable event heights

Custom event ordering was already available for the Agenda and Calendar views by writing a custom sort function. This release enables the same thing for the Timeline and Scheduler views as well.

Besides that, we’ve made it even simpler, through the order property of the event data, which is used to order the events without the need of a custom sort function.

Check out how you can make this work for the calendar view, agenda, scheduler and timeline.


Event ordering available for all event calendar views

Performance update: timeline virtual scroll improvements

The release includes a major refactor of the virtual scroll in the Timeline view. This improves the performance during scroll by loading the markup in smaller batches (rows, columns), instead of full pages.

The horizontal virtual scroll now supports batches smaller than a day, so scrolling is now smooth with large resolution views, such as 5 minutes steps, or event 1 minute steps.

The refactor also solved a number of long existing bugs, related to dynamic view changes.

Templating for new elements

Templating, custom render functions and slots are important tools for customizing the views and UX you are going for. With the addition of an empty resource template, you can use it to show any custom message in case there are no resources added to the calendar and provide means to reset filters, reload data or add resources.

With the new implementation the resource column will disappear only if the resources option is not specified at all. When an empty array is passed, an empty resource column will be displayed, which can be customized using the renderResourceEmpty function in React, jQuery and JavaScript, the resourceEmptyTemplate option in Angular and the resourceEmpty slot in Vue.


Templating the empty resource container

Resource filtering & search

Searching events is very useful in a lot of use-cases, however in situations where work is performed across a lot of resources or decisions have to be made quickly based on allocated tasks… filtering and searching for resources is key.

Either remote or local search and/or filtering was possible before by adding the controls and UI for it to any of the templates (eg. event calendar header, resource header) or handling it externally, but with the addition of the resource empty template you can show custom messaging, call to action for resource creation, data reload/sync button or even filter reset functionality.

Check out the fully functional demo we have put together with resource search and filtering capability.

https://demo.mobiscroll.com/timeline/resource-filtering-searchhttps://mcusercontent.com/03c1c3fac1ec96e655be9d223/images/c620a359-4a33-0c4d-3082-43a9087ee454.gif(image larger than 4 MB)

Resource filtering and search within the timeline view

Visualize task & shifts within the same timeline view

With the recent additions of variable event heights and the new, simple event ordering capabilities, it is possible to create views that can deal with different types of events that are related to each other, at the same time.

We can now nicely render shifts along with underlying tasks that are to be completed within those shifts all with dynamic validation that takes care of preventing overlaps, tasks sticking out of shift hours and everything that you might need to avoid scheduling problems.

Make sure to check out the new use-case demo that we published.

https://demo.mobiscroll.com/timeline/tasks-subtasks-under-shiftshttps://mcusercontent.com/03c1c3fac1ec96e655be9d223/images/45edd317-35da-6162-73f9-778a6ff4d432.gif(image larger than 4 MB)

Working with shifts and tasks at the same time

What’s next

We are working on a new label rendering mode for the calendar view, improvements to the agenda and other resource management related features.

Read the full blog post

MOBISCROLL 5.31

All Components

FIXED
  • We added the version field to the package.json file of the esm5 folder inside the npm packages, required by some bundlers, e.g. webpack with federated modules.

Agenda

NEW
  • We added the order property to event data, to easily customize the order of the events.

Datepicker

FIXED
  • We fixed the French translation of the rangeStartLabel option.
  • We fixed an issue where the onPageLoaded event was not fired after page change, with yearly or multiple month picker.

Eventcalendar

NEW
  • We added the order property to event data, to easily customize the order of the events.
FIXED
  • We fixed an issue where passing an event handler to the onInit lifecycle event threw an ExpressionChangedAfterItHasBeenCheckedError exception.
  • We fixed an issue where the onPageLoaded event was not fired after page change, with yearly or multiple month view.

Scheduler

NEW
  • We added the order property to event data, to easily customize the order of the events.
  • We added the eventOrder option to the scheduler view as well.
  • We pass the day paramater to the resource template, when resources are displayed grouped by date.
FIXED
  • We fixed an issue where dragging events from the “more” popup resulted in error, when external drag was enabled.

Timeline

NEW
  • We improved the performance of the virtual scroll.
  • We added the order property to event data, to easily customize the order of the events.
  • We added the eventOrder option to the scheduler view as well.
  • We added templating to the timeline empty resource column through the renderResourceEmpty function (React/jQuery/Javascript), resourceEmptyTemplate (Angular) and resourceEmpty slot (Vue).
  • We pass the day paramater to the resource template when vertical day resolution is used and resources appear on multiple days.
FIXED
  • We fixed an issue where the vertical scroll became stuck after navigating to a date programmatically.
  • We now display the resource column even when the resource array is empty, and only hide it, when resources are not passed at all.
  • We fixed an issue where timeline columns were displayed incorrectly in Angular, with daily resolution and start/end time specified.

MOBISCROLL 5.31.1

Timeline

FIXED
  • We fixed the week/month/quarter/year resolution, which broke with the virtual scroll performance improvements.
  • We fixed an issue with event connections, where an error was thrown, if the target event was out of view.

MOBISCROLL 5.31.2

Timeline

FIXED
  • We fixed an issue where all-day events, invalid and colored ranges incorrectly disappeared in hourly resolution during horizontal scroll.
  • We fixed an issue where events were not displayed on the last column with week/month/quarter/year resolution.
  • We fixed the maxEventStack functionality, which resulted in error when used with variable event heights

For the full changelog please visit our release history.

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