Mobiscroll 6.1 adds Angular 22 support across all components, brings custom header templating to the Datepicker, Popup, and Select, and delivers a set of concrete navigation improvements to the Scheduler. Whether your team is upgrading its Angular stack or looking for finer control over component composition, this release has practical reasons to update.
Get Mobiscroll 6.1 or read on for a full breakdown.
Angular 22 support
All Mobiscroll Angular components have been updated to support Angular 22. Teams that are upgrading their frontend stack to the latest Angular release can now do so without Mobiscroll being a blocking dependency.
Angular major versions introduce breaking changes that require library-level updates to remain compatible. With Mobiscroll 6.1, teams on Angular 22 are unblocked — the full component suite, including the Scheduler, Timeline, EventCalendar, Datepicker, Popup, and Select, works with the current Angular release.
Custom header templating for Datepicker, Popup, and Select
The Datepicker, Popup, and Select components now support fully custom header rendering. The API is consistent across all three components and follows the framework-native pattern for each supported framework:
- Datepicker —
renderHeader(React, jQuery, JavaScript),headerTemplate(Angular),popupHeader(Vue) - Popup —
renderHeader(React, jQuery, JavaScript),headerTemplate(Angular),header(Vue) - Select —
renderHeader(React, jQuery, JavaScript),headerTemplate(Angular),popupHeader(Vue)
This is particularly significant for the Popup component. In Mobiscroll 6, the headerText option was updated to accept plain text only — HTML markup support was removed. This release restores the ability to use custom markup and component composition in popup headers through a proper templating API, rather than a string property.
The same templating approach applies across Datepicker and Select. Teams building booking interfaces, custom form UIs, or contextual selection components can now control the full header area — adding icons, action buttons, status indicators, or styled titles — without working around the default rendering.
Meal planner demo — A weekly timeline-based meal planner where clicking an existing meal or double-clicking an empty cell opens a Popup with a custom header. The header adapts between “Add meal” and “Edit meal” contexts, demonstrating how renderHeader / headerTemplate / header can be used to render context-aware popup headers in a real editing flow.
Scheduler navigation and grouping improvements
Three targeted improvements address concrete navigation and consistency pain points in longer and grouped Scheduler views.
Sticky group headers
When grouping events by date or by resource, group headers now remain visible during horizontal scroll. In longer views — a full month, multiple weeks, or a dense resource grid — headers previously scrolled off screen, leaving column context behind. With sticky group headers, the grouping structure stays visible as users scroll, making it easier to navigate without losing orientation.
Group by resource by day demo — Resources appear as the primary group with days nested below. The groupBy option accepts 'resource' or 'day' to control grouping direction, and this demo shows the sticky header behavior across a grouped multi-resource layout.
Correct month and year for multi-month viewports
When a Scheduler view spans multiple months, the displayed month and year now reflect the currently visible viewport rather than the view’s start date. Teams building views that cover several months — rolling four-week views, quarter-length planning grids, or long-horizon resource schedules — will see the correct temporal context as users scroll.
Unified day headers for single-day views
Single-day Scheduler views now use consistent day headers and support grouping by resource. Previously, single-day views used a different header type that was inconsistent with multi-day views, and custom day templates were silently ignored. This release resolves both issues: the header treatment is unified and custom day templates work correctly in single-day views.
Assign resources by dropping them onto existing events
Two new demos ship with Mobiscroll 6.1, built around a pattern that is distinct from standard external drag-and-drop: instead of dropping external items onto empty calendar cells to create new events, team members are dragged from a side list and dropped directly onto existing event cards to assign them as attendees.
The pattern addresses a common scheduling scenario: the meetings are already booked, and the task is assigning the right people to them. Each event card becomes an individual drop target. Drop validation prevents duplicate assignment to the same event and blocks drops when the same person is already booked in an overlapping time range. Valid drops add the person as an attendee chip on the event; invalid drops show an error. Assignments can be removed directly from the chip, with an undo flow to restore them.
Timeline demo — A weekly timeline with multiple resource lanes. Each meeting card shows a colored stripe and attendee chips. Team members are dragged from a side list and dropped onto meetings to assign them; the side list updates to show current assignment counts. Use cases include room-and-team coordination, project staffing, and any resource-based planning view where assignments need to be made against already-scheduled items.
Scheduler demo — The same assignment pattern in a weekly scheduler layout with resources as columns. Meetings are already scheduled; team members are assigned by dropping them onto event cards rather than empty cells. The Scheduler layout suits operations dashboards and dispatching interfaces where resource columns are the primary organizing structure.
Timeline weekday CSS classes
Timeline day columns now include weekday-specific CSS classes: .mbsc-timeline-column-mon, .mbsc-timeline-column-tue, and so on through .mbsc-timeline-column-sun. Teams that need to visually distinguish specific days — weekend columns with a different background, public holidays, reduced-hours days — can now target them with a single CSS rule rather than implementing a custom header or cell template.
Cell customization — As not only full day columns can be customized with specific styling, but also end of work-week delimiters can be shown through a custom CSS class.
Minor improvements and resolved issues
Mobiscroll 6.1 also includes a set of smaller fixes:
- Fixed a vertical scrollbar appearing in the Scheduler grid when it was not needed
- Fixed an issue where
renderTimelineDay,timelineDayTemplate, and thetimelineDayslot received the same date as argument when used with shifted days
What’s next
Multiple event drag & drop support and AI tooling for developing with Mobiscroll UI are in active development. We’ll share more as these capabilities take shape.
For a full list of changes, see the Mobiscroll 6.1 release notes.
Ready to update? Get Mobiscroll 6.1.
If your maintenance has lapsed, renew your license to access Mobiscroll 6.1 and all the releases since your last active version.
MOBISCROLL 6.1
What’s New
This release brings significant enhancements across multiple components, with a focus on richer templating capabilities, and scheduler improvements.
Angular 22 Compatibility
All Angular components have been updated to support Angular 22.
Scheduler Improvements
The Scheduler gains several UX-focused enhancements that improve navigation and clarity in longer views.
Custom Header Templating
The Datepicker, Popup, and Select components now support fully custom header rendering. Depending on your framework, this is available via renderHeader (React, jQuery, JavaScript), headerTemplate (Angular), and popupHeader / header (Vue).
All Components
New
- We updated the Angular components to make them compatible with Angular 22.
Datepicker
New
- We added templating / custom renderer support for the picker header using the
renderHeader(React, jQuery, JavaScript),headerTemplate(Angular) andpopupHeader(Vue) options.
Popup
New
- We added templating / custom renderer support for the popup header using the
renderHeader(React, jQuery, JavaScript),headerTemplate(Angular) andheader(Vue) options.
Scheduler
New
- In case of grouping (by date or by resource) we made the group headers sticky to keep them visible in long views with horizontal scroll.
- We display the month and year for the actually visible viewport, when a longer view includes days from multiple months.
- We added unified day headers and support for grouping by resource for single day views as well.
Fixed
- We fixed the vertical scrollbar of the scheduler grid, which appeared even when not necessary.
Select
New
- We added templating / custom renderer support for the picker header using the
renderHeader(React, jQuery, JavaScript),headerTemplate(Angular) andpopupHeader(Vue) options.
Timeline
New
- We added week day classes (
.mbsc-timeline-column-mon,.mbsc-timeline-column-tue, etc.) for timeline day columns to allow custom styles for specific week days.
Fixed
- We fixed an issue where the
renderTimelineDay,timelineDayTemplate,timelineDayslot received the same date as argument, when used with shifted days.
As always, we recommend updating to the latest version for the best experience and newest capabilities.
For release notes please visit our release history