Mobiscroll 5.35 brings a host of refinements, from hiding empty or invalid rows and columns in Scheduler and Timeline views to rich cell templating and hover interactions that make calendars feel truly interactive.

Built‑in SortableJS and Dragula support, modernized Angular demos, Day.js – based timezone handling and a slew of smaller enhancements – including row and column highlights, drill‑down summaries and new unit‑testing guides – promise to make scheduling cleaner, smarter and more enjoyable.

Hide empty or invalid rows/columns in Scheduler and Timeline views

Large-scale schedules often contain entire days with no bookings, or resources that remain unused. In Mobiscroll 5.35, these empty rows and columns can now be removed with the following options: hideEmptyRows and hideInvalidRows options for the Timeline, along with hideEmptyColumns and hideInvalidColumns for the Scheduler. These options let you focus the interface on meaningful data only.

For example, in a hospital doctors appointment planner, empty resource rows for doctors who are off-duty can be hidden, keeping attention on active staff. The result is a denser, more efficient view: less scrolling, less wasted space, and a cleaner presentation for teams and end-users alike.

Check out how you can hide empty rows in the Timeline view.

Check out how you can hide empty columns in the Scheduler.

Cell templating for more customization

The new release adds full control over how cells are rendered across the Event Calendar, Scheduler and Timeline. Through the new renderCell, cellTemplate and cell options, you can inject custom content like simple indicators to interactive elements.

Timeline cells can now host custom buttons or actions. For instance, in a production schedule, each cell might include a “+” button that lets managers add assignments directly where capacity is available.

Explore this demo to see timeline cells fully customized with interactive actions and workload indicators.

Scheduler cells can display workload markers, icons, or interactive status badges, giving end-users quick visual cues without opening event details.

Discover how to highlight holidays, availability, and statuses with custom cell content.

This level of customization helps teams tailor scheduling tools to their exact workflows – whether they need to surface KPIs, allow inline creation of new events, or highlight critical slots.

Hover events for better interactivity

The latest release introduces hover events to the Scheduler, Timeline cells and resources, and Event Calendar cells, enabling developers to surface contextual information and quick actions directly in the grid. Added the onCellHoverIn / onCellHoverOut and onResourceHoverIn / onResourceHoverOut events giving teams fine-grain control over cell- and resource-level interactions.

Resource hover in Timeline
Managers can now display tooltips or inline overlays when hovering over a resource row. In a fleet management app, hovering over a driver resource might reveal availability, assigned routes, or KPIs without navigating away.

Check out the timeline resource hover demo

Cell hover in Scheduler and Event Calendar
Hovering over a time cell can display workload details or quick options. For example, in a hospital shift calendar, pointing at a cell could show how many nurses are already assigned.

Explore how Scheduler cell hover can display workload details or quick options in the demo

Explore how hover-based interactions can be simple yet elegant in the Event Calendar cell demo

SortableJS + Dragula support

Mobiscroll 5.35 integrates directly with SortableJS and Dragula, allowing events and resources to be dragged between external lists and Event Calendar, Scheduler & Timeline views. For example, pending tasks can be scheduled by dragging them from a backlog into the calendar, or entire resources like drivers or classrooms can be reassigned between timelines. 

This reduces implementation effort while giving end-users fluid, enterprise-ready drag-and-drop workflows.

Try the demos:

• Event Calendar
• Scheduler
• Timeline

Angular modernization: 350+ updated demos

With the new release, all 350+ Angular demos have been migrated from NgModules to standalone components, fully aligned with the latest Angular best practices. This allows developers to integrate Mobiscroll components directly, without additional module wiring, and to replicate real-world setups with less boilerplate.

Timezone improvements: Day.js instead of Moment.js

The 5.35 updates all timezone demos to use Day.js, a lightweight and modern date library, replacing Moment.js. In practice, this means faster load times and smaller bundles for apps where timezone handling is critical.

Highlight rows and columns in Timeline

We have built a demo using the Timeline view, utilizing the brand new hover events to dynamically highlight cursor position along with rows and columns, making dense schedules and large grids much easier to navigate. When a user hovers over a cell, the entire row and column light up, so it’s instantly clear where you are in the grid and how that slot connects across time and resources.

This improves data accuracy in complex scenarios, while internal teams benefit from reduced navigation errors when working with dense schedules.

Try out hover interactions and discover how quickly you can adapt them to your workflow here

Event Calendar drill-down with summaries

Another demo that we built using the new hover and templating capabilities is for the event calendar. This makes the calendar more intuitive: month cells now display totals – like daily bookings, tasks, or patient visits – and expand into week or day views with a single click. This gives users a clear overview at a glance and quick access to the details they need, without switching tools or views.

Explore this demo to see how aggregate data, custom visuals, and drill-down navigation create a smarter Event Calendar.

Unit testing guide for every framework

Unit tests serve as an early safety layer – identifying issues before they reach production, minimizing risks during refactoring, and clarifying how the code is intended to work. For users, this ensures a dependable product with consistent features, seamless updates, and quicker access to trustworthy improvements.

Check out the updates and new unit testing guides we have published:

• Check the guide to learn JavaScript unit testing for Mobiscroll components
• Discover how to validate Mobiscroll components using jQuery
• Explore the Angular unit testing guide with practical Mobiscroll examples
• See React unit testing in action for Mobiscroll components
• Learn how to test Mobiscroll components in Vue with @testing-library/vue

iOS 26 ready

Mobiscroll 5.35 is fully compatible with iOS 26, ensuring all components run smoothly on the latest release. We’ve verified performance across devices so your apps remain stable and reliable, and we’ll share more details on upcoming UI changes soon.

Keeping up to date with the latest version guarantees both compatibility and access to new features.

What’s Next

Big changes are on the horizon with Mobiscroll 6. It will build on everything we’ve done so far and take scheduling, resource management, and calendar experiences further. Stay tuned – exciting things are coming!

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

With our latest release, we’re excited to introduce powerful new tools for resource management, including external drag & drop for timeline resources, flexible column sizing in the Scheduler, improved accessibility, modern timezone support, and enhanced performance for large-scale data handling.

New Tools for Smarter Resource Management

With Mobiscroll 5.33, we introduced resource drag & drop, allowing you to reorder resources directly within the timeline view. In our latest release, we’re taking it a step further with external drag & drop support.

You can now manually drag resources into and out of the timeline view — to external lists, containers, or even other timelines. This opens up a wide range of new use-cases, such as real-time team assembly and moving entire resource rows, not just events, between timelines.

Easily Set Up and Manage Teams

This new functionality is especially useful for scenarios like field service management, shift planning, or dynamic team creation. You can now build interfaces that let users assemble teams or resource groups on the fly through external drag & drop.

We’ve created an interactive example with an “Add Team” button, showing how team members can be moved from an external list into the timeline — and even between teams.

View the example.

Scheduler Gets Smarter: Variable Column Widths

The Scheduler offers a familiar calendar interface, great for managing appointments and bookings. For large-scale resource planning, our Timeline view may still be more suitable — but with every update, the Scheduler is getting better and better.

The Scheduler view now supports variable column widths, giving you more flexibility to customize your layout. You can adjust the width of individual columns to better fit your content — whether that means making certain days or resources wider to fit more events, or layering different types of data using events with varying widths.

Optimize Horizontal Space

If you’re aiming for a more compact or dense layout, you can now override the default column widths to suit your needs.

View the demo and see how easy it is to override the default column widths.

Make Columns Content-Aware

Not just limited to overriding the default width — you can now dynamically adjust column widths based on the content they display. For example, you might scale resource columns based on the length of their headers or the number of concurrent events. This ensures your layout stays readable and useful, regardless of data volume.

See it in action

Availability Planner & Appointment Manager

The Scheduler’s intuitive layout makes it ideal for more than just event booking. With each release, we’re making it more capable of handling layered data, such as shifts, availability, scheduled vs. actual tasks, and more.

To support this, we’ve reworked how events are rendered, how scrolling behaves, and how widths are handled — allowing different event types to coexist naturally in a single view.

One great example is our new Doctor Availability Planner, where each doctor’s shift appears as a slim indicator on the left, with appointment slots created and adjusted inside the shift window.

Try the demo

Accessibility & WCAG 2.2 Compliance

From the start, we’ve aimed to make Mobiscroll fully accessible to everyone — including users with disabilities. That commitment continues with enhanced support for WCAG 2.2.

To help teams build compliant apps, we’ve published new documentation detailing accessibility features on a component-by-component basis.

Explore the Accessibility Docs

Modern Timezone Support with Day.js

With Moment.js no longer recommended for new projects, we’ve added full support for Day.js, especially for timezone handling. This ensures Mobiscroll remains modern, lightweight, and compatible with current best practices.

Smoother Auto-Scroll During Drag

We’ve improved drag behavior with smart auto-scrolling. As you drag items near the edge of the view, scrolling now speeds up or slows down based on pointer position, making it easier to navigate large datasets or wide views.

Enhanced Shadow DOM Support

Working inside the Shadow DOM? We’ve improved compatibility: lifecycle events now pass correct targets, and the Draggable component can keep elements inside the Shadow DOM with the new context option — rather than appending them to the body.

Now Compatible with Angular 20

Angular just dropped its latest major version, and we’re happy to report that Mobiscroll is fully compatible with Angular 20. We’ll continue to maintain support for new Angular releases moving forward.

What’s Next

We have some exciting updates in the pipeline, including advanced cell templating, virtual scroll for the Scheduler and the upcoming Mobiscroll 6, our next major release. Stay tuned!

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

With the last release of the year, we are happy to introduce new capabilities that enable a wide range of actions for the timeline resources, along with dynamic zoom, better control over columns and a big step towards making working with a lot of data not a performance killer.

Reordering resources

Resources are rendered in the order they are passed to the resources array. Besides that, the order can change if some resources are fixed the top making the list below that scrollable, however that is not necessarily a fully custom order.

There are situation though when a custom order of resources helps the people working with the calendar. Imagine the timeline loading with a default order, but for the purpose of setting up tasks for the week effectively, seeing the resources in a custom order would eliminate unnecessary filtering and scrolling around. This could be just a temporary order until the next page reload, a custom order saved in local storage for the running session, or synced across devices and stored in a database.

Either way, the reordering capabilitites introduced in this release will make things a breeze for both developers and users.

Reordering can be enabled by setting resourceReorder: true which will display drag handles for the resources that have their reorder property set to true and put the UI into drag & drop mode. Various lifecycle events are triggered through the interactions that can be used to further customizing the experience.

Explore the demo and check out how you can reorder resources through drag & drop.

Sorting the timeline

The default order of the resources or rows in the timeline is determined by the order they are put in the resources array. This order can be changed on the fly by manipulating the array and updating its content.

From an interaction perspective, users might require an order update or sort by resource name, resource property, by hour, day, week or any column for that matter. There might also be cases when sorting should happen based on more complex calculations.

We have added a number of examples on how resource sorting can be implemented may that be ASC/DESC or default order on resource columns and even day columns or sidebar columns. Ordering can come from an external dialog which takes different parameters of the resources and their events into account or by clicking on the headers of the columns.

Check out the updated resource grid example where we added sorting to the grid headers, including resource columns, sidebar and day headers as well.

This solution is pretty flexible and customizable since it uses the templating capabilities of the column headers, which means that you can customize everything from highlight to icons to actions.

In this example, which features a sorting modal that can be invoked from the calendar header, you can select the sorting criteria – based on a contextually relevant calculations – and the sort order.

Another cool thing about this demo is when you add, update or delete data from a resource row, which might affect its position in the currently applied order, the calendar dynamically navigates to the new position and temporarily highlights the row so that the user doesn’t lose track.

You can get creative and design your sorting and ordering logic the way you like, and with the available tooling like templating and lifecycle events you can actually make it happen for your users.

Zooming the timeline

Zooming in & out a timeline view for better visibility and overview could mean a couple of things. It could be increasing the length of the events, navigating across different horizontal resolutions – like hourly, daily, weekly, monthly, quarterly, yearly – and changing the width of the columns.

Dynamically changing the the resolution was already possible before this release, however it was hard to create a cohesive user experience. For simple resolution changes this was ok, but for a full zoom in/out experience with a lot of steps it could have gotten a bit disorienting for users.

We have enhanced the tooling, introduced an easier way to design the list of zoom levels that you would like to support and also added a simple way to apply the zoom level on the fly. All that with a great UX in mind, because it turned out that we’ll have to take the focus point of the user into account for the smoothest zooming experience, we are happy with the current state of tools for zooming.

We are adding the columnWidth property with a number of presets ranging from xxsmall to xxxlarge, which not just helps with designing a great zooming experience but also helps with dynamically changing the width of columns based on resolution.

We have also added the pair of zoomLevels and zoomLevel properties, where the first is an array of predefined options and values where you can control things like type, size, resolutionHorizontal, columnWidth and much more. And the zoomLevel simply takes care of applying the desired zoom preset.

With this, the UX is up to you on how you would like to handle changing the zoom level, may that be with buttons, a slider inside or outside of the calendar.

Check out this interactive demo and take a look on how you can add zoom capabilities to your timeline views.

Resource column width

With the newly introduced columnWidth property you now have control over dynamically changing the width of the columns, which ranges from xxsmall to xxxlarge. These presets have predefined widths, which can be overridden in CSS.

This is not applicable to the resource column, which we made dynamic in case of hierarchies.

I case of very deep hierarchies the resource column would get very small and the content unreadable, so we are dynamically increasing the width by 20px when a parent is expanded. This can be easily changed in CSS, under .md-resource-grouping-hierarchy .mbsc-timeline-resource-depth-step to a custom value or simply removed by setting it to 0px.

See how the resource column width adjusts itself.

Performance with a lot of data and loading things on demand

Since we introduced virtualization to the timeline view we opened up doors to large views and enabled work with thousands of resources at once even on less powerful devices like smartphones or tablets.

With all that, there were still situations when our customers were looking to load tens of thousands or even hundreds of thousands of events in a single view. Our event layouting engine needs to process all that data and there was some latency when drag & drop or event creation happened.

Another issue posed loading so many events with their custom fields and properties into memory, which could take several seconds and lock the view behind a loading animation.

As a solution we have added more control over when the data can be loaded – may that be events and/or resources – in form of new lifecycle events that are triggered on virtual page scroll.

You can use the onVirtualLoading lifecycle event to load data on vertical or horizontal scrolling.

Take a look at how you can load events on virtual scroll and how you can load both events and resources on scroll.

What’s next

We are proud of the new product features and capabilities we shipped across 2024 and are looking forward to a well deserved rest for the last couple of weeks of the year. Can’t wait to start next year, recharged and rested and show what we’ve been planning and designing for you.

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

Happy to introduce updates and new features to the event calendar, agenda, date & time, and the Vue components along with accessibility fixes and additions.

Render events by the exact time

The primary job of the event calendar is to show events, while in combination with the agenda it can be used for navigation as well. Events can be rendered as labels or as a list in a pop-over. Label rendering has several different options ranging from controlling the number of labels all the way to templating, however, it always rendered the labels as full-width events filling the whole day cell of the calendar. With the latest version, we are introducing the eventDisplay property that can either be fill or exact where the latter will position and render the event according to its start and end times. This is super handy in situations where the start and end of an event is relevant in the context of the calendar view. A good example is a booking or reservation calendar with rendering that takes the actual check-in and check-out time into account.

Check how this interactive example of a reservation calendar shows booked days from various sources.

Show empty days in the agenda

The job of the Agenda view is to provide a list of events that are scheduled for a custom range, grouped by days. The list of events can be customized through templating and custom renderers, along with completely empty states for event creation however, day headers without events were not shown at all. Starting with 5.32 it is possible to enable empty day header rendering through the showEmptyDays property of the agenda configuration.

Explore the empty day option for the agenda.

Agenda day header templating

Along with the ability to show empty day headers within the agenda, with templating the headers it is now possible to not only show additional information besides the date but also to provide contextual actions like adding new events.

Check out how you can add a new event button to the agenda day headers.

Timeline drag & drop UX improvements

We have improved on the event drag & drop experience especially when resources are grouped and rendered as a hierarchy. For flat lists, moving events between resources is not a problem. Even if all resource groups are expanded, it’s easy to move an event to any resource. The problem occurs only in situations if someone wants to move an event to a resource that is hidden under a collapsed group. With the event picked up, if you hover over a group that has event creation turned off and is collapsed, the group will automatically expand after a couple of milliseconds.

See it in action and give things a try.

Typescript types to Vue props

Types landed for the Vue props, making the Vue version of Mobiscroll that much easier to use. This reduces development time errors and brings auto-suggest and built-in documentation right into your IDE.

Resource objects within lifecycle events

We have added the relevant resource objects and references to various lifecycle events if views where built-in resource management is supported. Events that are triggered for both the Scheduler and Timeline view now receive the resources as arguments which is useful in situations where you would be interested in where the event is coming from and going to or just simply the full resource object that the event is tied to. You won’t have to manually look up the resource based on an ID and in some cases write recursive functions to do it.

Various date & time bugfixes

The Date & time component received various fixes that piled up with time. These handle new issues and edge cases that present themselves to customers.

Accessibility fixes for the calendars

With every new iteration, we are making our components more accessible. Fixed some issues with VoiceOver and TalkBack and added some new aria labels where relevant.

Popup demos

Not lastly, we are happy to introduce the new demo page section for the popup. It should help you understand basic usage and also show examples of how it complements the event calendar and date picker components.

What’s next

We are preparing the last big release of the year with great features for resources, like reorder, drag & drop along with load on scroll, zoom, and more new capabilities for the timeline.

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

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.

Event ordering

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.

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.

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.

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.

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.

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

Happy to introduce variable event heights, not just as a UX improvement to display content that might have been truncated before, but also opening up new usage opportunities and adding new capabilities to the timeline view.

Variable event heights

Displaying events on the timeline view is a complicated task. There are a lot of parameters to consider, like the page size and resolution of the view, the visible days and hours, the overlaps between the events… just to name a few.

This became even more complicated when we introduced virtual scrolling, to improve performance on large views with loads of data. So far, by knowing that all events have the same height, we could exactly calculate the dimensions of the timeline grid, even without displaying the rows, columns and events outside of the active virtual page.

With the introduction of variable height events this is no longer possible, so in case of large views we initially estimate the height of the rows which are outside of the currently active virtual page (not visible yet) and continuously update the dimension calculations during scroll, as new rows, columns and events are rendered. This all needs to happen so that size corrections don’t disrupt the continuity of scrolling and don’t result in content shifts (or at least minimizes the number of content shifts).

Navigating to an event was also a challenge. Not being present on the currently active virtual page, we only know the approximate location of it, so again we need to dynamically adjust parameters during navigation to ensure that we scroll to the correct location.

Since there are a lot of moving parts to supporting variable event heights, it is released as an experimental feature, and not enabled by default. You can activate it by setting the eventHeight: 'variable' property for the timeline inside the view option which then activates the new rendering mode. Besides having variable event height activated, you will need to make sure that your event templates handle the rendering of variable event heights.

This enables new use-cases and opens up new capabilities. Useful when the content of the events vary, for example rendering lists with various lengths or supporting multiple event types with different content templates. If you want to keep all content visible, irregardless of the event length (width), the height will dynamically change when resized and not truncate depending on the available space.

See it action and learn how you can enable it for your content.

Sub-tasks as list on events

A lot of the times certain tasks, jobs or work orders require further division into sub-task or checklists – divide and conquer! And a lot of times it makes sense to tackle these lists right in the context of the work order.

With the addition of variable event heights it is possible to render different sized events that also grow the resource row height depending on the rendered events.

Take a look at the following example where you can add items to a list right on the work orders. Use it as a starting point for building out more complex views and customize it to your needs and requirements.

Summaries for resource groups

At times when an overview of tasks under a single group needs to be easily accessible, you can use the parent resource rows to display summaries or aggregates. If this needs to happen across all resources and not on a group by group basis, utilizing header templates is the way to go.

A good example where such summaries per group are useful is for internal fleet bookings where each group represents a separate location and the resources are the vehicles that can be booked on a daily basis.

These dynamically calculated values can be presented as custom templated events in resource parent rows. Whenever new bookings are made, updated or deleted, use the onEventCreated, onEventUpdated and onEventDeleted lifecycle events to update the aggregates for their parent resource.

This is another great example that wasn’t possible without the support for variable event heights.

Showing and setting task progress

Usually a Gantt chart feature, showing progress on tasks visually in an overlay and setting it either programmatically or manually with a slider can be useful in a lot of situations.

Using the event templating capabilities, it is possible to render a live slider that reacts on hover and enables updating the progress inline.

Use the renderScheduleEvent function to customize the template and adjust it to your needs.

Besides being able to update progress right on the event, it is also possible to add a slider that controls task progression – saved in a custom property of the event – inside an add/edit dialog.

Check out the live example and use the demo as a starting point and expand on it.

Adding React 19 support

As we prepared 5.30, React 19 was just to be released. It came with a number of breaking changes, some of which affected Mobiscroll.

The render and unmountComponentAtNode functions are no longer available in React 19, the functional versions of the notifications (alert, confirm, prompt, toast and snackbar) stopped working. In v5.21.0 we introduced the component variants (<Alert />, <Confirm />, <Prompt />, <Toast /> and <Snackbar />), which can be used instead.

To avoid breaking older React apps using the notification functions, we created a separate package for React 18 and above. The Mobiscroll CLI – mobiscroll config react – will install the correct package depending on the React version of the project. When using our Download Builder, “React 18+” should be selected as the framework.

Adding Angular 18 support

With Angular 18 released, things changed a little on how the builder looked for the TypeScript definition files. We updated the package.json to make it compatible with the latest version.

General bugfixes and improvements

In addition to all these new capabilities we shipped a number of bugfixes and improvements related to the Angular version of Mobiscroll, the Select component and to the Timeline view where the native browser zoom messed up the layout in some situations.

What’s next

We are working on some new things that will add more control over event ordering, enable dynamic resource filtering and improve virtual scroll performance and timeline performance in general. We are also making steps towards preparing for Mobiscroll 6.

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

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.

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.

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.

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

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.

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.

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.

Happy to introduce Mobiscroll for Vue final, control over event stacks, fixed rows for the timeline, quick navigation UX overhaul, new features for working with immutable data, accessibility and typescript improvements.

Mobiscroll for Vue final

The Vue version is officially out of beta now! There were another set of fixes and improvements added along with more smoothing out on the documentation front and the demos. So feel free to explore the vue demos and docs.

Event stacks and a show more button

Stacking occurs when a lot of events are overlapping. In case of the scheduler where the columns don’t grow in width as the number of simultaneous events grow, the labels can become hard to read and in case of the timeline the height of some resources might be significantly larger than others.

With the introduction of the maxEventStack option, you can set the maximum number of events that you would like to render at any given time. Events that are not rendered will show up in a pop-over through a “more“ button.

This results in a cleaner look and makes previously busy views easier to scan.

Play around with the scheduler and timeline view configurations and see how the stacks look.

Fixed rows for the timeline view

Tasks like assigning/un-assigning events all within a single timeline or comparing one or more resources next to each other was all doable before, however starting with 5.28 it is possible to fix one or more rows at the top of the timeline. That way the row is fixed along with the header and it’s much easier to perform these tasks rather then dragging events up & down and scrolling long distances.

The solution is pretty simple with the newly introduced fixed property of the resources that can be set on initialization or changed on the fly to dynamically lock rows at the top or release them.

Take a look at this example for assigning and un-assigning events and see this one for comparing resources at the top of the calendar.

Mobiscroll and immutable data

Working with immutable data is very common, especially when unidirectional data flow principles are used. Until now it was not possible to pass immutable data directly to the event calendar. The calendar mutated the data in multiple places:

• the resource data was processed, and additional fields were written to the original objects
• the event objects were also mutated when an event was dragged or resized

This resulted in errors, when immutable data was passed, and the workaround was to pass a copy of the data to the calendar, which is mutable.

In v5.28.0 it is possible to work with immutable data directly without the need for a workaround. We introduced the immutableData option which is not enabled by default, to avoid breaking changes for those who rely on the data mutation being made. When enabled:

• the calendar will no longer mutate the input data.
• in the case of the resources, the processing will create a copy of the resource data, and add the calculated properties only there.
• in case of the events moving and resizing events will not change the original data, the calendar will only trigger the onEventUpdate and onEventUpdated lifecycle hooks with the modified data in the arguments, which can be used to update the data store.

Quick navigation UX overhaul for the event calendar views

With the quick navigation component that normally resides in the top left corner of every event calendar view we wanted to make it as easy as possible to move to a different year/month. Its job was to provide means for, you guessed it, quick navigation.

As time went by we added more features and expanded on the available views and their configuration with daily views, resolutions … so the job of navigating to a different day was not solved by the component we had.

With this overhaul we introduced a full date picker in the quick navigation component and we re-evaluated the defaults based on the configured views. We have also updated how the month & year selection performs, changing the selection order in some cases and even omitting some parts in other cases.

Flight scheduling with two timelines

We have published a new demo that leverages several features and tools of Mobiscroll. It brings things together, like: working with two separate timeline instances, keeping them in sync while scrolling, drag & drop between two instances, controlling the d&d interactions – limiting it to only vertical moves, dynamic validation and background coloring with CSS patterns to name a few.

The top timeline holds the unassigned reservations, while the bottom timeline would be the crew and aircraft assigned view.

Check out the functional live demo here.

Accessibility improvements

We are continuously improving accessibility as we come across any issues. This time we have enabled localized date fields that were posing difficulties for some screen readers eg. NVDA by NV Access.

A Typescript update

We did another sweep through our type definitions and improved it here and there. This makes working with Mobiscroll in Typescript even smoother.

What’s next

We have some more fun stuff incoming next year. Things like built-in buffer time support for events, variable event heights, more updates to our docs & guides are some of the things we are working on. Stay tuned!

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

Happy to introduce the public beta of Mobiscroll for Vue, quarter resolution to the timeline view, along with easier validation control, new event connection types, and drag & drop improvements.

Mobiscroll for Vue

The public beta is out for a couple of weeks now, all v5 demos are available for the Vue version and a new documentation is implemented. The beta label is coming off shortly as well.

Avoid double booking

When it comes to scheduling resources, overlapping events are not allowed in a lot of cases. More than just one event happening at the same time is still a thing and we not removing that, but we are introducing the eventOverlap option that is applicable to the instance, resources or individual events. 

Prior to having this option it was necessary to rely on the onEventCreate and onEventUpdate lifecycle events and manually check and handle the overlap there.

Play around with this example to understand how you can control overlap validation or check out this great example for making doctor’s appointments.

Timeline event connections

We had event connection for some time now – since they were introduced in version 5.19, with some limitations. We only supported finish-to-start connections which went from the end of one event and connected to the beginning of another event.

We are introducing four connection types: finish-to-start, start-to-finish, start-to-start and finish-to-finish.

Check out how you can control the event connections in this example.

Timeline Q1, Q2, Q3, Q4

We are adding horizontal quarter resolution to the timeline view. Use it for dividing the view into quarters.

Templating of the quarter header and footers is new as well and comes with this release.

Check out how to customize the header and footer in case of any timeline resolution and learn how to configure quarter resolution for your view.

Drag & drop control and improvements

We have added dragInTime support for external events. In times of scheduled but unassigned events listed externally of the calendar might be already fixed. When assigning such events it is better to just fix them in time in the calendar and let users only move them between resources rather than retroactively modifying them.

Time slots inherited the same drag & drop controls that the resources have. This means if eventDragBetweenSlots is true, the events won’t be draggable between time slots. Eg. if someone wants for move an assignment and keep it in a specific shift, they can do that now without the need to write a custom validation logic in the lifecycle events.

Agenda empty state

The empty state template was introduced in version 5.26. Being able to create a custom template/render function for the views that don’t have events is useful for showing CTAs, images and text.

Check out this example and customize the agenda empty state through the renderAgendaEmpty and the agendaEmptyTemplate.

What’s next

We are working on a couple of powerful features, like being able to fix certain rows at the top of the timeline, better control over handling many overlapping events along with new tools for a nice zoom feature.

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

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.