New Release: Mobiscroll 6

Announcements
1

New release: Mobiscroll 6 with Modernization, CSS Variables, Scheduler Virtualization & Shifted Days

Mobiscroll 6 brings updated themes, a new CSS variable-based styling foundation, aligned API naming across components, updated platform support, shifted day support for Scheduler and Timeline, and virtualization to the Scheduler. It is a major release centered on performance and consistency, with a stronger foundation for teams building and maintaining scheduling interfaces over time.

Updated themes for a cleaner, more consistent UI

We rewrote the built-in themes based on the latest Windows (Fluent), Material (Material 3), and iOS (Liquid Glass) design systems. The goal here was to provide a cleaner and more consistent UI across components while updating the visual baseline to match current platform conventions.

This is the Mobiscroll 6 Scheduler with a horizontal timeline with the iOS theme.

The Mobiscroll 6 Scheduler with a horizontal timeline and the Material theme.

Mobiscroll 6 Scheduler with a horizontal timeline and the Windows theme.

This change affects the overall look and feel across the product, from calendars and datepickers to schedulers and related UI elements.

If you cannot update the themes in your project immediately, especially if it already relies on customizations built on the previous themes. With legacy CSS and SCSS theme files, you can keep the existing appearance during the upgrade and still enjoy what Mobiscroll 6 has to offer.

At the same time, it’s worth trying the new themes, because in many cases they already cover what was previously handled through customizations, reducing the amount of workarounds and extra styling.

CSS variables across all components

Along with the theme rewrite, we also restructured the CSS architecture across all components to use CSS variables. This is now the primary styling foundation in Mobiscroll 6.

This change makes theme customization easier and significantly reduces the CSS footprint. It doesn’t affect the default appearance, but changes how styling is defined and extended.

For teams who want to keep the old appearance while gradually moving to the new variable-based model, the legacy theme files provide that option. You can review the full styling migration details in the upgrade guide.

Shifted days in Scheduler and Timeline

One of the more practical additions in Mobiscroll 6 is the support for relative day offsets in Scheduler and Timeline.

Try the 36 hour rolling view demo

This makes it possible to redefine the boundaries of a day by using a negative suffix for the start and a positive suffix for the end in the view option’s startTime and endTime properties.

This allows a single view to span naturally across midnight. Instead of treating midnight as a hard boundary, you can define the visible range around the actual logic of the schedule.

This is super useful in scenarios like:

  • Night shifts – Use the Continuous shift planning to configure a view from 6 AM to the next day’s 6 AM, display an 18:00–08:00 overnight shift, or extend the day slightly past midnight to capture late-night activity.
  • TV schedules and Festival programs can both benefit from the Configure the timeline demo: a broadcast day can run from 06:00 to 06:00 so late-night shows stay grouped under the same schedule, while a stage timeline for multi-day events can be set from 14:00 to 04:00 to keep performances from afternoon acts to after-midnight sets within a single, continuous view.
  • Transport operations – In transport planning, an operational window such as 05:00 to 05:00 allows overnight routes (for example 22:00–03:00) to be handled within the same planning cycle, without breaking them at midnight , similar to the 36 hour rolling view demo

This support is available in Scheduler and in Timeline single-day view.

Both components also gained the dragTimeStepBase option. If set to ‘viewStart‘, drag step calculations use the view’s startTime as the reference point instead of the beginning of the day.

Scheduler virtualization and native sticky headers

Data is rendered on virtual pages and loaded on demand during scroll, allowing you to work with large datasets across long periods and many resources without degrading interaction performance on mobile or desktop.

You can see below, how the Scheduler renders data on demand using virtualization. As you scroll horizontally or vertically, the onVirtualLoading event is triggered, allowing events to be loaded progressively instead of all at once.

ezgif.com-optimize (10)

Loading events on scroll demo.

Next demo shows how the Scheduler handles large datasets using built-in virtualization. It renders and navigates multiple resources across extended time ranges without requiring all events to be rendered at once.

ezgif.com-optimize (9)

Working with large data sets demo

To support this, Mobiscroll 6 adds the new onVirtualLoading lifecycle event, which is triggered when a new virtual page is loaded during horizontal and vertical scrolling. This enables on-demand loading of events and resources as users move through the Scheduler.

The scheduler header and time column now use native CSS sticky positioning, which improves performance and removes scroll sync latency. If your application relies on large scheduling views, take a look at the Multiple resources and Lifecycle events Scheduler demos, along with the Working with large data sets, Loading events on scroll and Loading resources on scroll Timeline demos.

Virtualization is enabled automatically, so there’s nothing you need to configure manually.

API improvements and naming alignment

API options were streamlined with aligned naming and deprecations for legacy options, and this pattern is applied consistently across Agenda, Eventcalendar, Scheduler, and Timeline.
A few examples:

  • In Agenda, renderEvent became renderAgendaEvent, and renderDay became renderAgendaDay, and the Angular/Vue rendering hooks were renamed to agendaEventTemplate,agendaEvent, agendaEventContentTemplate, agendaEventContent, agendaDayTemplate and agendaDay.
  • In Eventcalendar, renderLabel became renderCalendarEvent, and renderEvent became renderPopoverEvent, and the Angular/Vue hooks were renamed to calendarEventTemplate, calendarEvent, calendarEventContentTemplate, calendarEventContent, popoverEventTemplate, popoverEvent, popoverEventContentTemplate and popoverEventContent.
  • In Scheduler, renderScheduleEvent became renderSchedulerEvent, and the Angular/Vue hooks were renamed to schedulerEventTemplate, schedulerEvent, schedulerEventContentTemplate, schedulerEventContent, schedulerDayTemplate, schedulerDay, schedulerDayContentTemplate and schedulerDayContent.
  • In Timeline, renderScheduleEvent became renderTimelineEvent, and the Angular/Vue hooks were renamed to timelineEventTemplate, timelineEvent, timelineEventContentTemplate, timelineEventContent, timelineDayTemplate and timelineDay.

The same type of alignment applies to Angular templates, Vue slots, and content rendering options as well. If you’re maintaining a larger codebase or multiple framework implementations, this is a good time to review deprecated names and start cleaning them up incrementally.

These changes are marked as deprecated with backward compatibility, which means older option names continue to work for now. That makes it possible to migrate gradually instead of having to rewrite everything at once.

There are a few related changes worth calling out as well:

Platform updates and cleanup

We updated the minimum supported browser versions to: Chrome 56, Firefox 32, iOS / Safari 13, Edge 79, and the minimum supported framework versions to: Angular 9, React 17, Vue 3 and TypeScript 4

The support for IE11 and for node-sass was removed. We also migrated from deprecated Sass functions and updated the minimum Sass version to 1.80.0

On top of that, npm package naming was aligned with current Angular and React ecosystem conventions:

  • angular-ivy → angular for Angular 13+
  • angular → angular-legacy for Angular 9–12
  • react → react-legacy for React below 18
  • react-next → react

There is also a security-related cleanup: support for HTML markup in strings was dropped. It is now only supported in jQuery and JavaScript render functions.

In the Popup, HTML markup inside the headerText is no longer supported either.

Other changes across components

In addition to the main areas above, Mobiscroll 6 also includes a number of component-specific updates across the Agenda, Datepicker, Eventcalendar, Scheduler, Forms, Popup and Timeline.

Agenda

In Agenda, the default refDate now points to today instead of ‘1970-01-01’. Event and day rendering options have been renamed with agenda… prefixes (for example, renderEvent became renderAgendaEvent) and are marked as deprecated with backward compatibility. You can review the full list in the Agenda prefixes section of the Upgrade Guide.

Datepicker

In Datepicker, the weeks option was removed and calendarSize should be used instead. The default refDate also changed to today.

In Datepicker, the weeks option has been removed and calendarSize should be used instead. The default refDate has also been changed to today’s date. For a complete list of affected options, see the Datepicker section of the Upgrade Guide.

Eventcalendar

In Eventcalendar, click handling has been cleaned up so that onEventClick, onEventDoubleClick, and onEventRightClick no longer trigger the corresponding cell click events in addition. The same issue has been fixed for onLabelClick.

The default refDate now points to today, and multiple rendering options have been renamed with calendar… and popover… prefixes, with backward compatibility and deprecation markers. A complete list is available in the Eventcalendar section of the Upgrade Guide.

Forms

In Forms, notification functions have been removed from React, only components can be used going forward. If you’re using React notifications, you can review the updated patterns in the Mobiscroll for React documentation

Popup

In Popup, support for HTML markup inside headerText was removed.

Scheduler

In addition to virtualization, shifted day support, and dragTimeStepBase, Scheduler also received API naming updates and a fix for date display alignment in the header when using the Windows theme in RTL mode. The schedule prop under the view option has been renamed to scheduler and is marked as deprecated with backward compatibility. A complete list of changed Scheduler options is available in the Upgrade Guide.

Timeline

Timeline received shifted day support in single‑day view, the new eventDisplay prop, and dragTimeStepBase. The resolution prop has been removed in favor of resolutionHorizontal and resolutionVertical. Rendering options were renamed with timeline… prefixes and are marked as deprecated with backward compatibility; a complete list is available in the Timeline section of the Upgrade Guide.

Before upgrading to Mobiscroll 6

Because this is a major release, it’s a good idea to review a few parts of your setup before upgrading. Not every change in Mobiscroll 6 is breaking, and many areas keep backward compatibility, so you can migrate gradually instead of rewriting everything at once. However, this is exactly where supported baselines, deprecated APIs, and migration paths are most explicit.

Before switching over, take a moment to review:

  • Your browser and framework targets.
  • Any use of node-sass and the minimum Sass version.
  • Package names in Angular and React projects, including angular-ivy, angular, react, react-next, and their legacy equivalents.
  • Deprecated API names you may want to replace over time, especially in Agenda, Datepicker, Eventcalendar, Scheduler, and Timeline.
  • Any custom themes built on the previous structure.
  • Use of HTML markup in strings or popup header text.
  • Datepicker configurations using weeks.
  • Timeline configurations still relying on resolution.

If you’re preparing an upgrade, read the upgrade guide, check the release notes, then review your current setup against the platform and API changes outlined above.

What’s next

With Mobiscroll 6, we focused on updating the foundation across styling, APIs and platform support. We will continue building on this, with ongoing improvements around performance and more advanced scheduling scenarios in Scheduler and Timeline.

You can explore the updated demos, to see how these changes work in practice. We’ll be breaking down some of the key updates in upcoming posts, with a closer look at how they work and how to use them, so stay close for the details.

Additionally we are planning to release AI tooling that you can use in your day-to-day when building scheduling, planning and resource management interfaces. Documentation, demos, MCP server and skills will be consumable by your AI agent of choice that will keep on building with Mobiscroll for you.

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

Read the full blog post

MOBISCROLL 6

All Components

New

  • We introduced CSS variables across all components for theme customization.
  • We added legacy CSS and SCSS theme files to keep the old theme appearance if needed.

Fixed

  • We improved the npm package definitions to align with the latest standards.

Removed

  • We dropped support for IE11.
  • We dropped support for node-sass.
  • We dropped support for HTML markup in strings for improved security. It is only supported in jQuery and JavaScript render functions.

Changed

  • We updated the minimum supported browser versions to Chrome 56, Firefox 32, iOS/Safari 13, and Edge 79.
  • We renamed the following npm packages to align with current ecosystem standards: angular-ivy to angular (Angular 13+), angular to angular-legacy (Angular 9-12), react to react-legacy (React < 18), and react-next to react.
  • We updated the minimum framework versions to Angular 9, React 17, Vue 3, and TypeScript version to TypeScript 4.
  • We migrated from the deprecated Sass functions and updated the minimum Sass version to 1.80.0.
  • We rewrote the built-in themes based on the latest Windows (Fluent), Material (Material 3), and iOS (Liquid Glass) design systems.
  • We restructured the CSS architecture across all components to use CSS variables.

Agenda

Changed

  • We changed the default value of the refDate option from '1970-01-01' to today’s date.
  • We renamed the renderEvent option to renderAgendaEvent with backward compatibility, marked as deprecated.
  • We renamed the eventTemplate option (Angular) to agendaEventTemplate with backward compatibility, marked as deprecated.
  • We renamed the event slot (Vue) to agendaEvent with backward compatibility, marked as deprecated.
  • We renamed the renderEventContent option to renderAgendaEventContent with backward compatibility, marked as deprecated.
  • We renamed the eventContentTemplate option (Angular) to agendaEventContentTemplate with backward compatibility, marked as deprecated.
  • We renamed the eventContent slot (Vue) to agendaEventContent with backward compatibility, marked as deprecated.
  • We renamed the renderDay option to renderAgendaDay with backward compatibility, marked as deprecated.
  • We renamed the dayTemplate option (Angular) to agendaDayTemplate with backward compatibility, marked as deprecated.
  • We renamed the day slot (Vue) to agendaDay with backward compatibility, marked as deprecated.

Datepicker

Removed

  • We dropped the weeks option. The calendarSize option can be used instead.

Changed

  • We changed the default value of the refDate option from '1970-01-01' to today’s date.

Eventcalendar

Fixed

  • We fixed the onEventClick, onEventDoubleClick, and onEventRightClick events, which were also firing the onCellClick, onCellDoubleClick, and onCellRightClick events.
  • We fixed the onLabelClick event, which fired the onCellClick as well.

Changed

  • We changed the default value of the refDate option from '1970-01-01' to today’s date.
  • We renamed the renderLabel option to renderCalendarEvent with backward compatibility, marked as deprecated.
  • We renamed the labelTemplate option (Angular) to calendarEventTemplate with backward compatibility, marked as deprecated.
  • We renamed the label slot (Vue) to calendarEvent with backward compatibility, marked as deprecated.
  • We renamed the renderLabelContent option to renderCalendarEventContent with backward compatibility, marked as deprecated.
  • We renamed the labelContentTemplate option (Angular) to calendarEventContentTemplate with backward compatibility, marked as deprecated.
  • We renamed the labelContent slot (Vue) to calendarEventContent with backward compatibility, marked as deprecated.
  • We renamed the renderEvent option to renderPopoverEvent with backward compatibility, marked as deprecated.
  • We renamed the eventTemplate option (Angular) to popoverEventTemplate with backward compatibility, marked as deprecated.
  • We renamed the event slot (Vue) to popoverEvent with backward compatibility, marked as deprecated.
  • We renamed the renderEventContent option to renderPopoverEventContent with backward compatibility, marked as deprecated.
  • We renamed the eventContentTemplate option (Angular) to popoverEventContentTemplate with backward compatibility, marked as deprecated.
  • We renamed the eventContent slot (Vue) to popoverEventContent with backward compatibility, marked as deprecated.
  • We renamed the renderDay option to renderCalendarDay with backward compatibility, marked as deprecated.
  • We renamed the dayTemplate option (Angular) to calendarDayTemplate with backward compatibility, marked as deprecated.
  • We renamed the day slot (Vue) to calendarDay with backward compatibility, marked as deprecated.
  • We renamed the renderDayContent option to renderCalendarDayContent with backward compatibility, marked as deprecated.
  • We renamed the dayContentTemplate option (Angular) to calendarDayContentTemplate with backward compatibility, marked as deprecated.
  • We renamed the dayContent slot (Vue) to calendarDayContent with backward compatibility, marked as deprecated.

Forms

Removed

  • We dropped notification functions from React. Only components can be used.

Popup

Removed

  • We dropped support for HTML markup inside the headerText option.

Scheduler

New

  • We added support for relative day offsets (negative suffix for start, positive suffix for end) in the view option’s startTime and endTime properties to seamlessly span across midnight (for example '20:00-1', '06:00+1').
  • We virtualized scheduler scrolling, making it possible to work with large data sets across long periods and many resources without degrading interaction performance on mobile or desktop.
  • We added the onVirtualLoading lifecycle event, which is triggered when a new virtual page is loaded on both horizontal and vertical scrolling. This enables on-demand loading of events and resources as users scroll through the scheduler.
  • We added the dragTimeStepBase option to set the base for dragTimeStep calculation. If set to 'viewStart', it takes the startTime property of the view option as reference instead of the beginning of the day.

Fixed

  • We fixed an alignment issue with the date display in the header when using the Windows theme in RTL mode.

Changed

  • We renamed the renderScheduleEvent option to renderSchedulerEvent with backward compatibility, marked as deprecated.
  • We renamed the scheduleEventTemplate option (Angular) to schedulerEventTemplate with backward compatibility, marked as deprecated.
  • We renamed the scheduleEvent slot (Vue) to schedulerEvent with backward compatibility, marked as deprecated.
  • We renamed the renderScheduleEventContent option to renderSchedulerEventContent with backward compatibility, marked as deprecated.
  • We renamed the scheduleEventContentTemplate option (Angular) to schedulerEventContentTemplate with backward compatibility, marked as deprecated.
  • We renamed the scheduleEventContent slot (Vue) to schedulerEventContent with backward compatibility, marked as deprecated.
  • We renamed the renderDay option to renderSchedulerDay with backward compatibility, marked as deprecated.
  • We renamed the dayTemplate option (Angular) to schedulerDayTemplate with backward compatibility, marked as deprecated.
  • We renamed the day slot (Vue) to schedulerDay with backward compatibility, marked as deprecated.
  • We renamed the renderDayContent option to renderSchedulerDayContent with backward compatibility, marked as deprecated.
  • We renamed the dayContentTemplate option (Angular) to schedulerDayContentTemplate with backward compatibility, marked as deprecated.
  • We renamed the dayContent slot (Vue) to schedulerDayContent with backward compatibility, marked as deprecated.
  • We renamed the schedule prop to scheduler under the view option with backward compatibility, marked as deprecated.

Timeline

New

  • We added support for relative day offsets (negative suffix for start, positive suffix for end) in the view option’s startTime and endTime properties to seamlessly span across midnight for single-day view (for example '20:00-1', '06:00+1').
  • We added the eventDisplay prop (values: 'exact' | 'fill') under the view option, marking the eventList as deprecated.
  • We added the dragTimeStepBase option to set the base for dragTimeStep calculation. If set to 'viewStart', it takes the startTime property of the view option as reference, otherwise the beginning of the day.

Removed

  • We dropped the resolution prop under the view option. Only resolutionHorizontal and resolutionVertical are supported.

Changed

  • We renamed the renderScheduleEvent option to renderTimelineEvent with backward compatibility, marked as deprecated.
  • We renamed the scheduleEventTemplate option (Angular) to timelineEventTemplate with backward compatibility, marked as deprecated.
  • We renamed the scheduleEvent slot (Vue) to timelineEvent with backward compatibility, marked as deprecated.
  • We renamed the renderScheduleEventContent option to renderTimelineEventContent with backward compatibility, marked as deprecated.
  • We renamed the scheduleEventContentTemplate option (Angular) to timelineEventContentTemplate with backward compatibility, marked as deprecated.
  • We renamed the scheduleEventContent slot (Vue) to timelineEventContent with backward compatibility, marked as deprecated.
  • We renamed the renderDay option to renderTimelineDay with backward compatibility, marked as deprecated.
  • We renamed the dayTemplate option (Angular) to timelineDayTemplate with backward compatibility, marked as deprecated.
  • We renamed the day slot (Vue) to timelineDay with backward compatibility, marked as deprecated.

For the full changelog please visit our release history.

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