New Release: Mobiscroll 5.29 & 5.29.1

Announcements
1

What’s New

It has been a while since our last update, but we are back to let you know what we shipped in the past month or so through 5.29. Happy to introduce event buffers, an easy way to style rows and columns in the scheduler and timeline, brand new documentation and demo projects on GitHub.

Event buffer times

Apart from the actual length of an event it is often useful to define extra time before and after. This could be prep time, travel time for meetings or appointments, check-in and check-out time around flights, loading and unloading time for a truck, or anything that is not part of the event but affects scheduling. This release adds support for presenting event buffers on the timeline and on the scheduler.

Buffer times are displayed with a different styling, and templating is also available. Event buffers can be defined in the event data, while displaying the buffers can be controlled using the showEventBuffer option.

Take a look at the default styling of the event buffers for the timeline view and the scheduler.


Default event buffer styling for Timeline


Default event buffer styling for Scheduler

Control over styling and customization is an important piece of the puzzle so naturally templating is available for the event buffers as well. We have updated our event templating demo for the timeline and the scheduler.


Event buffer templating for Timeline


Event buffer templating for Scheduler

Easy row/column highlight and background for the timeline and scheduler

Coloring resource rows or scheduler columns was already possible using the colors option, but coloring an entire row or column was complicated, involving recurring rules and writing custom templates for a couple of different assets. Now it is as simple as setting a background property for the resource object, or adding a cssClass property for extra control over styling. Use it to dynamically highlight rows, even row selection or multi-select.


Timeline with resource background and styling

Check out how you can style rows in the timeline and how you can do it in case of the scheduler.


Scheduler with resource background and styling

Demo projects available on GitHub

We have made all Mobiscroll demos available and downloadable as part of a single project on GitHub on a framework to framework basis.

Depending on the version you are interested in these can be separately cloned and you can use the CLI to install either a Mobiscroll trial or if you own a license, the licensed version, enabling you to easily get access to all demos and play around with them locally.

You’ll also find a link to the GitHub source for each demo.


View code on GitHub

Feel free to explore the new demo projects and start playing around with the code locally.

Check out the Angular demos on GitHub.

Check out the plain Javascript demos on GitHub.

Check out the jQuery demos on GitHub.

Check out the React (JSX) demos on GitHub.

Check out the React Typescript (TSX) demos on GitHub.

Check out the Vue demos on GitHub.

Check out the Vue Typescript demos on GitHub.

New documentation and infrastructure

We have migrated from an in-house built and maintained documentation system to Docosaurus, which is a popular documentation framework that is very active and has a lot of integration and customization capabilities.

Like most of our customers use Mobiscroll because they are not in the business of building scheduling, calendaring and planning UI, we are not in the business of building documentation systems. And since the documentation is an important part of our “product“, moving to something more scalable and stable enables us to improve on the content more easily and add more systems on top of it, like search.

Although we have still work to do on the content and fine-tune different aspects, we have a solid foundation for it. (maybe live demos in the docs next?!?)

Check out the latest docs for Javascript, jQuery, Angular, React and Vue.


The new look of the documentation

Various bugfixes and improvements

As with every release, we continuously fix bugs, solve issues and improve upon what is already available. The calendar received Vue specific fixes along with improvements to the lifecycle events and drag & drop fixes for all frameworks. Recurring event processing was improved as well.

What’s next

We have a couple of pretty unique capabilities lined up. Variable event heights is shaping up really nicely along with other new features and fine-tuning. Stay tuned and let us know how we can help.

Read the full blog post

MOBISCROLL 5.29

Agenda

FIXED

  • We fixed a bug with the calendar buttons, which resulted in error when used with Vue server side rendering.

Datepicker

FIXED

  • We fixed a bug with the calendar buttons, which resulted in error when used with Vue server side rendering.

Eventcalendar

FIXED

  • We fixed a bug with the calendar buttons, which resulted in error when used with Vue server side rendering.
  • We fixed an issue where parts of the event label remained with focus styling after drag & drop.

Print module

FIXED

  • We fixed an issue where custom Angular templates were not displayed correctly in print view due to missing styles.

Scheduler

NEW

  • We added the oldResource and resource properties to the onEventUpdate lifecycle event arguments to easily determine the source and destination resources.
  • We added the background and cssClass properties to the resource data, making the customization of the resource columns easier.
  • We added the bufferBefore and bufferAfter event data properties to help define buffer zones for events.
  • We added the showEventBuffer option to control the display of event buffers.
  • We added templating to the event buffers through the renderBufferBefore and renderBufferAfter functions (React/jQuery/Javascript), bufferBeforeTemplate and bufferAfterTemplate (Angular) and bufferBefore and bufferAfter slots (Vue).

FIXED

  • We fixed a bug with the calendar buttons, which resulted in error when used with Vue server side rendering.

Timeline

NEW

  • We added the oldResource, oldSlot, resource and slot properties to the onEventUpdate lifecycle event arguments to easily determine the source and destination resources and slots.
  • We added the background and cssClass properties to the resource data, making the customization of the resource rows easier.
  • We added the bufferBefore and bufferAfter event data properties to help define buffer zones for events.
  • We added the showEventBuffer option to control the display of event buffers.
  • We added templating to the event buffers through the renderBufferBefore and renderBufferAfter functions (React/jQuery/Javascript), bufferBeforeTemplate and bufferAfterTemplate (Angular) and bufferBefore and bufferAfter slots (Vue).

FIXED

  • We fixed a bug with the calendar buttons, which resulted in error when used with Vue server side rendering.
  • We fixed an issue where the onCellClick, onCellDoubleClick and onCellRightClick events were not fired if the horizontal resolution was week, month, quarter or year.

MOBISCROLL 5.29.1

All Components

FIXED

  • We fixed the occurrence calculation in case of monthly and yearly recurrence rules, which resulted in an infinite loop, if an empty array was passed for the day or month property.

Datepicker

FIXED

  • We fixed the Angular picker input to open the picker when the input icon is clicked.

Select

FIXED

  • We added the missing maxWidth and maxHeight options to the Angular component.

Timeline

FIXED

  • We fixed an issue where changing dynamically between equal and variable row heights did not work correctly.
  • We fixed the event connection lines rendering, which were off in some cases, after dragging events.

For the full changelog please visit our release history.

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