When a user connects their calendar account inside your product, they move from your interface into a connection flow where they choose a provider, authenticate, and grant access. If that step looks generic — mismatched colors, an unfamiliar logo, no connection to your brand — it can feel disconnected from the trust you have built up to that point. For teams shipping polished scheduling products, that handoff matters.

Today we are introducing two updates to the Mobiscroll Connect user-facing flow. First, the authorization, provider login, consent, and error screens have been fully redesigned: consistent layout, uniform provider logos, aligned spacing, bottom-pinned action buttons, and proper light and dark appearance — for all Connect customers on every plan. Second, a new Branding feature is available on Scale and above: upload your logo, set a brand color, choose a theme, and optionally hide the “Powered by Mobiscroll Connect” footer. The result is an authorization screen that looks and feels like part of your own product.

If you are on a Scale plan, you can set this up now in the Connect dashboard. If you want to see exactly what is configurable before clicking through, the branding documentation covers every option.

A better baseline for every Connect application

The redesign affects all Connect customers, on every plan, right now — no configuration needed. The authorization screen, provider login, and error pages have been rebuilt with a consistent layout: uniform provider logos at the same size and style, spacing that holds up across screen sizes, action buttons pinned to the bottom of the screen where users expect them, and a light/dark appearance that matches the device’s system preference by default.

If your users connect calendar accounts today, they will already be seeing the updated screens. Apps without branding configured will show the redesigned default appearance — clean and consistent without requiring any changes on your side.

Make the connection screen feel like your product

The Branding feature, available on Scale and above, gives you control over the visual identity of the user-facing Connect flow. From the Branding page in the Connect dashboard, you can upload a logo (PNG, JPG, WebP, or SVG — hosted automatically), set a brand color, and choose a theme: Auto follows the user’s device preference, Always Light forces the light version, and Always Dark forces the dark version. You can also hide the “Powered by Mobiscroll Connect” footer if you prefer a cleaner presentation.

Once configured, branding is applied automatically to every authorization screen served for that application — no code changes, no integration updates. The connection is made through your app’s client_id. You set it once in the dashboard; your users see your brand every time they go through the connection flow.

A live preview in the dashboard shows you what the branded screen looks like as you configure it, so there is no need to publish and check — you see the result before saving.

Theme control is worth noting for teams with users across different environments. Setting the theme to Auto means users on a device in dark mode see a dark Connect screen without any extra work. If your product enforces a specific appearance — always light or always dark — you can match that here. The ?theme= URL parameter is still available as a per-request override if you need it.

Display name and support contact — available on every plan

It is worth separating two different things here. The Branding feature — logo, color, theme, footer control — is a Scale-and-above capability. But there are two other settings available to all Connect applications on every plan: a display name and a support contact (email address or URL). These are configured in Application Settings, not the Branding page, and they help your users understand which product they are connecting to and where to go if they have a question. You do not need a Scale plan to set these up.

If you have not set a display name or support contact for your application yet, the Application Settings documentation covers how to configure them.

How this fits with the rest of your Connect setup

Mobiscroll Connect is the calendar connectivity layer for scheduling products. It handles provider selection, authentication, and consent so your team does not have to build and maintain separate integrations for Google Calendar, Outlook, Apple Calendar, and CalDAV. The user-facing pages have always been part of that — they are the moment your users actually make the connection. The redesign and branding feature are investments in that surface specifically.

If you are also using Mobiscroll UI to build the scheduling interface in your product, branding the Connect flow means the two surfaces can read more consistently — your UI components carry your brand, and now the calendar connection screen can too. If you are using Connect with your own frontend, the same applies: the connection flow no longer feels like an unexpected visual handoff in the middle of your product.

Branding does not require any changes to how you have integrated Connect. The REST API, SDKs, and existing application configuration all work exactly as before. The only thing that changes for your users is what they see.

What’s next

We are continuing to invest in the Connect user-facing flow. Among the things we are working on next is expanding the branding surface further — giving teams more control over additional parts of the Connect screens beyond what is available today. We will share more detail when it is ready.

Another area we are continuing to refine is how the redesigned screens hold up across locales and themes as more teams use them in production. We will keep improving that over time based on what we learn.

Getting started

The redesigned screens are already live for all Connect applications — no action required. If you are on a Scale plan and want to configure branding, open the Connect dashboard and go to the Branding page for your application. Upload a logo, pick a color, set your preferred theme, and save. Your users will see the branded screen the next time they go through the connection flow.

The branding documentation covers every configurable option, accepted file formats, and how the ?theme= parameter interacts with the app-level theme setting. If you are not on Scale yet and want to see what the plan includes, you can review the Connect pricing page for a full breakdown.

If you use an AI coding assistant — Cursor, GitHub Copilot, or Claude Code — you have probably run into the same problem at some point: the AI generates code that looks plausible but uses the wrong API, mixes up components from different frameworks, or confuses Mobiscroll UI’s component code with Mobiscroll Connect’s backend API. This happens because AI tools work from training data that may not reflect the current Mobiscroll API, and without additional context, they have no reliable way to tell the two products apart.

We have put together AI tooling for both Mobiscroll UI and Mobiscroll Connect to address this directly. The tooling — LLM-optimized documentation, a hosted MCP server, and per-tool instruction files — gives your AI coding assistant accurate, structured context about the product you are actually using. This post covers what is available and how to connect it to the tools you already use.

If you want to jump straight in: for Mobiscroll UI, go to the AI integration guide for your framework — React, Angular, Vue, JavaScript, or jQuery. If you are using Mobiscroll Connect, start with the Connect AI integration guide.

Give your AI assistant the right context

The core problem with using AI coding tools against a specialized library is context. A general-purpose AI model does not know which version of Mobiscroll you are on, which framework you are targeting, or which product — UI or Connect — you are working with. Without that grounding, the suggestions it produces can look credible while being wrong in ways that take time to diagnose.

The AI tooling we have built works in three layers, each targeting a different part of the problem. The first layer is LLM-optimized documentation: structured llms.txt files that give AI tools a clear, parseable view of the Mobiscroll API and documentation. The second layer is a hosted MCP server at mcp.mobiscroll.com — no local install required — which exposes separate tool namespaces for Mobiscroll UI and Mobiscroll Connect so the AI can query Mobiscroll-provided information about the product you are using. The third layer is per-tool instruction and rules files: configuration you add to your project that provides documentation URLs, component-to-intent mappings, enforcement rules, and anti-pattern constraints specific to your tool.

Together, these layers are designed to reduce the most common failure modes: hallucinated APIs, cross-framework component mixing, and conflating UI component code with Connect’s backend API.

Setup for Mobiscroll UI

Mobiscroll UI has per-framework AI integration docs for React, Angular, Vue, JavaScript, and jQuery. The setup varies slightly by tool.

For Cursor and GitHub Copilot, you have two options: add a basic rules file that points the AI at the right documentation and component patterns, or combine that rules file with the MCP server for richer, query-driven context. For Claude Code, setup uses an installable plugin (mobiscroll@mobiscroll) rather than a rules file — the plugin connects Claude Code to the Mobiscroll tooling directly.

The rules files do more than point to documentation. They include intent-to-component mappings (so the AI understands which component to reach for in a given situation), enforcement rules that steer the AI away from known anti-patterns, and constraints that prevent cross-framework component mixing. Combined with the MCP server, they give the AI a better working context for the Mobiscroll UI API for your specific framework.

Start with the guide for your framework: React · Angular · Vue · JavaScript · jQuery

Setup for Connect

Mobiscroll Connect has its own AI integration setup, kept clearly separate from the UI tooling. The MCP server exposes a distinct Connect tool namespace — the same server, but the AI is working with Connect’s backend API surface, not the UI component layer.

For Cursor, the setup uses .mdc rules files combined with the MCP server. For GitHub Copilot, the same .mdc rules apply, with the MCP server as an optional addition for deeper context. For Claude Code, a CLAUDE.md routing file handles the configuration, again with the MCP server available as an optional layer.

This matters because Connect’s API — REST endpoints, SDK methods, authentication flows, and calendar data structures — is substantially different from anything in the UI layer. Without the right routing, an AI assistant working on a Connect integration can pull in UI component patterns that have no place in a backend context. The Connect rules files and MCP namespace are designed to keep that separation clear.

Connect supports backend SDKs for Node.js, Python, PHP, .NET, Java, Go, and Ruby, as well as a REST API. The AI integration guide covers how to connect your AI tool to the right context regardless of which SDK or integration path you are using.

Go to the Connect AI integration guide to get started.

How this fits with Mobiscroll UI and Connect

This is not a separate product — it is supporting infrastructure for Mobiscroll UI and Mobiscroll Connect, designed to work alongside the documentation and SDKs you are already using.

If you use UI and Connect together — for example, building an appointment scheduling product where Connect handles calendar connectivity and Mobiscroll UI handles the scheduling interface — the MCP server’s separate namespaces matter. Your AI assistant can work in the UI layer or the Connect layer without conflating the two, because the tooling keeps them distinct. The same is true if you use only one product: the instructions and MCP tools are scoped to the product you have configured, so the AI’s context stays accurate.

Developers already using Mobiscroll who have not yet set up an AI coding assistant, or who have found AI suggestions unreliable for Mobiscroll-specific code, are the primary audience for this tooling. The setup involves adding a rules or configuration file to your project and, optionally, connecting to the hosted MCP server — the documentation covers the specifics for each tool and product.

What’s next

We are continuing to invest in this area. One of the things we are working on next is new features and additional tools for the Mobiscroll MCP server — expanding what AI coding assistants can query and do when working with Mobiscroll UI and Connect.

Another area we are preparing is further optimization of the LLM-optimized documentation — improving the structure and coverage of the llms.txt files so AI tools can work with more of the Mobiscroll API surface accurately. We will share more when these are ready.

Getting started

The AI integration docs are available now for both Mobiscroll UI and Mobiscroll Connect. The right starting point depends on which product you are using.

If you are using Mobiscroll UI, go to the AI integration guide for your framework: React, Angular, Vue, JavaScript, or jQuery. Each guide covers setup for Cursor, GitHub Copilot, and Claude Code, with instructions for both the basic rules-file approach and the MCP server option. If you are using Mobiscroll Connect, start with the Connect AI integration guide, which covers all three tools and all supported SDK languages.

If you have questions or run into anything unexpected while setting up, the Mobiscroll documentation is the best first stop — and the support team is available if you need to go further.

If you are building a scheduling, booking, or planning product, there is a good chance your users expect it to connect to the calendar they already use — Google Calendar, Outlook, Apple Calendar, or another supported provider. Wiring those integrations yourself means dealing with separate authentication flows, different API shapes, inconsistent event data, and ongoing maintenance every time a provider changes something.

Mobiscroll Connect is the calendar connectivity layer for scheduling products. It has been available for a while now, and we have been working with early users to complete the documentation and make it ready for broader use. If you are a Mobiscroll customer who has not heard of Connect yet, this post is for you.

You can start building with the free Develop tier — up to 10 connected accounts, one application, unlimited API calls, no cost. The full documentation is ready, and a Postman collection is available so you can explore the API before committing to an implementation.

Connect users’ calendars to your application

The first thing most scheduling products need is a way to let users connect their existing calendar accounts. Connect handles the provider selection, authentication, and consent flow through user-facing Connect pages — screens your users interact with directly to link their Google Calendar, Outlook, Apple Calendar, or CalDAV account to your product.

These pages are ready to use out of the box and support localization, so users in different markets see the connection flow in a language they recognize. That matters for trust: when a user is deciding whether to grant calendar access to your product, a familiar-language consent screen reduces friction and increases confidence.

Behind the scenes, Connect normalizes the calendar and event data across providers. Your application works with a consistent data model regardless of which provider the user connected. You do not need to write per-provider parsing or handle the differences in data formats yourself.

Keep scheduling data in sync

Once a user’s calendar is connected, keeping it in sync with your product’s scheduling data is where the ongoing complexity lives. Connect supports calendar sync across supported providers, so events created or updated in your application can be reflected in a user’s external calendar, and changes from the external calendar can flow back into your product.

This matters for products where your users also manage events outside your application. If a user books an appointment through your product but then their calendar shows a conflict because another event was added externally, the experience breaks down. Sync helps keep the two sides aligned.

Check availability before confirming a time

Connect supports availability checks using connected calendar data. Before your product confirms a booking or scheduling action, it can query whether the user has a conflict in their connected calendar — helping reduce double-booking risk and scheduling conflicts for your users.

This is the kind of capability that requires building and maintaining your own provider integrations if you handle it without Connect. With Connect, it is part of the unified Calendar API that works across supported providers — you query availability through one API, and Connect handles what that means for each connected provider.

Build and debug with the tools your team already uses

Connect is available as a REST API with backend SDKs for Node.js, PHP, .NET, Python, Ruby, Go, and Java. You can use the REST API directly or pick the SDK for your backend stack.

If your team wants to explore the API before committing to a full integration, the Postman collection is a practical starting point. You can test credentials, walk through request and response flows, and validate your implementation assumptions before writing production code. It is a useful step when you want to understand how the API behaves with your actual provider setup.

Connect also includes built-in logging and an activity view so you can monitor API calls and webhooks, and debug when something does not behave as expected.

How Connect fits with Mobiscroll UI

If you are already using Mobiscroll UI for scheduling interfaces — calendar views, booking flows, resource management, timeline components — Connect is the backend calendar connectivity layer that pairs with it. Mobiscroll UI handles what your users see and interact with; Connect handles how your product connects to external calendars, authenticates users, normalizes calendar data, and keeps events in sync.

Used together, they cover the full stack of a scheduling product: the UI layer and the calendar connectivity layer. But Connect does not require Mobiscroll UI. If your team has its own frontend or is using a different component library, Connect works as a standalone backend layer. The two products are independent and composable — use one, both, or neither depending on what your product needs.

What’s next

One of the things we are working on next is a Branded Connect page. The idea is to let teams customize the calendar connection screen to show their own brand instead of Mobiscroll — so the provider selection and authentication flow your users see feels like a natural part of your product. We will share more details when it is ready.

Getting started

The best place to start is the Mobiscroll Connect documentation — it covers setup, the unified Calendar API, provider configuration, SDK guides, and the Connect pages in full. If you want to explore the API before writing any integration code, the Postman collection is a practical first step.

When you are ready to build, the free Develop tier lets you get started with up to 10 connected accounts and one application at no cost — it is the intended path for testing and initial integration. View the plans and start building when you are ready to move forward, or reach out if you have questions about fit or production scale.

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 the timelineDay slot 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 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.

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.

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:

• In Agenda, Eventcalendar, and Datepicker, the default refDate changed from ‘1970-01-01’ to today’s date
• In Datepicker, the weeks option was removed and calendarSize should be used instead
• In Timeline, eventDisplay was added under the view option with ‘exact’ | ‘fill’, while eventList is now deprecated
• In Timeline, the resolution prop was removed in favor of resolutionHorizontal and resolutionVertical

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.

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.