New release: Mobiscroll 5.29 with event buffers, improved row and column styling, demo projects on GitHub and a new documentation

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 custom 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.

Links to 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.

New 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.


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

Start building better products
Sign up and get posts like this in your inbox. We respect your time and will send you only the good stuff!