Bugfix release

This release addresses additional breaking API removals introduced in the Angular 22 final version that were not present in the pre-release used for our previous compatibility testing.

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

Bugfix release

This release improves usability and visual consistency across Datepicker, Calendar, Popup, Select, Scheduler, and Timeline.

We fixed focus styling in Datepicker range controls, improved anchored popup arrow positioning near container edges, and resolved unexpected scroll behavior in Select multi-select mode.

For Calendar event labels and the Scheduler/Timeline more popup, single-day events now use a cleaner time display that reduces visual noise in dense views.

We also fixed sticky event title behavior in Scheduler so titles stay aligned while scrolling.

Major release: Mobiscroll 6.0.0

Mobiscroll 6 is a new major release focused on modernization, performance, and API consistency across components.

API improvements

API options were streamlined with naming alignment and deprecations for legacy options.

Theme updates

We rewrote the themes based on the latest Windows (Fluent), Material (Material 3), and iOS (Liquid Glass) design specifications, for a cleaner, more consistent UI. To maintain backward compatibility, we added legacy theme files that can be used to keep the old theme appearance if needed.

CSS variables

We introduced a CSS variable-based styling foundation. This ensures easier theme customization and also significantly reduces the size of the CSS.

Platform updates and cleanup

Minimum supported framework and browser versions were updated. Support for IE11 and node-sass was removed, and package naming was aligned with current Angular and React ecosystem conventions.

Scheduler and Timeline day offsets

Shifted day support lets you redefine the boundaries of a day, making it possible to display hours from the previous or following day within the same view. This is ideal for night shifts, TV schedules, festival stages, or transport operations — where a 'day' doesn't start and end at midnight. For example, you can configure a view from 6 AM to the next day's 6 AM, show an 18:00–08:00 overnight shift, or extend the day slightly past midnight to capture late-night activity.

Scheduler virtualization and sticky headers

Scheduler now supports virtualized scrolling and on-demand loading with onVirtualLoading. The scheduler header and time column is now using native CSS sticky for better performance, eliminating the syncing latency during scroll.

Bugfix release

This update focuses on timezone and layout consistency for the Scheduler and Timeline components.

We fixed an issue where the current-time indicator could be positioned incorrectly around daylight saving time transitions when using Day.js. We also resolved a navigation issue where calling navigate method could scroll to an incorrect time in timezone-aware setups.

Event buffer handling was improved as well, fixing layout calculation issues that could lead to incorrect event positioning and sizing in certain scenarios.

Bugfix release

This update addresses navigation and user experience issues across Scheduler, Timeline, and Select components.

We've fixed an issue in the Scheduler and Timeline where the navigate and navigateToEvent methods were not applying timezone settings correctly, which could cause navigation to display incorrect dates in timezone-aware configurations.

The Select component now properly scrolls to the selected item when opening the dropdown, making it easier to locate the currently selected option in long lists.

Bugfix release

This update focuses on rendering improvements and performance optimizations for the Eventcalendar and Timeline components.

We've resolved a display issue in the Eventcalendar where multi-day event labels were not appearing correctly on the first day of a new week in the month view.

Timeline users will benefit from significantly improved timezone conversion performance when working with large event datasets. We also fixed an issue with short events displaying with incorrect minimum width in daily resolution views.

Bugfix release

This update focuses on stability and consistency across Agenda, Datepicker, Eventcalendar, Scheduler, and Timeline components.

Timeline and Scheduler users benefit from several rendering and behavior fixes. Navigation and dynamic min/max handling were improved. In the Timeline view, the rendered day is now passed to key rendering functions when using vertical resolution, and issues with Angular cell data and empty row handling have been resolved.

We fixed an issue where updateRecurringEvent did not update resource and slot values in all mode.

The Datepicker now behaves reliably in Firefox when clearing date ranges.

Feature and bugfix release

This release introduces new drag-out capabilities for the Eventcalendar, making it possible to sort and drop events into external lists using the dragulaDraggable and sortableJsDraggable plugins.

We've also made several improvements and fixes across Eventcalendar views. Event sorting now correctly falls back to the default order instead of alphabetical when order properties are equal. Hidden resources or time ranges are handled properly in the Scheduler and Timeline views.

For the Datepicker, we resolved an issue where re-selecting a date range could freeze the browser in Firefox, and fixed a rendering bug in Angular's month selection view.

The Select component also received a fix to ensure group wheel selections scroll correctly when no initial value is set.

Cleaner, smarter views

New options let you hide empty or invalid rows/columns in Scheduler and Timeline, so your users see only the times and resources that matter.

More ways to customize

With new cell templating and hover events for both cells and resources, you can create richer, more interactive calendar and scheduling experiences.

Seamless drag & drop

We’ve added out-of-the-box integrations for SortableJS and Dragula, making it simple to bring intuitive drag-and-drop interactions into your calendars.

Angular modernization

All our Angular demos now use standalone components, helping you follow the latest Angular best practices with less boilerplate.

Timezone improvements

Timezone demos and examples now rely on the lightweight and modern Day.js library instead of Moment.js, ensuring better performance and future compatibility.

Bugfix release

This release includes several bug fixes for the Eventcalendar and Datepicker components, addressing a range of use cases we've encountered over time.

We've resolved the resource dragging issue in the Timeline view when only a few resources are present, and also fixed the navigateToEvent functionality in the Angular component.

We also fixed the Datepicker's initial page rendering when the min and max options were set, and resolved an issue where the onActiveDateChange event wasn't triggering in the Angular component.

We improved accessibility in the Calendar view by making event count labels accessible via keyboard navigation.

This update fixes a bunch of bugs to make things smoother and more reliable. We improved the Day.js timezone plugin, and fixed the update of recurring events. You'll also see better behavior in the Timeline and Scheduler — especially with drag & drop, the Today button, and overall stability, even in Firefox and RTL mode.

This update fixes a bug in the Angular version of the Agenda and Eventcalendar popover where the onEventClick, onEventDoubleClick, and EventRightClick events weren't firing properly.

It also clears up some type definition issues with the Draggable component options that were causing build errors.

External Drag & Drop for Resources in the Timeline

We’ve added support for dragging and dropping resources in and out of the Timeline view. Now you can not only reorder resources internally, but also drag them out to a Dropcontainer or even another Timeline. You can also drop external items onto the Timeline to add them as new resources.

Timezone support with Day.js

We’ve added support for Day.js through our new plugin, allowing you to handle timezones with Day.js instead of Moment.js. Great news for fans of Day.js!

Variable Column Widths in Scheduler

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 information using events with varying widths.

Smoother Auto-Scroll During Drag

Dragging just got smoother—auto-scroll now adjusts based on pointer position: faster when you're near the edge, slower when you're further away. This makes it much easier to move items around in large views.

Better Shadow DOM Support

We’ve improved how our components work inside the shadow DOM. Lifecycle event targets are now correctly passed, and the Draggable component now has a new context option to keep dragged elements inside the shadow DOM instead of appending them to the body.

Bugfix release

We resolved several issues across multiple components, including fixed timezone offset problems in the Datepicker and corrected icon alignment for icon-only buttons in the Popup.

In case of the Scheduler/Timeline components, we addressed multiple issues, including the min and max options fix when timezone plugins were used and the date parameter in the onCellClick, onCellDoubleClick, and onCellRightClick lifecycle events.

This release also includes various minor fixes. See the full list below.

Bugfix release

We fixed an event label display issue on the calendar view, when timezones were also used.

We also fixed a number of display issues with the timeline view in RTL mode and an infinite resize cycle issue which happened in Safari.

Resource reordering in the timeline

We are introducing drag & drop reorder to the resources in the timeline view. This enables reordering the rows and setting a custom order that can be saved locally or to permanent storage, like a database.

Sorting the timeline rows

The timeline rows can be sorted by manipulating the resource array. Header sorting (asc/desc/default) can be achieved with the help of header templating and custom renderers.

Zooming the timeline view

We are introducing timeline zoom levels and are adding tools and capabilities for dynamically changing it. This covers a collection of updates and changes that enable the smooth transition between different horizontal resolutions and column widths.

Dynamic column widths

We are adding control over the column widths within the timeline view that can be changed on the fly. This comes as a set of predefined widths, updatable through CSS, that can be passed to the columnWidth property.

The resource column received a width treatment as well. We made it dynamic for hierarchical views.

Bugfix release

We fixed a bug for the Timeline and Scheduler components, where dragging events with quick, consecutive gestures caused the UI to enter in a blocked state.

The release contains other bugfixes as well, listed below.

Bugfix release

This release ships several bugfixes for the Datepicker component, handling the various use cases which we met over time.

In case of the Eventcalendar views, we fixed the display of multi-day recurring events, which did not appear if the start of the event occurrence was outside of the current view.

We also improved the accessibilty on the calendar monthly grid, used by the Datepicker and the Eventcalendar as well.

Display calendar events by exact time

We introduced a new feature which makes possible to display events on the calendar view by their exact times instead of filling the entire day cell.

This is useful for reservation calendars, where check-out and check-in can happen on the same day. Now this can be displayed with event labels ending and starting mid-day, without overlapping each other.

Templating Agenda day headers

Customizing days is now possible for the Agenda as well. The day template will be used when rendering the day headers on the Agenda list.

It is also possible to render day headers for days without events as well, using the showEmptyDays property of the Agenda view configuration.

Expand collapsed resource during drag

We added a nice little improvement for the timeline: during the drag & drop of the events, if the pointer is over a collapsed parent resource, and stays there for a while, the resource will be expanded, allowing to move the event to its child resources.

Bugfix release

This release fixes a number of bugs introduced with the virtual scroll rewrite.

Bugfix release

This release fixes an issue with the timeline week/month/quarter/year resolution, which broke in v5.31.0.

It also fixes an error with the Timeline event connections.

Event ordering

Custom event ordering was possible for the Agenda and Calendar views by specifying a custom sort function. This release brings the custom event order functionality to the Timeline and Scheduler views as well.

To make it even simpler, we added the order property to the event data, which, when specified, will be used to order the events, without specifying a custom sort function.

Timeline empty resource list and templating

Previously when an empty resource list was passed to the Timeline, the resource column was not displayed anymore. In certain cases, such as dynamic resource filtering, this was unexpected.

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.

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.

Bugfix release

This release fixes an issue with the Angular package, when used with Angular 18.

It also fixes an error with the Select component when used with group wheels.

Variable event heights

This release introduces the long awaited feature for displaying events with variable heights on the Timeline.

This is useful when the content of the events varies, for example rendering lists with various lengths or supporting multiple event types with different content templates. If you want to keep all content visible, irregardless of the event length (width), the height will dynamically change when resized and not truncate depending on the available space.

This is an experimental feature and can be enabled by setting the eventHeight: 'variable' property for the timeline inside the view option. Learn more about variable event heights.

Adding React 19 support

React 19 is about to be released, and contains a number of breaking changes, some of which affect Mobiscroll.

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

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

Bugfix release

This release fixes an issue with the Angular package, when used with the moduleResolution: 'bundler' TypeScript option.

It also includes accessibility and localization improvements and other smaller fixes.

Bugfix release

This release fixes an infinite loop for recurring rule calculation and a few fixes for the Datepicker, Select and Timeline components.

Event buffer times

Apart from the actual time of the event is often useful to define extra time before and after the event. This could mean travel time for meetings and appointments, check-in and check-out time around flights, loading and unloading time for a truck, or anything that is not an actual part of the event, but it affects the scheduling. This release adds support for presenting event buffers on the Timeline and on the Scheduler components. These buffer times are displayed with a different styling, and templating is also possible. Event buffers can be defined on the event data, while displaying the buffers can be controlled using the showEventBuffer option.

Easy row/column highlight and coloring for the timeline and scheduler

Coloring resources was already possible using the colors option, but coloring an entire resource row or column was too complicated, involving recurring rules for colors, and writing custom templates as well. Now it is as simple as setting a background property for the resource object, or adding a cssClass property as well, for styling other than the background.

Various bugfixes and improvements

As with every release, we continuously fix bugs and solve issues and improve upon what is already available. The calendar received Vue specific fixes along with improvements to the lifecycle events and drag & drop fixes for all frameworks.

Bugfix release

This release fixes the npm packages to work correctly with TypeScript.

Bugfix release

This release fixes the event calendar navigation picker in Angular, which was not working correctly in day picking mode.

It also fixes the npm packages, which were not working correctly with native Node.js imports.

Bugfix release

This release fixes the monthly and yearly recurrence, where the count option was not always working.

It also includes type fixes and improvements, and resize and scroll related fixes for the timeline.

Accessibility improvements

We have enabled localized date fields read by screen readers to improve accessibility.

Quick navigation UX for the event calendar

The quick navigation component got an overhaul to provide better control over changing the page and navigating the view. We have introduced a full date selector and updated how the month & year selection performs, changing the selection order in some cases and even omitting some parts in other cases. The defaults were also adjusted based on the view configuration.

Show more button in the timeline and scheduler

When working with a lot of events happening at or around the same time for the same resource, some scheduler columns and timeline rows got really busy. With the introduction of the maxEventStack option, you can set the maximum number of events that you would like to render at any given time. Events that are not rendered will show up in a pop-over through a “more“ button.

Fixed rows for the timeline view

Ever want to fix rows at the top of the timeline, for comparison reasons or simply for providing a container with unassigned work? Now you can with the new fixed property of the resources.

Various Vue fixes

In preparation for removing the beta label we are shipping various fixes for the Vue version of Mobiscroll.

Typescript fixes

With these new fixes and improvements we are making working with Mobiscroll in TS better with every release.

Bugfix release

This release fixes drag & drop issues on the timeline view, and the year and month picking mode of the datepicker.

It also includes other minor fixes, see the full list below.

Bugfix release

This release fixes the event calendar, where the calendar view used with labels: 'all' option did not appear at all.

It also includes other minor fixes, see the full list below.

Bugfix release

This release fixes critical issue with the date picker calendar on the latest Safari 17, where the calendar disappeared after the first month change. While this is most certainly a rendering bug in the browser, we managed to find a way to make it work.

It also includes other minor fixes, see the full list below.

Event overlap

We made event overlap prevention easy, by introducing the eventOverlap option. Beside the calendar-wide option, overlap can be controlled on resources and individual events as well.

Timeline event connection types

We added support for various connection types between timeline events: finish-to-start, start-to-finish, start-to-start, finish-to-finish.

Timeline quarter resolution

We added support for quarterly resolution on the timeline.

Drag events between slots

In version 5.26.0 we added support to control wether an event can be dragged across resources or not. We ported the same functionality to the timeline slots as well.

Bugfix release

This release fixes a number of issues with the Vue version, and issues related to the external drag & drop.

Bugfix release

This release fixes the external drag on the eventcalendar.

Fine tune drag & drop interactions

We are adding new properties to control drag & drop interactions globally (on the instance), per resource and per event. The new properties fix events in time, which means they cannot be moved in time, but only between resources and maybe instances, they fix events in length, which means they won’t be resizable and only possible to reschedule them or reassign them by moving them around and finally they can be bound to resources, which means it will not be possible to reassign them.

This fine-grain control over the drag & drop interaction enables very advanced validation and interaction schemes, with very little effort.

Timeline header and footer templating

The timeline receives a number of new templating capabilities that enables the customization of the header and footer for hour, day, week, month and year columns. By using steps that are below the hour, it is possible customize sub-hour header and footers as well.

Drag events outside of the calendar

We are introducing new capabilities to drag events out of a calendar along with a new dropcontainer component that can accept outgoing events. This is great for unscheduling work or appointments that were already scheduled and is a great extension on the previously available external drag & drop features.

Drag events between instances

Besides being able to drag events off of a calendar to an external container, we are introducing drag & drop between separate calendar instances. This opens up doors for more complex views, like two synchronized timelines for supporting advanced scheduling workflows.

Updates to the Vue Beta

Fixes and improvements land for the Vue version of Mobiscroll. With the private beta moving along we are steadily making progress towards the public beta.

Bugfix release

This release fixes the timeline infinite rendering issue, which happened in some cases when used with custom event templates.

Mobiscroll for Vue private beta

Mobiscroll for Vue 3 is in private beta. Until now the plain JavaScript version was recommended to use with Vue, but now we're shipping native Vue components which can be intergrated seamlessly into a Vue app, and uses framework specific rendering and change detection.

Bugfix release

This release fixes the display of the all-day events on the Scheduler, when resources are used. It also contains fixes for a few drag & drop related issues for the Timeline.

Timezone for events

We added support for specifying a timezone per event. This is crucial for recurring events, where the occurrences should be calculated in the timezone where the event takes place.

Timeline view change improvements

We improved the timeline to keep the visible date and time in view after a change in the view configuration.

Bugfix release

This release fixes a critical bug for the Select component in Angular and React, where the picker was not opening on input click.

Bugfix release

This release fixes the rendering of the vertical days in the timeline, when used without resources. It also comes with other bugfixes, listed below.

Adding Angular 16 support

One of the biggest changes that comes with Angular 16 is that they are dropping ngcc (Angular compatibility compiler). That requires and Ivy build that works without ngcc, so libraries built with View engine won’t work starting from Angular 16. We’ll still support the View engine distribution that will be used for projects < Angular 13. Starting from version 13 and up the Ivy distribution will be installed.

Rendering days vertically in the timeline view

The timeline view is great for scheduling and planning tasks involving many resources. Both days and times are rendered on the horizontal axis by default, but with the introduction of the resolutionVertical view option, it is possible to render days on the vertical axis for one or more resources. This gives the timeline view a second dimension for single resource views and makes working with multi-resource views easier in some situations.

Bugfix release

This release fixes the renderScheduleEventContent to work with jsx content, improves the compatibility with Tailwind CSS. It also comes with a number of other smaller bugfixes.

Bugfix release

This releases fixes the timeline rendering when changing views. We also fixed some syntax errors for IE11 and a few other bugs.

Bugfix release

This releases fixes the hiding of the cursor time indicator, which broke in 5.22.0, and other minor bugs.

Sidebar, footers and headers for the timeline view

We are introducing five new sections to the timeline that can be customized through templating and render functions. This includes the opposite end of the resource rows along with a header and footer. A new footer section that is rendered below the resource listing and footer cells for the day columns. This brings new tools and opportunities to render relevant information - like statistics, counts - just in the right place that is most accessible for users.

More control over the current time indicator and highlighted days

We have added the option to hide the current time indicator for the scheduler and timeline. Previously only possible with CSS overrides, this can be used in situations where it doesn’t make sense and adds unnecessary noise to the UI. We have also added a header highlight to the timeline view so that the current day, week, month and year is visible at a glance.

Fine grain control over timeline row heights

We have added better control over the timeline row heights. It is now easy to set a height through the .mbsc-timeline-row, .mbsc-timeline-parent and .mbsc-timeline-row-gutter classes, that control the parent rows, all rows and the spacing below the events.

Bugfix release

This release includes a number of fixes for the date picker. In v5.21.0 the calendar header broke inside the Angular component, making the picker unusable, so we fixed it. We also shipped a long awaited fix, where switching between date and date & time picking resulted in incorrect values, when timezones were used.

We also fixed a few bugs on the event calendar agenda view, which occurred when switching to the agenda view from other views.

Bugfix release

We fixed the trial version, which broke in 5.21.0.

Timeline weekly, monthly and yearly resolutions

Besides the existing hourly and daily timeline columns we added support for weekly, monthly and yearly columns as well.

New notification components for React

The exisiting notification functions resulted in a warning, when used with the React 18. To fix this, we introduced new notification components, which can be used as standard React components instead of calling functions.

Bugfix release

Customizing cell & range backgrounds along with invalids

Setting the background color for time ranges in the scheduler and timeline help with adding meaning to certain parts of the day or even full days. You can make it more descriptive by adding labels and also with the new cssClass property of the color and invalid objects you can print patterns and apply individual styling to every section or invalid range.

cssClass property for events

In a similar fashion to the cssClass that has been added to the color and invalid objects, you can now specify a custom css class for every event apart. This might be useful in cases where you don't want to write a custom template, or you want to do something like change the width of certain events in the scheduler. This new property of the event data is applied to all event calendar views.

Templating for the day header in the Timeline

We are introducing templating for the day header of the timeline view. Previously available only for the scheduler, you are now able to customize the format and content of the cells that hold the days at the top of the view. Use it to show contextual and relevant information that is tied to the day eg. statistics, summaries, task load…

Timeline event interaction UX improvements

We are continuously iterating on the UX and are re-evaluating how things should work based on how people are using the components. This time around we made a nice improvement to the timeline view where events stay in their own track when someone interacts with them rather than jumping to the top of the resource row.

Bugfix release

Bugfix release

Timeline event connections

Happy to introduce event connections to the timeline view. Linking two events together, pointing from one event to another (or even multiple events) is now possible. This helps in signaling event dependency, sequencing or any type of connection that makes sense. Event connections can be of different colors, single or bidirectional arrows and you can event customize them with CSS eg. showing dashed lines.

Navigate to event method

With the new navigateToEvent method we simplify the code where someone would want to programmatically scroll to a specific event. This was previously only possible by getting the start time of the event and using the navigate method to move the view.

Cursor time indicator for the scheduler and timeline

Besides the live time indicator that is available in the timeline and scheduler components we are now showing the time indicator where the mouse cursor is positioned. This will not just help people have a better sense of the event times they are about to create but is useful on event resize as well.

Print module improvements

We have added number of fixes and improvements to the print module making for better and nicer PDFs and printed pages across the event calendar components.

Bugfix release

Bugfix release

Bugfix release

This release fixes a number of issues that got broken in 5.18.0.

Timeline with full virtual scrolling support

With 5.18 we are launching full virtualization support for the timeline view. That means both horizontal and vertical scrolling is virtualized. The good thing is that you don't need to do anything, just update to the latest version and things will have better performance. The improvement is dramatic for views that span across long periods of time (eg. a full year view) and/or have many resources (eg. hundreds of resources).

Multiple event selection and bulk operations

With multiple selection supported on all event calendar views along with the new single selection for the agenda view, Mobiscroll is ready for custom bulk operations and advanced programatic interaction. Things like manual selection, copy, cut, paste, update are possible now thanks to these new features. Programatic selection, select all buttons will help users be more productive and perform actions on multiple events at once.

New recurring features

We have added new features to our recurring rule processor that enables the entry of more complex rules and simplifies things in some cases. When working with monthly repeats it is possible to specify multiple daily occurrences with a single rule instead of adding separate recurring events for each. The same is applicable to yearly repeats where you can add multiple days/months to the rule. The monthly repeating rules support every n-th day while yearly supports n-th weekdays of repeating months.

Accessibility review and improvements

We did an accessibility audit on our event calendar and date picker components and are shipping a number of welcome improvements. This covers general improvements, cleanup and new labels that will help users with screen readers to navigate and interact with the event calendar views and date pickers.

Bugfix release

In this release we fixed the Outlook calendar integration, until now it was able to retreive the top 10 events only. We also fixed a number of issues with the datepicker, related to the exclusiveEndDates option, and other smaller bugs.

Bugfix release

In this release we fixed a number of timezone related issues with the date & time pickers along with event calendar fixes.

Setting things up for virtual scrolling

The timeline quickly became one of our most used components because it provides a great way to visualize events, tasks and schedules across multiple resources for both the short and long term. When working with long ranges and a lot of data, the shortcomings of our initial design started to show so we needed to get back to the drawing board. In 5.17 we are shipping the first couple of steps towards full virtualization, which includes a rewritten scrolling and rendering logic. Rendering events across longer ranges shouldn't come with any performance degradation whatsoever.

Granular control over event delete

Before 5.17 event deletion performed with the 'delete' or 'backspace' buttons was controlled by the clickToCreate and dragToCreate options. This really made sense... so if someone was allowed to delete events, they should also be allowed to create events. Except, delete could not be enabled if event creation was not allowed for click & drag, which means events created by external D&D or events created by submitting a new event form were not deletable from the keyboard. With the new eventDelete option this behavior can be controlled separately.

Handling recurring event edits

Recurring events can be altered a couple of different ways which depends on the context. The default behavior when an occurrence is moved is that a new event is being created that represents the edited occurrence and an exception is added to the recurrence rule that handles the updated event. There will be other situations where someone wants to move all occurrences and update the recurrence rule eg. 'move from every Thursday to every Friday'. In other cases someone might only want to update all occurrences starting from a specific date eg. 'apply update to this and future occurrences'. For all this we have updated our recurring rule editor demo and added some helper functions like the updateRecurringEvent that will somewhat simply the implementation of a custom behavior. Working with recurring events is not easy at all, and with the helper functions and updated examples we are providing the tools and assistance you need to make your own custom logic happen.

Bugfix release

In this release we updated the authentication library used for the Google calendar integration which became deprecated and was not working with newly created projects. Besides the integration update, various accessibility improvements and fixes were made.

Bugfix release

This release fixes localization microcopy, Date picker Angular bugs and a major Timeline hierarchy issue that broke the view in some cases.

New way to invalidate values

Through digging into customer feedback we learned there were two main approaches to invalidating dates and times. People either had the invalid times at hand, which is usually the case for bookings, appointments and so on. Or they had easy access to the valid times, which is the case for opening hours or operating hour. Developers now have the choice of passing invalids where all dates and times are valid except the ones passed in the invalid option or start with everything invalidated and pass only the valid dates, times and ranges in the valid option.

Scheduler with multiple timezones

When operating across multiple timezones, scheduling resources becomes much harder. To help a little we've added means for showing multiple time tracks for different timezones. These tracks can be labeled and shown in any order to help users of the scheduler see the times in the different timezones side-by-side.

Lifecycle events to customize the event drag & drop experience

We are enabling more complex interactions through lifecycle events. Adding to the list the two new events onEventDragStart and onEventDragEnd are being triggered around the drag & drop action of external and in-calendar events. This makes it possible to manipulate the views in real time on d&d, like highlighting valid ranges where the events can be dropped or dynamically invalidate ranges where the events cannot be dropped.

Year view for the Timeline

We adding a year view to the Timeline for the sake of consistency and ease of use. This is one of the many QOL improvements that are continuously being shipped to make working with the components easier down the line.

React 18 bugfix for quick navigation controls

As React 18 got released and people started adopting it, new issues came to light. One of these issues was the quick navigation year-month picker for the calendar and event calendar components. After interacting with the picker, the UI was not removed and it overlapped the main component, which in some cases made it unusable. This and many other things can come up during new major releases of underlying frameworks, but rest assured, we've got you covered.

Bugfix release

Bugfix release

Third party calendar integration

We are shipping a new integration plugin that integrates with Google Calendar and Outlook Calendar starting with 5.15. It comes with easy to use authentication, calendar listing, query and event manipulation functions that can be utilized to load and work with events from private Google and Outlook calendars. This makes it super easy to work with events coming from third party calendars in Mobiscroll products.

Timezone support for the date picker

With the new dataTimezone and displayTimezone options that we added to the date & time, calendar and range picker it is possible to select values in one timezone, but store them in a different timezone. While the event calendar supports timezones for some time now, the conversion for date and time selection had to be written manually. Saving the data in UTC and loading it up in the users local timezone works out of the box starting with 5.15.

Bugfix release

Variable number of events in the calendar view

In previous versions the only way to increase the number of events shown in an event calendar was to increase the height of the calendar. This approach did the job, however there was a pretty big drawback... every row of the calendar grew equally even if there were no events to be displayed. To solve this problem we've introduced support for variable row heights to better utilize the vertical space of the calendar. With the help of the labels property under the view option, you can now configure 'all' or show up to x events by passing a number.

Week number in the timeline

We have added week number support to the timeline view. This will show up at the top, above the dates and is controlled through the weekNumbers property under the view option.

Visible days, workdays in the scheduler and timeline

After adding multiple day, week and month views the next piece that was missing was the possibility to define the visible days of the week. Specific days, like weekends can still be disabled and greyed out, but starting with 5.14 you can set a startDay and endDay that repeats every week and sets which days are visible.

Month view for the scheduler

We've added to the arsenal of available tools and made the configuration of single and multiple month views possible. In a similar fashion to week views, the scheduler now supports horizontally laid out months while having the hours of the day laid out vertically. This enables a heap of new use-cases.

Typing dates

Power users rejoice! One question that we heard over and over again is how to let people type into the date picker? Some times typing in a date is much faster than picking a value from either a dropdown or a calendar. The problem was that whenever someone clicked on an input, the picker opened and the input became read-only. Starting with 5.14, we removed this constraint for the desktop date pickers that enables typing into the input. We encourage letting people know what the expected format is, but basic parsing happens behind the scenes so that the date can be read into the picker and validated against the min/max & invalid/valid rules.

Bugfix release

Bugfix release

Bugfix release

Bugfix release

Bugfix release

This releases fixes issues on the scheduler and timeline, which were introduced in 5.13.0. The navigation did not work correctly for the scheduler day view, if first day of the week was not Sunday. In calendar week view the event labels were split on the first day of the month, we fixed this as well.

We also fixed a number of issues, which were present in earlier versions as well: added the missing domEvent argument property for the onEventDelete and onEventUpdate events, fixed the recurring exception date on update/delete of a recurring occurrence, when used with timezones, which was added in the wrong timezone, and other smaller fixes.

Optimized for printing

We are launching our new printing module that optimizes the event calendar for print and PDF export. Besides printer friendly CSS updates that handle rendering, improved readability among other things we are shipping an easy to use print method that can be called directly on the event calendar instance without the need for dedicated print views.

Multiple day, week, month and year views

The timeline and scheduler receives multiple day and week views, while the timeline gets multiple months as well. This can be configured within the specific view option with the possibility for custom range start dates. Controlled through the refDate your custom length ranges can start from the first of the year, month, today or any custom date.

Timeline with variable row height and equal event height

We are introducing variable row heights for resources. The new rowHeight option accepts variable height, which is the new default compared to equal heights that was the only option before this release. This uses the vertical space better and is aesthetically more pleasing. Events are rendered with equal heights and the rows grow/shrink as needed.

Custom event tooltips

We are adding tools to customize the native tooltip, use third party tooltip libraries or create fully custom tooltips for the events across all event calendar views.

Forms ready for v5

While forms were available before this release. We've added the final touches and shipped demos and examples for the v5 form elements.

Bugfix release

Supporting shifts in the event calendar timeline

We are introducing the concept of slots to the timeline view. It is a horizontally rendered grouping under the days. An alternative to times, slots can serve as another dimension besides resources.

A common use-case for slots are work shifts. You can now define daily repeating shifts and add events to them. Customization like templating and render functions are supported outof the box.

Sticky labels & other improvements

We've added a number of improvements to the event calendar like sticky event labels for the timeline and scheduler views along with various bugfixes.

Fully featured v5 select with templating and image support

All main v4 features are available now with the Mobiscroll 5 select and then some. We've added select item templating that provides means to show custom HTML, images and formatted content rather than just plain text.

More templating capability for the timeline

Along with the new slots, templating and render functions were added accordingly. Applying the same philosophy of 'providing tools for building custom experiences' we are adding templating capability to the empty space above the resource list. This previously unused space is perfect for adding contextual filtering or even headers, labels that help people navigate the resources more easily.

Bugfix release

This version fixes several bugs and performance issues for the timeline, scheduler, event calendar, agenda and date picker. It also addresses several RTL issues and provides fixes for bugs that came up for iOS 14 and earlier versions of Safari.

Multiple month, quarter and year views

We are introducing multiple month and year views to the date picker and event calendar. While the date picker already supported pages that controlled the number of months displayed horizontally it didn't support views with a grid layout. With the new multi-month and year views it is possible to render a two by three 6 month view, a three by three 9 month view or a three by four year view and so much more.

This comes in handy for summary views, quarter views, annual views for an overview of bookings, events and whatever is displayed on a calendar.

Select with empty state

We are adding null value support to the Mobiscroll select. This means that in contrast with the native option list, our select can have an initial empty state and the value can be cleared.

Bugfix release

Week picker through preset range selection

We are introducing a new range selection mode to the date picker for setting a range with predefined parameters that can be turned on through select: 'preset-range'. The first day of the selection (Mon-Sun) and the length is controlled through the firstSelectDay and selectSize options. Multiple day and week selection can be easily implemented with this.

Advanced validation for the hospitality industry

We are adding tools to the date picker that enable advanced validation and start/end selection. With the onActiveDateChange and rangeEndInvalid we are giving options to developers to build booking experiences that make sense. The rangeEndInvalid option lets people select disabled dates as endDate when booking accommodation, but doesn't allow the startDate to fall on an already booked date. This is needed to correctly validate check-in/check-out dates.

For even more customization the onActiveDateChange lifecycle event can be used that is triggered when start/end selection is cycled.

Setting up work hours in the timeline

The timeline view is useful for managing a lot of resources. It renders horizontally scrollable rows per resource and depending on the scale (hourly, daily) and the length (for a day, week or month) these rows can get long.

We are adding start and end time support to the timeline view which lets developers specify the range that is needed. Eg. for a work calendar you might only be interested in a time range from 7am to 7pm. The startTime and endTime is applied to all days in a recurring manner.

Bugfix release

This release fixes a few issues with the event calendar, agenda, timeline, scheduler and datepicker.

Resource hierarchy

We added support for displaying hierarchical resources on the timeline as collapsible groups.

Select groups

We added support for grouping data and displaying group headers on the select picker component.

Bugfix release

This release fixes an issues with timezones on the timeline and some styling problems on the Datepicker and Eventcalendar.

New time grid control

We are introducing a brand new control to the date & time picker. Boosting the available options to five controls: 'calendar' (a calendar view), 'date' (date scroller & dropdown), 'time' (time scroller & dropdown), 'datetime' (a combination of date and time) and the new 'timegrid' (an alternative to time). This is especially useful for appointment booking and in cases when there are a set of predefined time-slots and when a grid layout of available times is better a list of hours and minutes.

Filtering for the select

We are shipping filtering for the v5 select component. Client-side filtering be easily enabled through the filter option. For server-side filtering the onFilter event can be used.

Calendar cell templates

We are expanding the templating and customization options for new parts of the date picker's calendar view, the event calendar and the scheduler. Through the renderDay, renderDayContent, dayTemplate and dayContentTemplate we are enabling the customization of the calendar day cells and scheduler timeline day headers.

Timeline event summary

The newly introduced eventList property of the timeline enables a summary mode of the events. Use it when listing the events, shifts, planned work is more useful rather than having it perfectly aligned to the hours and minutes of the timeline.

Bugfix release

This release fixes a few issues with the timeline and the scheduler.

Bugfix release

This release fixes a bug in the monthly timeline rendering.

Timezone support

We are introducing built-in timezone support to the event calendar, scheduler and agenda. With the help of third-party libraries like moment-timezone and luxon you are now able to pass date & time information in any timezone and display events in another timezone. This can be set through different options on initialization or it can be dynamically changed through an external control or directly from the calendar with a dropdown or custom radio list.

No more manually accounting for timezone differences, now it is easier than ever to create scheduling, staffing and resource management across multiple timezones.

Month view for the Timeline

We have added a month view to the timeline. Use it for monthly overviews across several resources.

Bugfix release

This release fixes an AOT build error in Angular < 9.

Bugfix release

This release fixes important issues of the timeline view.

Bugfix release

This release fixes a few issues with the timeline, scheduler and datepicker.

Event calendar timeline

Happy to announce the timeline view for the event calendar. Just as smooth on both mobile and desktop as the time grid of the scheduler, the timeline is a new view that lays out the times and days horizontally at the tom, while none or more resources are rendered vertically at the left-hand side of the event calendar.

It supports drag & drop, resources and the same level of customization that you already know from the scheduler providing a new way of visualizing, working with and efficiently managing events for a significantly higher number of resources.

Bugfix release

This release fixes a few issues with the event calendar, select and date picker.

Resource header templates

With resource support added in 5.3 to the event calendar we are following up with tools to customize the look & feel. Use the templating capabilities and rendering functions for customizing how the resource headers look. Show the information that matters to the users.

Introducing the select

We have added the Select component to v5 which can be used for single and multiple value selection on both mobile and desktop. It is not as full-featured as the v4 version at the moment, but follows the same philosophy as other Mobiscroll 5 components and serves as a supporting component for building complete calendaring and scheduling experiences. More features and updates will follow in upcoming versions.

Time validation for the date & time picker

We are adding time validation support. You are now able to invalidate times, time ranges with single or recurring occurrence. This goes right next to the date validation rules that can be set through the invalid option.

Bugfixes and UX improvements

We are shipping various improvements and fixes across all components that just make the usage more stable, handle previously undiscovered edge cases and simply make the experience smoother.

More control over the scheduling experience

We are launching a couple of new features and improvements that enable the fine tunig of several aspects of the calendaring experience: control over the built-in event validation, tools for overriding the default event order, built-in support for locked events that cannot be moved, means to control the time grid granularity, an updated look for the stepper component & various other fixes and improvements.

Validating events on drag & drop

The event calendar ships with built-in validation against disabled days, times and ranges. We are adding the invalidateEvent with the new option of ‘start-end’ that only checks against the start & end of the newly placed event and lets you create them even with invalid ranges inside eg. a task that overlaps with a lunch break, or a multi-day task that starts on Friday and ends on Thursday the next week with the weekend disabled. By passing ‘strict’ no overlap is tolerated and the event will be thrown back accordingly.

Custom event order

With the eventOrder option you can override the default order of the labels, agenda items and scheduler all-day events. It expects a function that compares two events and returns an order. This way any custom ordering logic can be implemented that makes sense in the context of the calendar.

Locked events

Drag & drop can be enabled or disabled on the whole instance of the calendar. With the new editable property of the event object you can lock specific events that will stay locked even if drag & drop is enabled for all other events. This is especially helpful for fixed events and comes in real handy if user permissions and roles are in the mix.

Control over the granularity of the time grid

With the recent additions of startTime and endTime to the schedule view configuration it is possible to only show the relevant hours in the time grid. We are adding two new options for controlling the cell steps and labels. timeCellStep and timeLabelStep can be configured in the same place as start/end.

Resources for the event calendar

We are happy to launch resource support for the event calendar time grid. Resources can be assets like equipment, vehicles or people like teammates, instructors, doctors or physical spaces like conference rooms, office spaces... basically anything that needs to be scheduled. Managing a single asset is hard enough, however things become much more complex when it comes to managing multiple assets at once. This is where resources come in to enable separate tracks on the scheduler for each asset. Things like drag & drop, moving events between resources, shared events, time grid configuration on a resource basis, dynamic resource manipulation are some of the new tools we added to help build a great scheduling experience.