Release history

📅 The latest version was released two weeks ago.

🌟 Featuring multi-event drag and drop, richer event lifecycle data and Timeline resource improvements.

👍 This is release number 267 since 2011.

What's New

Drag multiple events at once

With multiple selection enabled, users can now grab one of the selected events and move the whole selection together in the Eventcalendar, Scheduler and Timeline. Drop targets and third-party drag and drop integrations also receive every dragged item, so external drops work with multi-drag too.

Richer event lifecycle data

Create, update and drag events now report every event affected by the action in a single list, which makes it easy to handle batch changes. The older update arguments are deprecated in favor of this list, and the typings of the failure events are now more accurate.

Timeline resource improvements

Parent resources can now be collapsed and expanded independently for each day in the daily vertical resolution. Hiding empty or invalid rows also works better with resource groups, and keyboard navigation through the resource hierarchy is faster and more accessible.

Polish and fixes

Event rendering at the edge of the visible time range is now correct, and the year selection in Angular paginates properly in the Eventcalendar, Agenda, Scheduler, Timeline and Datepicker.

Agenda

Fixed

  • We fixed an issue in Angular where the year selection view showed the years of the first page after paging back with the previous arrow, while the header showed the new range.

Datepicker

Fixed

  • We fixed an issue in Angular where the year selection view showed the years of the first page after paging back with the previous arrow, while the header showed the new range.

Draggable

New

  • We added the dragDataItems property to the arguments of the onExternalDrop event of the third-party drag and drop integration, holding all the dragged items, also the grabbed one.

Dropcontainer

New

  • We added the dataItems property to the onItemDrop, onItemDragEnter and onItemDragLeave events, holding all the dragged items, also the grabbed one. It contains more than one item when multiple events are dragged.

Eventcalendar

New

  • We added support for dragging multiple events at once. With selectMultipleEvents enabled, dragging a selected event now moves all the selected events together.
  • We added the eventItems property to the arguments of the onEventCreate, onEventCreated, onEventCreateFailed, onEventUpdate, onEventUpdated, onEventUpdateFailed, onEventDragStart and onEventDragEnd events. It lists all the events affected by the action, one item for each event. The events and oldEvents arguments of onEventUpdate and onEventUpdated are deprecated, use the event and oldEvent of the eventItems instead.

Fixed

  • We fixed an issue where the invalid and overlap arguments of the onEventCreateFailed and onEventUpdateFailed events were typed as always set, although only one of them is set when an event interacts with an invalid range or an overlapping event. Both are now typed as optional.
  • We fixed an issue in Angular where the year selection view showed the years of the first page after paging back with the previous arrow, while the header showed the new range.

Scheduler

New

  • We added support for dragging multiple events at once. With selectMultipleEvents enabled, dragging a selected event now moves all the selected events together.
  • We added the eventItems property to the arguments of the onEventCreate, onEventCreated, onEventCreateFailed, onEventUpdate, onEventUpdated, onEventUpdateFailed, onEventDragStart and onEventDragEnd events. It lists all the events affected by the action, one item for each event. The events and oldEvents arguments of onEventUpdate and onEventUpdated are deprecated, use the event and oldEvent of the eventItems instead.

Fixed

  • We fixed an issue where the invalid and overlap arguments of the onEventCreateFailed and onEventUpdateFailed events were typed as always set, although only one of them is set when an event interacts with an invalid range or an overlapping event. Both are now typed as optional.
  • We fixed an issue in Angular where the year selection view showed the years of the first page after paging back with the previous arrow, while the header showed the new range.

Timeline

New

  • We added support for dragging multiple events at once. With selectMultipleEvents enabled, dragging a selected event now moves all the selected events together.
  • We added the eventItems property to the arguments of the onEventCreate, onEventCreated, onEventCreateFailed, onEventUpdate, onEventUpdated, onEventUpdateFailed, onEventDragStart and onEventDragEnd events. It lists all the events affected by the action, one item for each event. The events and oldEvents arguments of onEventUpdate and onEventUpdated are deprecated, use the event and oldEvent of the eventItems instead.
  • We added the resourceCollapsePerDay option to the timeline view. When resolutionVertical: 'day' is used and the option is true, the parent resources are collapsed and expanded independently in each day, instead of in all days at once.

Fixed

  • We fixed an issue where the invalid and overlap arguments of the onEventCreateFailed and onEventUpdateFailed events were typed as always set, although only one of them is set when an event interacts with an invalid range or an overlapping event. Both are now typed as optional.
  • We fixed an issue in Angular where the year selection view showed the years of the first page after paging back with the previous arrow, while the header showed the new range.
  • We fixed an issue where an event ending exactly at the endTime of the view was not rendered with the end styling (rounded corners and resize handle), when the endTime was not midnight.
  • We fixed an issue where all the expand/collapse icons of the parent resources were in the tab order, so keyboard users had to tab through all of them before reaching the events. Only one icon is now focusable, and the up and down arrow keys move between them.
  • We fixed an issue where the parent resources were always displayed with the hideEmptyRows and hideInvalidRows options, even when they and all their child resources were empty or fully invalid. Now a parent resource is hidden when all its descendants are hidden too, also per day when resolutionVertical: 'day' is used.
  • We fixed an issue where the dragged resource was not positioned correctly when the timeline auto-scrolled while reordering resources, and moved away from the cursor and the view.
  • We fixed an issue where dragging an event reset its start time to midnight when eventDisplay was set to 'fill', the deprecated eventList was enabled, or slots were used. This was a regression in 6.1.3.

What's New

Bugfix release

This release improves event navigation accuracy in the Scheduler and Timeline, makes event connections in the Timeline render more reliably, and refines the Datepicker popup layout on larger screens.

Datepicker

Fixed

  • We fixed an issue where the calendar in the Datepicker popup scrolled on larger screens with the new themes, cutting off the last week row. If maxHeight is not set, the max height of all popups now defaults to 640px instead of 600px on screens at least 768px wide.

Scheduler

Fixed

  • We fixed an issue in single-day views where navigateToEvent() scrolled to the wrong time when displayTimezone differed from the browser's local timezone, or when the day had a daylight saving time change.

Timeline

Fixed

  • We fixed an issue in single-day views where navigateToEvent() scrolled to the wrong time when displayTimezone differed from the browser's local timezone, or when the day had a daylight saving time change.
  • We fixed an issue in shifted views where event connections were not rendered when startTime had a day offset (e.g. '19:00-1'), and where connections to events outside the displayed range were missing when only startTime or only endTime had a day offset.
  • We fixed an issue where event connections were not rendered when one of the connected events was outside the displayed startTime/endTime range.

What's New

Bugfix release

This release improves navigation reliability in timezone-aware and shifted Timeline/Scheduler views, adds keyboard and screen reader support for the Timeline resource toggle, and fixes a module resolution issue in the Angular Datepicker package.

All Components

Fixed

  • We added the missing cssClass, resource, slot and title properties to the MbscCalendarInvalid type.

Datepicker

Fixed

  • We fixed an issue in the @mobiscroll/datepicker-angular package where the exports field in package.json pointed to .js files that don't exist in the published package, breaking module resolution in bundlers that honor the exports field (Vite, esbuild, Webpack 5+).

Scheduler

Fixed

  • We fixed an issue where navigateToEvent() scrolled to the wrong day when the viewer's local timezone was behind the calendar's displayTimezone.
  • We fixed an issue in shifted single-day views where navigateToEvent() scrolled to the wrong position, or jumped to a day the event isn't on.

Timeline

Fixed

  • We improved the accessibility of the resource collapse/expand icon by making it focusable and operable with the keyboard (Enter/Space), and added the aria-expanded and aria-labelledby attributes.
  • We fixed an issue in shifted views where dragging an event threw an error when using the luxonTimezone plugin.
  • We fixed an issue where navigateToEvent() scrolled to the wrong day when the viewer's local timezone was behind the calendar's displayTimezone.
  • We fixed an issue in shifted single-day views where navigateToEvent() scrolled to the wrong position, or jumped to a day the event isn't on.
  • We fixed an issue where, in fill event display mode with resolutionHorizontal set to week, month or quarter, events could render one column wider than they should when displayTimezone differed from the browser's local timezone.

What's New

Bugfix release

This release focuses on drag & drop accuracy and timezone/DST handling across Eventcalendar, Scheduler, and Timeline.

In RTL mode, dragging an event so that the grid auto-scrolled vertically could make the drag ghost drift away from the cursor and drop on the wrong row or time — fixed in both Scheduler and Timeline.

We also fixed a set of daylight saving time bugs where dates passed to renderCell, renderHour, and renderHourFooter, as well as cell click/hover events in shifted views, were off by an hour or a day on the day of a DST change.

In the Angular Timeline, rapid wheel/touch scrolling or dragging an event near a scroll edge could freeze the drag mid-gesture and cause the scroll position to run away — this is now resolved.

Eventcalendar

Fixed

  • We fixed an issue in the Angular version where dragging an event to another day threw an error.
  • We fixed an issue where double-clicking an event threw an error when clickToCreate was enabled.
  • We fixed an issue where dragging an event out of the calendar view's "more" popup threw an error when externalDrag was enabled.

Scheduler

Fixed

  • We fixed an issue where dragging a timed event into the all-day area (or back) changed its duration when displayTimezone differed from the browser's local timezone.
  • We fixed an issue where an all-day event with dragInTime set to false jumped into the time grid instead of staying in the all-day row when dragged to a different resource.
  • We fixed an issue where, in RTL mode, dragging an event so that the grid auto-scrolled vertically made the drag ghost drift away from the cursor and land on the wrong row/time.
  • We fixed an issue in shifted views where onCellClick, onCellRightClick, onCellDoubleClick and onCellHoverIn reported the correct time but the wrong date on a shifted day.
  • We fixed an issue where the date passed to renderCell was shifted by an hour on the day of a daylight saving time change.

Timeline

New

  • We added the day property to the onResourceExpand and onResourceCollapse events, containing the date of the row the resource was toggled in, when using resolutionVertical: 'day'.

Fixed

  • We fixed an issue where expanding or collapsing a resource with resolutionVertical: 'day' set could jump the vertical scroll position, since the resource list is repeated for every day.
  • We fixed an issue where, in RTL mode, dragging an event so that the grid auto-scrolled vertically made the drag ghost drift away from the cursor and land on the wrong row/time.
  • We fixed an issue where, in RTL mode with resources exceeding the viewport height, the resource column froze and went blank when scrolling the grid vertically.
  • We fixed an issue in shifted views where onCellClick, onCellRightClick, onCellDoubleClick and onCellHoverIn reported the correct time but the wrong date on a shifted day.
  • We fixed navigateToEvent() scrolling the target resource row underneath the fixed rows when the timeline had resources with fixed: true.
  • We fixed an Angular-only issue where scrolling (especially rapid wheel/touch input) or dragging an event near a scroll edge caused freezing an event drag mid-gesture with the scroll position running away, and could also cause erratic jumps during fast scrolling.
  • We fixed an issue where the date passed to renderHour, renderHourFooter and renderCell was shifted by an hour on the day of a daylight saving time change.

What's New

Bugfix release

This release addresses drag & drop stability, controlled mode behavior, and rendering issues across Eventcalendar, Scheduler, Popup, and Timeline.

In the Eventcalendar, we fixed controlled mode so the selected date no longer drifts when switching views, and resolved a drag & drop issue that occurred after scrolling the calendar body.

In the Angular Scheduler, events no longer lose their DOM elements after an async data update — a regression that broke drag & drop and made event elements unusable as popup anchors.

We also fixed anchored Popup positioning to prevent it from overlapping the input anchor.

Eventcalendar

Fixed

  • We fixed an issue where drag & drop did not work correctly in the calendar view when all labels were displayed and the calendar body had been scrolled before starting the drag.
  • We fixed an issue where, in controlled mode, the internally tracked selected date could drift away from the value supplied through the selectedDate option when switching between views. The component no longer overwrites the controlled selectedDate on a view change.
  • We fixed an issue where the onSelectedDateChange event was fired on a view switch even though the selected date did not change. It is now only emitted when the selected date actually changes.
  • We fixed an issue where the calendar header content was duplicated, if a custom header renderer was set after initialization (JavaScript and jQuery versions).

Popup

Fixed

  • We fixed an issue in anchored display mode where the popup could overlap an input anchor element when there was not enough space to fit it above or below. The popup now stays below the anchor.

Scheduler

Fixed

  • We fixed an issue in the Angular scheduler view where events rendered after the initial load (e.g. when the event or resource data was updated asynchronously) lost their DOM elements on the next re-render. This broke drag & drop (the drag froze after the first movement) and made the event element passed to the onEventClick handler unusable as a popup anchor.
  • We fixed an issue where the calendar header content was duplicated, if a custom header renderer was set after initialization (JavaScript and jQuery versions).

Timeline

Fixed

  • We fixed the automatic vertical scrolling when an external item was dragged into the timeline grid.
  • We fixed an issue where a timed event completely outside the visible hour range was still rendered with a minimum width instead of being hidden.
  • We fixed an issue where a multi-day event starting after the visible end time was incorrectly positioned on the next day instead of at the beginning of the first visible hour.
  • We fixed an issue where the calendar header content was duplicated, if a custom header renderer was set after initialization (JavaScript and jQuery versions).

What's New

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.

All Components

Fixed

  • Fixed compatibility with Angular 22, which removed the deprecated ComponentFactoryResolver API.

What's New

What's new

This release brings significant enhancements across multiple components, with a focus on richer templating capabilities, and scheduler improvements.

Angular 22 Compatibility

All Angular components have been updated to support Angular 22.

Scheduler Improvements

The Scheduler gains several UX-focused enhancements that improve navigation and clarity in longer views.

Custom Header Templating

The Datepicker, Popup, and Select components now support fully custom header rendering. Depending on your framework, this is available via renderHeader (React, jQuery, JavaScript), headerTemplate (Angular), and popupHeader / header (Vue).

All Components

New

  • We updated the Angular components to make them compatible with Angular 22.

Datepicker

New

  • We added templating / custom renderer support for the picker header using the renderHeader (React, jQuery, JavaScript), headerTemplate (Angular) and popupHeader (Vue) options.

Popup

New

  • We added templating / custom renderer support for the popup header using the renderHeader (React, jQuery, JavaScript), headerTemplate (Angular) and header (Vue) options.

Scheduler

New

  • In case of grouping (by date or by resource) we made the group headers sticky to keep them visible in long views with horizontal scroll.
  • We display the month and year for the actually visible viewport, when a longer view includes days from multiple months.
  • We added unified day headers and support for grouping by resource for single day views as well.

Fixed

  • We fixed the vertical scrollbar of the scheduler grid, which appeared even when not necessary.

Select

New

  • We added templating / custom renderer support for the picker header using the renderHeader (React, jQuery, JavaScript), headerTemplate (Angular) and popupHeader (Vue) options.

Timeline

New

  • We added week day classes (.mbsc-timeline-column-mon, .mbsc-timeline-column-tue, etc.) for timeline day columns to allow custom styles for specific week days.

Fixed

  • We fixed an issue where the renderTimelineDay, timelineDayTemplate, timelineDay slot received the same date as argument, when used with shifted days.

What's New

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.

Calendar

New

  • Non all-day event labels now use shortened round-hour times in AM/PM format (for example 1 AM instead of 1:00 AM) to save space in compact views.

Datepicker

Fixed

  • We fixed the focus styling of calendar controls where the outline could be cut off when range controls were visible.
  • We fixed anchored arrow positioning near popup edges.

Popup

Fixed

  • We fixed anchored arrow positioning near popup edges.

Scheduler

New

  • The event popover now shows only the time (without the date) for single-day events, reducing visual clutter.

Fixed

  • We fixed sticky event titles so they correctly follow grid container scrolling.

Select

Fixed

  • We fixed anchored arrow positioning near popup edges.
  • We fixed an issue where multi-select could scroll unexpectedly when multiple values were selected.

Timeline

New

  • The event popover now shows only the time (without the date) for single-day events, reducing visual clutter.

What's New

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.

All Components

New

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

Fixed

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

Removed

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

Changed

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

Agenda

Changed

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

Datepicker

Removed

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

Changed

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

Eventcalendar

Fixed

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

Changed

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

Forms

Removed

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

Popup

Removed

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

Scheduler

New

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

Fixed

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

Changed

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

Timeline

New

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

Removed

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

Changed

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

What's New

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.

Scheduler

Fixed

  • We fixed an issue where the current-time indicator could appear in the wrong position around DST changes when using Day.js.
  • We fixed an issue where event length around DST transitions was calculated incorrectly when using the dayjsTimezone plugin.
  • We fixed an issue where calling the navigate method could scroll to an incorrect time when timezones were used.
  • We fixed an issue where event buffers were not properly considered during layout calculation, resulting in incorrect event positioning and sizing in some cases.

Timeline

Fixed

  • We fixed an issue where the current-time indicator could appear in the wrong position around DST changes when using Day.js.
  • We fixed an issue where event length around DST transitions was calculated incorrectly when using the dayjsTimezone plugin.
  • We fixed an issue where calling the navigate method could scroll to an incorrect time when timezones were used.
  • We fixed an issue where event buffers were not properly considered during layout calculation, resulting in incorrect event positioning and sizing in some cases.

What's New

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.

Scheduler

Fixed

  • We fixed an issue in the navigate and navigateToEvent methods where timezone was not being applied correctly, causing navigation to potentially display incorrect dates when using timezone-aware configurations.

Select

Fixed

  • We fixed an issue where the Select component didn't scroll to the selected item when opening the dropdown, making it difficult to locate the currently selected option in long lists.

Timeline

Fixed

  • We fixed an issue in the navigate and navigateToEvent methods where timezone was not being applied correctly, causing navigation to potentially display incorrect dates when using timezone-aware configurations.

What's New

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.

Eventcalendar

Fixed

  • We fixed an issue where multi-day event labels were not appearing on the first day of a new week when the event ended on that day, causing labels to be hidden on overflow days in the month view.

Timeline

Fixed

  • Optimized timezone conversion performance when processing large numbers of events with timezone support enabled.
  • We fixed an issue where short events displayed with incorrect minimum width in daily resolution views, even when falling outside the visible time range defined by startTime and endTime options. Also improved the event minimum width calculation for larger horizontal resolutions.

What's New

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.

Agenda

Fixed

  • We fixed the updateRecurringEvent function wasn't updating the resource and slot properties in case of "all" update mode.

Datepicker

Fixed

  • Resolved an issue where clearing the selected range from the Start tab in the Date Range Calendar could cause the browser tab to freeze in Firefox.

Eventcalendar

Fixed

  • We fixed multi-day event labels no longer display an extra border and background on the last visible day when the event was focused.
  • We fixed the updateRecurringEvent function wasn't updating the resource and slot properties in case of "all" update mode.

Scheduler

Fixed

  • We fixed an issue where the scheduler header incorrectly displayed weekdays when resources were dynamically loaded.
  • We fixed the updateRecurringEvent function wasn't updating the resource and slot properties in case of "all" update mode.
  • We fixed the navigate method to correctly scroll to the specified date and time on the first call.
  • We fixed an issue where the min and max options did not update dynamically when their values changed, causing invalid areas to not display correctly.

Timeline

New

  • Added the rendered day as a parameter to the renderSidebar, and renderResourceEmpty functions when verticalResolution: 'day' is applied.

Fixed

  • In Angular cell templates, the args.date parameter was missing the specific cell time.
  • We fixed an issue where built-in button texts weren't updating when the locale changed.
  • We fixed the updateRecurringEvent function wasn't updating the resource and slot properties in case of "all" update mode.
  • We fixed an issue with the hide empty rows feature, which did not work correctly with hierarchical resources and vertical days.
  • We fixed the navigate method/selectedDate update to correctly scroll to the specified date and time on the first call.
  • We fixed the navigate method/selectedDate update to correctly scroll to the specified date during external drag interactions.
  • We fixed an issue where the min and max options did not update dynamically when their values changed, causing invalid areas to not display correctly.
  • We fixed an issue where changing the parent resource row heights was not working when variable event heights were used.
  • Resolved an issue where the renderSidebar function was not displayed when resources were not defined.

What's New

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.

Agenda

Fixed

  • Fixed event sorting to fallback to default ordering instead of alphabetical when event order properties are equal.

Datepicker

Fixed

  • We fixed an issue where re-selecting a date range in the Date Range Calendar could cause the browser tab to freeze in Firefox.
  • Resolved an issue in Angular, where multiple year titles appeared in the month selection view when using the page option.

Eventcalendar

New

  • We added support for dragging items out of the Calendar, enabling sorting and dropping into external lists through the dragulaDraggable and sortableJsDraggable plugins.

Fixed

  • Fixed event sorting to fallback to default ordering instead of alphabetical when event order properties are equal.
  • External event drag operations no longer throw errors in views that don't support event drag & drop (such as the Year view or in cases where page size is increased).

Scheduler

New

  • We added support for dragging items out of the Scheduler, enabling sorting and dropping into external lists through the dragulaDraggable and sortableJsDraggable plugins.

Fixed

  • We fixed the navigation behavior to correctly handle cases when the target date or resource is hidden.
  • The hideInvalidColumns property of the view option now correctly hides resource headers in Angular when the scheduler is configured to group by date.
  • Fixed event sorting to fallback to default ordering instead of alphabetical when event order properties are equal.

Select

Fixed

  • We fixed an issue where selecting a group wheel value failed to scroll the second wheel if no initial value was set.

Timeline

New

  • We added support for dragging items out of the Timeline, enabling sorting and dropping into external lists through the dragulaDraggable and sortableJsDraggable plugins.

Fixed

  • Fixed event sorting to fallback to default ordering instead of alphabetical when event order properties are equal.
  • Invalid and color ranges inside non-displayed parts of the timeline are now hidden correctly (previously they were still rendered with minimum with, e.g., when falling fully within the startTime/endTime range).

What's New

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.

All Components

New

  • Angular demos and examples now showcase standalone components, reducing boilerplate and aligning with modern Angular best practices.
  • Timezone demos and examples now use Day.js instead of Moment.js, improving performance and maintainability.

Fixed

  • Corrected the type for themeVariant in the global setOptions function for more consistent type handling.

Agenda

Fixed

  • Resolved an issue with the getEvents method where the first day of the view was incorrect when called without parameters.

Datepicker

Fixed

  • Corrected the Polish translation of the Set button.

Eventcalendar

New

  • Added integration plugins for third-party drag-and-drop libraries: dragulaDraggable (for Dragula) and sortableJsDraggable (for SortableJS).

Fixed

  • Resolved an issue with the getEvents method where the first day of the view was incorrect when called without parameters.
  • Events are now properly passed to the day template in the Vue component.

Scheduler

New

  • Added integration plugins for third-party drag-and-drop libraries: dragulaDraggable (for Dragula) and sortableJsDraggable (for SortableJS).
  • Added the hideEmptyColumns property to the scheduler view configuration to hide columns without events.
  • Added the hideInvalidColumns property to the scheduler view configuration to hide fully invalid columns.
  • Added the renderCell / cellTemplate / cell slot for customizing scheduler cells.
  • Added the onCellHoverIn / onCellHoverOut events for scheduler cells.
  • Added the onResourceHoverIn / onResourceHoverOut events for scheduler resource cells.

Fixed

  • Resolved an issue with the getEvents method where the first day of the view was incorrect when called without parameters.
  • Addressed an error when using maxEventStack together with eventOrder.
  • Corrected the CSS class of the schedule day column when the firstDay option was changed.
  • Fixed an issue where short event durations caused the buffer time to display incorrectly.

Timeline

New

  • Added the hideEmptyRows property to the timeline view configuration to hide rows without events.
  • Added the hideInvalidRows property to the timeline view configuration to hide fully invalid rows.
  • Added integration plugins for third-party drag-and-drop libraries: dragulaDraggable (for Dragula) and sortableJsDraggable (for SortableJS).
  • Added the renderCell / cellTemplate / cell slot for customizing timeline cells.
  • Added the onCellHoverIn / onCellHoverOut events for timeline cells.
  • Added the onResourceHoverIn / onResourceHoverOut events for timeline resource cells.

Fixed

  • Resolved an issue with the getEvents method where the first day of the view was incorrect when called without parameters.
  • Collapsing a parent resource and updating items at the end of the resource list now correctly triggers the onVirtualScroll event.
  • Changing the timeline resolution now consistently triggers the onVirtualScroll event.
  • Addressed an error when using maxEventStack together with eventOrder.
  • Fixed an issue where short event durations caused the buffer time to display incorrectly.

What's New

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.

Agenda

Fixed

  • We fixed an issue where the agenda was not scrolled to the correct date after loading the events.

Datepicker

Fixed

  • We fixed an issue where the calendar opened to the wrong month if a max date was set, and the selected date was on the last available day, with a time other than midnight.
  • We fixed an issue where the picker was not opened on click, when initialized on an ion-input element (since Ionic v8.5.6).
  • We fixed an issue in the Angular component where the onActiveDateChange event did not trigger when switching between the start and end date in the range picker.
  • Resolved an issue where input-related options (ariaLabel, disabled, endIcon, startIcon, placeholder) where default values cannot be updated in the Angular component.

Eventcalendar

Fixed

  • Added keyboard access support to the event count labels for improved accessibility.

Forms

Fixed

  • We fixed the initial height of the textarea when the default value contained multi-line text, affecting both jQuery and vanilla JavaScript components.

Scheduler

Fixed

  • We fixed the autoscroll feature to not to scroll vertically when drag in time is disabled.

Timeline

Fixed

  • We corrected a resource drag position miscalculation when dragging over the last resource and the component height exceeded the total height of the resources.
  • We fixed the autoscroll feature to not to scroll when the event is resized or dragged within a fixed resource, or when drag in time or drag between resources is disabled.
  • We fixed the navigateToEvent method which did not work correctly in Angular, when used with variable height events.

What's New

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.

All Components

Fixed

  • Resolved multiple issues with the Day.js timezone plugin, including preserving millisecond values when creating dates, maintaining timezone information in ISO 8601 strings (instead of converting to UTC), and correctly parsing date strings that include timezone offsets.
  • Corrected a bug in the updateRecurringEvent function where the until value was incorrect when updating 'following' occurrences.

Datepicker

Fixed

  • In the Vue version, addressed an issue where hovering in or out of the input field while typing caused the input value to reset.

Scheduler

Fixed

  • External drop now correctly assigns the event resource when the target calendar has only one resource.
  • The "Today" button now properly scrolls the view to the current date and time.
  • Resolved a bug in RTL mode where column calculations during drag & drop and navigation were incorrect.
  • Addressed an error that occurred during the initial loading of the Scheduler in Firefox.

Timeline

Fixed

  • When dragging external resources, ensured that generated IDs are assigned only to newly created resources and not to the original drag data.
  • External drop now correctly sets the event resource if the destination calendar has a single resource.
  • The "Today" button now scrolls correctly to the current date and time.

What's New

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.

Agenda

Fixed

  • We fixed the onEventClick, onEventDoubleClick and onEventRightClick which were not firing in Angular.

Eventcalendar

Fixed

  • Fixed a bug where onEventClick, onEventDoubleClick, and onEventRightClick didn't work from the event popover in Angular.
  • Cleaned up the MbscDraggableOptions type definition to avoid errors caused by hidden properties.
  • Gave priority to external drag data over extendDefaultEvent, making it easier to work with external events.

Scheduler

Fixed

  • Gave priority to external drag data over extendDefaultEvent, making it easier to work with external events.
  • Cleaned up the MbscDraggableOptions type definition to avoid errors caused by hidden properties.

Timeline

Fixed

  • Gave priority to external drag data over extendDefaultEvent, making it easier to work with external events.
  • Cleaned up the MbscDraggableOptions type definition to avoid errors caused by hidden properties.

What's New

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.

Agenda

New

  • We added support for the Day.js library through our dayjsTimezone plugin, making timezone handling possible with Day.js.

Datepicker

New

  • We added support for the Day.js library through our dayjsTimezone plugin, making timezone handling possible with Day.js.

Draggable

New

  • We added the context option so you can control where dragged elements are added in the DOM.

Eventcalendar

New

  • We added support for the Day.js library through our dayjsTimezone plugin, making timezone handling possible with Day.js.

Fixed

  • We fixed an error that occurred with external drag when the calendar was inside a shadow DOM.
  • When using the context option, dragged elements are now appended to the correct context element instead of the document body.
  • Fixed a bug where navigating to a date didn't work right after initializing or switching views.

Popup

Fixed

  • Anchored positioning now works properly when the anchor is inside a shadow DOM..

Scheduler

New

  • We improved the scrolling speed for both horizontal/vertical event dragging and resource reordering.
  • We added support for variable column widths, which you can set via CSS—for individual resources or specific weekdays.
  • We added the onResourceClick, onResourceDoubleClick, and onResourceRightClick lifecycle events.
  • We added support for the Day.js library through our dayjsTimezone plugin, making timezone handling possible with Day.js.
  • We improved the view to keep the horizontal and vertical scroll position at the previous date and time values when changing the view.

Fixed

  • We fixed the external drag, which resulted in error when the calendar was inside shadow DOM.
  • When the context option is specified for the calendar, the dragged elements will now be appended to the specified context element instead of the document body.
  • We fixed an issue where navigating to a date did not work right after initialization or a view change.

Timeline

New

  • We improved the scrolling speed for both horizontal/vertical event dragging and resource reordering.
  • We added support for external drag & drop on resources in the timeline view..
  • We added the onResourceDragLeave, onResourceDragEnter lifecycle events, triggered when a resource enters or leaves the timeline.
  • We added the onResourceCreate, onResourceCreated, onResourceDelete and onResourceDeleted lifecycle events for handling resources being created or deleted via drag & drop
  • We added the onResourceClick, onResourceDoubleClick, and onResourceRightClick lifecycle events.
  • We added support for the Day.js library through our dayjsTimezone plugin, making timezone handling possible with Day.js.

Fixed

  • We fixed the external drag, which resulted in error when the calendar was inside shadow DOM.
  • When the context option is specified for the calendar, the dragged elements will now be appended to the specified context element instead of the document body
  • We fixed the vertical day resolution, which did not appear correctly in Angular.
  • We fixed an issue where navigating to a date did not work right after initialization or a view change.
  • We fixed a print view bug where the header columns were not always in sync with the grid columns.

What's New

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.

Datepicker

Fixed

  • We fixed an issue where in the case of range selection with the timezone plugin, the timezone offset was applied incorrectly when the input field was updated manually.

Popup

Fixed

  • We fixed the incorrect icon alignment in case of icon only buttons.

Scheduler

Fixed

  • We fixed the error that occurred when navigating through the header calendar to a day that wasn't displayed(when the startDay and endDay view properties were used).
  • We fixed the min and max options when timezones are used.
  • We fixed an issue where the external drag data overwrote the extendDefaultEvent.

Timeline

Fixed

  • We fixed an issue with variable event heights, where the height of the resource rows couldn't be reduced under a certain value (defined by the default event height).
  • We fixed the error that occurred when navigating through the header calendar to a day that wasn't displayed(when the startDay and endDay view properties were used).
  • We fixed the date parameter in the onCellClick, onCellDoubleClick, and onCellRightClick lifecycle events, which previously pointed to the wrong date when resolutionVertical was used.
  • We fixed the min and max options when timezones are used.
  • We fixed an issue where the external drag data overwrote the extendDefaultEvent.
  • We fixed the onVirtualLoading lifecycle event where the viewStart - oldViewStart, viewEnd - oldViewEnd, resourceStart - oldResourceStart and resourceEnd - oldResourceEnd parameters incorrectly returned identical values.

What's New

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.

Eventcalendar

Fixed

  • We fixed the display of the event labels, where overlap was not correctly detected between all-day and non all-day events, when timezones were used.

Forms

Fixed

  • We added some missing native input attributes to the input options type, to properly compile with Typescript and React 19.

Scheduler

Fixed

  • We fixed the time indicator wich caused the component not to load when used with Angular server side rendering.

Timeline

Fixed

  • We fixed the time indicator wich caused the component not to load when used with Angular server side rendering.
  • We fixed an issue where the border of the last cells in a row appeared incorrectly.
  • We fixed an issue where the arrow icon of the parent resource was displayed incorrectly in RTL mode in Angular.
  • We fixed an issue where the sidebar header was positioned incorrectly when not used with hourly or daily horizontal resolution.
  • We fixed border styling issues with the sidebar and footer in RTL mode.
  • We fixed the drag & drop with auto-scroll and external drag, where the drag froze after scrolling a while, and dragging the event out of the calendar.
  • We fixed an issue which resulted on infinite resize checks on Safari on certain screen sizes.

What's New

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.

Datepicker

Fixed

  • We fixed an issue where were not all times were selectable on the time scroller on days when daylight saving time change occurs.

Eventcalendar

Fixed

  • We fixed an issue where the Angular component did not work correctly with custom label templates (regression introduced in v5.32.0).

Popup

Fixed

  • We fixed an issue where the popup could be closed with 2 clicks only, if another popup or a picker was also opened from the first popup.

Timeline

New

  • We improved the readability of resource columns for hierarchies. The width of the resources is dynamically adjusted based on the maximum navigated hierarchy depth.
  • We added the onVirtualLoading lifecycle event, which is triggered when a new virtual page is loaded, both on horizontal and vertical scrolling. This enables on-demand loading of events and resources as users scroll through the timeline.
  • We added the resourceReorder property to the timeline view configuration. When set to true, drag handles appear on each resource, and enables reordering through drag & drop. When the drag starts, the onResourceDragStart, when it ends, the onResourceDragEnd events will fire. When the order of a resource is changed after drop, the onResourceOrderUpdate lifecycle event will be fired with the new sort order.
  • We added the reorder property to the resource object, which defines whether a resource can be dragged from its current position in case resourceReorder is enabled.
  • We added the zoomLevels property to the timeline view configuration which enables the configuration of multiple zoom stages. It accepts an array of key, object pairs that describe each zoom level that is supported. The current level can be set using the newly introduced zoomLevel option, by setting the key of the previously defined levels from the zoomLevels object.
  • We added the columnWidth property to the timeline view configuration to set overall timeline column widths. If not set, the default widths apply, which depend on the resolution. The following presets are supported: 'xxsmall' - 24px (1.5em), 'xsmall' - 48px (3em), 'small' - 72px (4.5em) 'medium' - 96px (6em), 'large' - 120px (7.5em), 'xlarge' - 144px (9em), 'xxlarge' - 168px (10.5em) and 'xxxlarge' - 192px (12em). The preset widths can be overridden if necessary through their CSS classes.

Fixed

  • We fixed an issue where events inside a resource with event creation disabled were not draggable.

What's New

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.

Agenda

Fixed

  • We fixed an issue where the day headers were empty when used with Vue.
  • We fixed an issue where the onEventRightClick and onEventDoubleClick events were not fired in Vue.
  • We fixed an issue where the list was not scrolled to the initial date, when the events were loaded async.

Datepicker

Fixed

  • We fixed a bug that threw an error when trying to parse with a custom date format the initial value of a range using distinct start and end inputs.
  • We added the missing separator option to the Angular component.
  • We fixed an issue where the calendar navigation arrow was not always working in case of range picking with a minRange set.

Eventcalendar

Fixed

  • We fixed an issue where the month labels were not correct in year view, when the Jalali calendar was in use.
  • We fixed an issue where the onEventRightClick and onEventDoubleClick events were not fired from the event popover in Vue.

Forms

Fixed

  • We fixed an issue where the checked property of the Switch and Checkbox instance was not yet holding the correct value inside the native change event (jQuery and JavaScript versions).

Scheduler

Fixed

  • We fixed an issue, where event creation was possible on some parts of all-day invalid days, when timezones were used.
  • We fixed the target element inside the onEventClick event, when the click was fired using the keyboard.

Timeline

Fixed

  • We fine-tuned the functionality where a collapsed parent resource automatically expands when dragging an event over it — this now only occurs if eventCreation is set to false.
  • We fixed an issue where the UI froze after dragging events quickly.
  • We fixed the target element inside the onEventClick event, when the click was fired using the keyboard.

What's New

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.

Agenda

Fixed

  • We fixed an issue, where multi-day recurring events did not appear on the view, if the occurrence started outside of the current view.

Datepicker

Fixed

  • We fixed a bug where validation selected an invalid range when the invalid option changed dynamically.
  • We fixed a bug that constantly navigated the calendar back to the current month when the invalids were updated on mobile
  • We fixed an issue that navigated the datepicker to the next month when two months were shown and the range started on the second page
  • We pass the ariaLabel option to the modal picker as well to ensure an accessible label.
  • We improved the accessibility on the calendar days: the day buttons are announced with VoiceOver, and there's only one control on a day to interact with in TalkBack.
  • We corrected the 'preset-range' validation logic to always comply with the selectSize option and do not change the length of the selection
  • We fixed an issue where the datepicker automatically selected a value when it was opened.
  • We fixed a bug that prevented to clear the datepicker selection when the picker was open.
  • We fixed a bug where the value was not written to the input when the date and time controls were used and the time part was changed.
  • We fixed a bug that prevented the clear buttons on the range picker labels to clear the selection.
  • We fixed a bug where the change event was fired initially even though the value did not change when using the rangepicker with start and end inputs in JavaScript or jQuery.

Eventcalendar

Fixed

  • We improved the accessibility on the calendar days: the day buttons are announced with VoiceOver, and there's only one control on a day to interact with in TalkBack.
  • We fixed an issue where recurring event times were modified to the start and end of the day, when used with the eventDisplay: 'fill' view option.

Popup

New

  • We added the ariaLabel option to specify an accessible label for the popup.

Fixed

  • We fixed an issue where the popup was not displayed correctly if the touchUi option was changed dynamically.
  • We fixed an issue where the popup was not displayed correctly in full screen mode with the iOS theme.
  • We fixed an issue where the popup blinked shortly after closing in top or bottom display mode.

Scheduler

Fixed

  • We fixed an issue, where multi-day recurring events did not appear on the view, if the occurrence started outside of the current view.
  • We fixed an issue where the multiple timezones were not displayed correctly in some cases. ( #510 )

Select

Fixed

  • We pass the ariaLabel option to the modal picker as well to ensure an accessible label.
  • We fixed an issue with multiple selections where the initially selected values were not displayed as tags in the input field, when used with plain JavaScript or jQuery.

Timeline

Fixed

  • We fixed an issue, where multi-day recurring events did not appear on the view, if the occurrence started outside of the current view.
  • We fixed an issue, where the height of the parent resources was not adjustable with css, when used with variable event heights.

What's New

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.

All Components

New

  • We added TypeScript types to the Vue component props, so compile time type check and IDE autosuggest works now as well.

Fixed

  • We fixed the monthly and yearly recurrence, where occurrences only were calculated from today, when no from date was specified.

Agenda

New

  • We implemented the renderDay / dayTemplate / day slot for the Agenda as well to customize the day headers on the list.
  • We added the showEmptyDays property to the Agenda view option to be able to show the day header for dates without events as well.

Fixed

  • We fixed an issue where the order of the event was wrong when recurring events were present and timezones were also used.

Datepicker

Fixed

  • We fixed an issue where validation did not work correctly on the time scroller with valid or invalid ranges spanning over multiple days.

Eventcalendar

New

  • We added the eventDisplay property to the view configuration, to display the labels in exact time.

Fixed

  • We fixed an issue where the order of the event was wrong when recurring events were present and timezones were also used.

Forms

Fixed

  • We fixed an issue where the text undefined appeared for the Textarea placeholder in Angular, when there was no placeholder set.
  • We fixed the segmented control where the value was selected at the wrong position when using drag select with the iOS theme.

Scheduler

New

  • We added the oldResourceObj and resourceObj properties to the onEventUpdate lifecycle event arguments to easily access the source and destination resource objects.
  • We added the resourceObj property to the onEventCreate, onEventCreated, onEventDoubleClick, onEventDragEnd, onEventDragStart, onEventHoverIn, onEventHoverOut, onEventRightClick and onEventUpdated lifecycle event arguments to easily access destination resource object.

Fixed

  • We fixed an issue where the order of the event was wrong when recurring events were present and timezones were also used.

Select

Fixed

  • We fixed an issue where the theme could not be set properly for the picker, and the global theme was used instead.

Timeline

New

  • We improved the drag functionality - when dragging an event over a collapsed parent resource row and pausing for more than one second without releasing, the resource automatically expands to reveal its children.
  • We added the oldResourceObj, oldSlotObj, resourceObj and slotObj properties to the onEventUpdate lifecycle event arguments to easily access the source and destination resource and slot objects.
  • We added the resourceObj and slotObj properties to the onEventCreate, onEventCreated, onEventDoubleClick, onEventDragEnd, onEventDragStart, onEventHoverIn, onEventHoverOut, onEventRightClick, onEventUpdated, onResourceCollapse and onResourceExpand lifecycle event arguments to easily access destination resource and slot objects.

Fixed

  • We fixed an issue where the order of the event was wrong when recurring events were present and timezones were also used.
  • We fixed an issue in print view, where sometimes the last few resources were cut off.
  • We fixed an issue with the virtual scroll, where the new rows were not loaded in time during scroll, if there were resources with a lot of event rows.
  • We fixed an issue where the timeline went back to the previous month on view change, when week resolution was used with month or year view.
  • We fixed an issue which caused runtime error when event connections and maxEventStack were used together.

What's New

Bugfix release

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

Timeline

Fixed

  • We fixed an issue where all-day events, invalid and colored ranges incorrectly disappeared in hourly resolution during horizontal scroll.
  • We fixed an issue where events were not displayed on the last column with week/month/quarter/year resolution.
  • We fixed the maxEventStack functionality, which resulted in error when used with variable event heights.

What's New

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.

Timeline

Fixed

  • We fixed the week/month/quarter/year resolution, which broke with the virtual scroll performance improvements.
  • We fixed an issue with event connections, where an error was thrown, if the target event was out of view.

What's New

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.

All Components

Fixed

  • We added the version field to the package.json file of the esm5 folder inside the npm packages, required by some bundlers, e.g. webpack with federated modules.

Agenda

New

  • We added the order property to event data, to easily customize the order of the events.

Datepicker

Fixed

  • We fixed the French translation of the rangeStartLabel option.
  • We fixed an issue where the onPageLoaded event was not fired after page change, with yearly or multiple month picker.

Eventcalendar

New

  • We added the order property to event data, to easily customize the order of the events.

Fixed

  • We fixed an issue where passing an event handler to the onInit lifecycle event threw an ExpressionChangedAfterItHasBeenCheckedError exception.
  • We fixed an issue where the onPageLoaded event was not fired after page change, with yearly or multiple month view.

Scheduler

New

  • We added the order property to event data, to easily customize the order of the events.
  • We added the eventOrder option to the scheduler view as well.
  • We pass the day paramater to the resource template, when resources are displayed grouped by date.

Fixed

  • We fixed an issue where dragging events from the "more" popup resulted in error, when external drag was enabled.

Timeline

New

  • We improved the performance of the virtual scroll.
  • We added the order property to event data, to easily customize the order of the events.
  • We added the eventOrder option to the scheduler view as well.
  • We added templating to the timeline empty resource column through the renderResourceEmpty function (React/jQuery/Javascript), resourceEmptyTemplate (Angular) and resourceEmpty slot (Vue).
  • We pass the day paramater to the resource template when vertical day resolution is used and resources appear on multiple days.

Fixed

  • We fixed an issue where the vertical scroll became stuck after navigating to a date programmatically.
  • We now display the resource column even when the resource array is empty, and only hide it, when resources are not passed at all.
  • We fixed an issue where timeline columns were displayed incorrectly in Angular, with daily resolution and start/end time specified.

What's New

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.

All Components

Fixed

  • We fixed the Angular package to work with Angular 18.

Agenda

Fixed

  • We fixed the extra borders appearing for empty days when used with the Windows theme.

Select

Fixed

  • We fixed the usage of the group wheel, which was not working correctly.

Timeline

Fixed

  • We fixed an issue where events were not appearing in Angular, when used with slots and vertical day resolution.
  • We fixed an issue where the virtual scroll ended up in incorrect state after resizing the calendar container in Angular.
  • We fixed an issue where external drag resulted in error if the timeline was hidden.
  • We fixed an issue where the timeline columns were rendered incorrectly sometimes on certain browser zoom levels.
  • We fixed the display of week numbers with custom template in Angular.

What's New

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.

All Components

New

  • We added support for React 19.

Agenda

Fixed

  • We fixed the empty agenda view, which was not displayed correctly (regression introduced in v5.29.2).

Eventcalendar

Fixed

  • We fixed the external drag & drop on touch devices.

Forms

Fixed

  • We fixed the Prompt component in React and Vue to reset the value between consecutive calls.

Timeline

New

  • We added support for displaying events with variable heights.

What's New

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.

All Components

Fixed

  • We made the Angular npm packages compatible with the moduleResolution: 'bundler' TypeScript option.
  • We fixed in issue where the onInit event handler was not called when passed using the [options] binding in Angular.

Agenda

Fixed

  • We fixed the agenda list to scroll the nearest date when no events exist on selected date.

Datepicker

Fixed

  • We added accessibility labels to the date and time scroll wheels.

Eventcalendar

Fixed

  • We fixed an issue with the calendar rows not expanding when displaying all event labels in Vue.

Scheduler

Fixed

  • We fixed an issue where the date format was not localized for accessibility labels.
  • We fixed an issue where the invalids were not always displayed correctly when used with timezones.

Select

Fixed

  • We added accessibility labels to the scroll wheels.
  • We fixed an issue where options were disabled if the option group's name was identical with the option value.

Timeline

Fixed

  • We fixed an issue where the date format was not localized for accessibility labels.
  • We fixed an issue where the resources were not displayed correctly in RTL mode when used with Angular.

What's New

Bugfix release

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

All Components

Fixed

  • We fixed the occurence calculation in case of monthly and yearly recurrence rules, which resulted in an infinite loop, if an empty array was passed for the day or month property.

Datepicker

Fixed

  • We fixed the Angular picker input to open the picker when the input icon is clicked.

Select

Fixed

  • We added the missing maxWidth and maxHeight options to the Angular component.

Timeline

Fixed

  • We fixed an issue where changing dynamically between equal and variable row heights did not work correctly.
  • We fixed the event connection lines rendering, which were off in some cases, after dragging events.

What's New

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.

Agenda

Fixed

  • We fixed a bug with the calendar buttons, which resulted in error when used with Vue server side rendering.

Datepicker

Fixed

  • We fixed a bug with the calendar buttons, which resulted in error when used with Vue server side rendering.

Eventcalendar

Fixed

  • We fixed a bug with the calendar buttons, which resulted in error when used with Vue server side rendering.
  • We fixed an issue where parts of the event label remained with focus styling after drag & drop.

Print module

Fixed

  • We fixed an issue where custom Angular templates were not displayed correctly in print view due to missing styles.

Scheduler

New

  • We added the oldResource and resource properties to the onEventUpdate lifecycle event arguments to easily determine the source and destination resources.
  • We added the background and cssClass properties to the resource data, making the customization of the resource columns easier.
  • We added the bufferBefore and bufferAfter event data properties to help define buffer zones for events.
  • We added the showEventBuffer option to control the display of event buffers.
  • We added templating to the event buffers through the renderBufferBefore and renderBufferAfter functions (React/jQuery/Javascript), bufferBeforeTemplate and bufferAfterTemplate (Angular) and bufferBefore and bufferAfter slots (Vue).

Fixed

  • We fixed a bug with the calendar buttons, which resulted in error when used with Vue server side rendering.

Timeline

New

  • We added the oldResource, oldSlot, resource and slot properties to the onEventUpdate lifecycle event arguments to easily determine the source and destination resources and slots.
  • We added the background and cssClass properties to the resource data, making the customization of the resource rows easier.
  • We added the bufferBefore and bufferAfter event data properties to help define buffer zones for events.
  • We added the showEventBuffer option to control the display of event buffers.
  • We added templating to the event buffers through the renderBufferBefore and renderBufferAfter functions (React/jQuery/Javascript), bufferBeforeTemplate and bufferAfterTemplate (Angular) and bufferBefore and bufferAfter slots (Vue).

Fixed

  • We fixed a bug with the calendar buttons, which resulted in error when used with Vue server side rendering.
  • We fixed an issue where the onCellClick, onCellDoubleClick and onCellRightClick events were not fired if the horizontal resolution was week, month, quarter or year.

What's New

Bugfix release

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

All Components

Fixed

  • We updated the npm packages to work with the "moduleResolution": "bundler" TypeScript option as well.

Agenda

Fixed

  • We fixed the event color display in RTL mode in Angular.
  • We fixed the showEventTooltip option in Angular, which displayed a tooltip with undefined, when set to false.

Forms

Fixed

  • We fixed the Angular segmented component which did not work correctly with numeric values in multiple select mode.

What's New

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.

All Components

Fixed

  • We added the missing export field into the package.json of our packages to work properly with modern build systems or native Node.js imports.

Agenda

Fixed

  • We fixed the navigation picker which was not working correctly in Angular.
  • We fixed an issue where the navigateToEvent method did not scroll to the correct date with custom agendaTemplate in Angular.

Datepicker

Fixed

  • We fixed the getVal method to return empty array instead of null for empty selection in case of multiple select.

Eventcalendar

Fixed

  • We fixed the navigation picker which was not working correctly in Angular.
  • We fixed the drag & drop of the events from the popover in Vue.

Scheduler

Fixed

  • We fixed the navigation picker which was not working correctly in Angular.
  • We fixed the drag & drop of the events from the popover in Vue.

Select

Fixed

  • We fixed the getVal method to return empty array instead of null for empty selection in case of multiple select.

Timeline

Fixed

  • We fixed the navigation picker which was not working correctly in Angular.
  • We fixed the drag & drop of the events from the popover in Vue.
  • We fixed an issue where the cursor time indicator was off after changing the timeline time steps or resolution.

What's New

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.

All Components

Fixed

  • We fixed the monthly and yearly recurrence, where the COUNT option was not working if BYSETPOS was also specified.

Datepicker

Fixed

  • We added added a publicly available type to the controls option, called MbscDatepickerControl.
  • We added the missing month property to the MbscDatepickerPageChangeEvent type.
  • We fixed the calendar header which was not displayed correctly in Vue.

Eventcalendar

Fixed

  • We fixed a bug in the print module that prevented the display of svg elements.

Forms

Fixed

  • We fixed the stepper styling in Angular.

Timeline

Fixed

  • We fixed an issue where the timeline grid was not always repainted correctly after window resize.
  • We fixed an issue where after changing the resources, the timeline remained scrolled to an empty space in Firefox.

What's New

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.

All Components

New

  • We added the dateFormatFull locale option, which is used by screen readers to read out full dates. This improves accessibility for localized instances.

Fixed

  • We fixed the tree shaking when some inner components were always included in the bundle.

Agenda

New

  • We improved the quick navigation component used in the header of the calendar allowing for date selection where it makes sense instead of just month & year. We further improved the UX by refining the defaults based on the view configuration.

Datepicker

New

  • We added types to the lifecycle event arguments that improves the development workflow when working in Typescript.

Fixed

  • We fixed the Extraneous non-props attributes warning for the Vue component when locale options were set.

Eventcalendar

New

  • We added the immutableData option. When it is enabled the component won't update the passed data directly and it is the responsibility of the developer to handle the updates in the appropriate lifecycle events.

Fixed

  • We fixed the Vue component to accept the dateFormatLong option among other missing localization options.
  • We fixed the styling of the selected date rendered previously incorrectly if the calendar was placed inside a Mobiscroll grid layout.

Popup

New

  • We added types to the lifecycle event arguments that improves the development workflow when working in Typescript.

Scheduler

New

  • We improved the quick navigation component used in the header of the calendar allowing for date selection where it makes sense instead of just month & year. We further improved the UX by refining the defaults based on the view configuration.
  • We added the maxEventStack option to limit the number of displayed events in the schedulers columns. If the number of events reaches the specified value, a “more” button will be shown which opens a popover listing the undisplayed events.
  • We added the minEventWidth option to specify the minimum event width in case of the Scheduler view. The value will be used when the maxEventStack: 'auto' option is enabled.

Fixed

  • We fixed the @cell-double-click event, which was not working in Vue.
  • We fixed a bug where it was possible to create events on invalidated days.

Select

New

  • We added missing types to the renderItem arguments.
  • We added types to the lifecycle event arguments that improves the development workflow when working in Typescript.

Timeline

New

  • We improved the quick navigation component used in the header of the calendar allowing for date selection where it makes sense instead of just month & year. We further improved the UX by refining the defaults based on the view configuration.
  • We added the fixed property to resources enabling sticky rows that remain fixed at the top of the calendar.
  • We added the maxEventStack option to limit the number of displayed events in the timeline rows. If the number of events reaches the specified value, a “more” button will be shown which opens a popover listing the undisplayed events.

Fixed

  • We fixed an bug where the event data for the custom header and footer templates was lost on navigating the view.
  • We fixed the @cell-double-click event, which was not working in Vue.

What's New

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.

All Components

Fixed

  • We fixed the global setOptions method which caused an error in Nuxt when used with Vue server side rendering.

Datepicker

Fixed

  • We fixed an issue where the calendar picker did not appear correctly when only month or year picking was used.
  • We fixed an issue where typing into the input was not possible on first display, when the touchUi option was set using the responsive option.

Eventcalendar

Fixed

  • We fixed the eventOverlap option which was not working correctly during event drag or resize, by also detecting overlap with itself.

Forms

Fixed

  • We fixed the radio buttons which were not working correctly in uncontrolled mode with React 18 strict mode.
  • We fixed the segmented control which was not working correctly in uncontrolled mode with React 18 strict mode.

Timeline

Fixed

  • We fixed an issue where the view date was not always calculated correctly during scroll (in RTL mode, or when not all days and hours were displayed). This caused problems when changing to another view.
  • We fixed an issue where the grid cells disappeared during drag, when daily vertical resolution was used.
  • We fixed an issue where an extra column was displayed on the grid during drag, when the horizontal resolution was bigger than a day (week, month, quarter or year).
  • We fixed the timeline header to display the year as well in case of quarter resolution, when there are multiple years displayed.
  • We fixed an issue where the navigateToEvent method was not always navigating to the correct resource row, when custom navigation was used in the header.
  • We fixed an issue where the custom day header and footer templates did not receive correctly the related events in case of hourly resolution.

What's New

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.

Datepicker

Fixed

  • We fixed the display of date and time scrollers in bottom display mode in Angular.
  • We fixed an issue where the value parsing resulted in error if defaultValue was set for the range picker in React.

Eventcalendar

Fixed

  • We fixed the calendar display with the labels: 'all' view option, which broke in the previous release.
  • We fixed the week days alignment when week numbers are also displayed.

Timeline

Fixed

  • We fixed an issue with the vertical virtual scroll, where some resource rows were cut of, if there were rows with a larger height than the scroll container.
  • We removed the space from the default quarter header, so it will display 'Q1' instead of 'Q 1'.
  • We fixed the event creation on touch screen, which was not working correctly when creating long events with horizontal auto-scroll.
  • We fixed the current time indicator which did not go all the way down if timeline was placed inside a grid.

What's New

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.

Agenda

Fixed

  • We fixed the start time display for events without end time specified.

Datepicker

Fixed

  • We fixed the getVal method which was returning the default date, even when there was nothing selected yet (jQuery and Javascript versions).
  • We fixed the button alignment in center display mode for the Material theme.
  • We fixed the calendar picker where the month change was not working in iOS Safari 17.

Scheduler

Fixed

  • We fixed the display of all-day events, when weekly calendar was combined with a single day scheduler.

Select

Fixed

  • We fixed the button alignment in center display mode for the Material theme.

Timeline

Fixed

  • We fixed an issue where the header and footer templates did not receive an event if it started at midnight and had no end time specified.

What's New

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.

Agenda

Fixed

  • We fixed the scroll to day feature which scrolled to the wrong place after navigation in Angular.

Datepicker

Fixed

  • We fixed an issue where invalid days were not styled as invalid when used in certain timezones.
  • We improved the accessibility by adding the correct role to the picker input and allow specifying the aria-label attribute, if used without a label.

Eventcalendar

New

  • We improved the drag in time functionality, now the externally dragged elements will also take into account to the dragInTime option.
  • We added the eventOverlap option for fine grain control over the allowed drag & drop interactions.

Scheduler

New

  • We improved the drag in time functionality, now the externally dragged elements will also take into account to the dragInTime option.
  • We added the eventOverlap option for fine grain control over the allowed drag & drop interactions.

Select

Fixed

  • We fixed the tag/chips rendering of the select, when multiple selection is enabled.
  • We improved the accessibility by adding the correct role to the picker input and allow specifying the aria-label attribute, if used without a label.
  • We fixed the dynamic update of the invalid values.

Timeline

New

  • We improved the drag in time functionality, now the externally dragged elements will also take into account to the dragInTime option.
  • We added the eventOverlap and dragBetweenSlots options for fine grain control over the allowed drag & drop interactions.
  • We added the overlap and dragBetweenSlots properties to the events to control the allowed drag & drop interactions on individual events.
  • We added the eventDragBetweenSlots property to the resources and slots to control allowed drag & drop interactions on a resource and slot basis.
  • We added support to display columns in quarter resolution as well.
  • We added templating to the quarter header and footer through the renderQuarter and renderQuarterFooter functions (React/jQuery/Javascript), quarterTemplate and quarterFooterTemplate (Angular) and quarter and quarterFooter slots (Vue).
  • We added new types to event connections: finish-to-start, start-to-finish, start-to-start and finish-to-finish.
  • We added the virtualScroll property to the timeline view options to enable or disable the virtual scroll.

Fixed

  • We fixed the external drag & drop in case of slots, so that the external event will not split up to multiple days.
  • We fixed an issue where the grid was not displayed correctly in Safari < 15.

What's New

Bugfix release

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

Agenda

Fixed

  • We fixed an issue where the calendar was navigated to the wrong date after changing the view.

Eventcalendar

Fixed

  • We fixed an issue with the navigate method which was throwing an error when trying to navigate to hidden dates on a week view.
  • We fixed the event colors in Vue to be inherited correctly from the resource if specified.
  • We fixed the external drop to don't delete the event from the source calendar, if dropped on an invalid location.
  • We fixed an issue where the calendar was navigated to the wrong date after changing the view.
  • We fixed an issue where the onEventDragEnd event was not firing if only external drag was enabled on the calendar.

Forms

Fixed

  • We fixed the model value binding of the Stepper component in Vue.
  • We fixed an issue where binding native listeners to the Input component (focus, blur, etc.) did not work in Vue.

Scheduler

Fixed

  • We fixed the external drop to don't delete the event from the source calendar, if dropped on an invalid location.
  • We fixed an issue where the calendar was navigated to the wrong date after changing the view.
  • We fixed an issue where the onEventDragEnd event was not firing if only external drag was enabled on the calendar.

Select

Fixed

  • We fixed an issue, where the select did not scroll to the top after filtering the options.
  • We fixed a bug that prevented the dynamic change of select options in Angular.
  • We fixed an issue, where calling the Select instance methods resulted in error in Vue.

Timeline

Fixed

  • We fixed the sidebar, sidebar header and footer templates as well as the day footer templates in the timeline component for Vue.
  • We fixed a bug in the timeline header where month headers overlapped when the last day of the month was not displayed.
  • We fixed an issue where the resolutionVertical property of the view option was not taken into account in Vue.
  • We fixed the external drop to don't delete the event from the source calendar, if dropped on an invalid location.
  • We fixed an issue where the calendar was navigated to the wrong date after changing the view.
  • We fixed an issue where the onEventDragEnd event was not firing if only external drag was enabled on the calendar.

What's New

Bugfix release

This release fixes the external drag on the eventcalendar.

Eventcalendar

Fixed

  • We fixed the external drag which was not working correctly on the calendar view.

What's New

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.

All Components

Fixed

  • We fixed a bug in the recurring rule parsing logic that disregarded the until dates time part.

Agenda

New

  • We are adding templating to the agenda empty view through the renderAgendaEmpty function (React/jQuery/Javascript), agendaEmptyTemplate (Angular) and agendaEmpty slot (Vue).

Fixed

  • We fixed the scroll to day feature which was not working correctly after changing the view in Angular.

Datepicker

Fixed

  • We fixed the calendar cell layout with week numbers displayed.
  • We fixed an error which was thrown when opening animation was set to false.
  • We added missing props to the Vue component: calendarType, calendarScroll, pages, showOuterDays, showWeekNumbers.

Dropcontainer

New

  • We added a new Dropcontainer component that can be used to drop events dragged out from an event calendar.

Eventcalendar

New

  • We added the dragInTime option for fine grain control over the allowed drag & drop interactions.
  • We added the resize and dragInTime properties to the events to control the allowed drag & drop interactions on individual events.
  • We added the externalDrag option that enables events to be dragged out from the calendar and dropped onto another calendar or any dropcontainer.

Forms

Fixed

  • We fixed the disabled option of the Angular checkbox component to accept boolean values instead of strings.

Popup

Fixed

  • We fixed an error which was thrown when opening animation was set to false.

Scheduler

New

  • We added the dragInTime and dragBetweenResources options for fine-tuning the allowed drag & drop interactions.
  • We added the resize, dragInTime and dragBetweenResources properties to the events to control the allowed drag & drop interactions on individual events.
  • We added the eventResize, eventDragInTime and eventDragBetweenResources properties to the resources to control allowed drag & drop interactions on a resource basis.
  • We added the externalDrag option that enables events to be dragged out from the scheduler and dropped onto another instance or any dropcontainer.

Select

Fixed

  • We fixed the display of disabled items after dynamically updating the invalid option.
  • We fixed the filter option which was not working in Vue.
  • We fixed the v-model value binding for Vue.

Timeline

New

  • We added the dragInTime and dragBetweenResources options for fine-tuning the allowed drag & drop interactions.
  • We added the resize, dragInTime and dragBetweenResources properties to the events to control the allowed drag & drop interactions on individual events.
  • We added the eventResize, eventDragInTime and eventDragBetweenResources properties to the resources to control allowed drag & drop interactions on a resource basis.
  • We added the renderHour / renderHourFooter and hourTemplate / hourFooterTemplate options for custom time content rendering in the timeline header and footer.
  • We added the renderWeek / renderWeekFooter and weekTemplate / weekFooterTemplate options for custom week content rendering in the timeline header and footer.
  • We added the renderMonth / renderMonthFooter and monthTemplate / monthFooterTemplate options for custom month content rendering in the timeline header and footer.
  • We added the renderYear / renderYearFooter and yearTemplate / yearFooterTemplate options for custom year content rendering in the timeline header and footer.
  • We added the externalDrag option that enables events to be dragged out from the timeline and dropped onto another instance or any dropcontainer.

Fixed

  • We fixed the display of event connections in Vue.

What's New

Bugfix release

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

All Components

Fixed

  • We fixed the updateRecurringEvent to don't mutate the updatedEvent input parameter.

Timeline

Fixed

  • We fixed an issue where the timeline entered into infinite rendering with custom event templates at certain screen sizes.

What's New

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.

All Components

New

  • We introduced support for Vue 3, shiping full framework integration with native components.

Fixed

  • We updated the long date format for the Arabic, Bulgarian, Farsi, French, Hebrew, Hindi, Italian, Polish, Serbian and Thai localizations.

Datepicker

Fixed

  • We fixed the date parser to use the year, month and day of the default value (or today's date, if not specified), when parsing time strings.
  • We added the missing dayNamesMin input option to the Angular component.

Forms

Fixed

  • We fixed an issue where detached DOM elements were retained after destroying the Input, Dropdown, Textarea, Stepper and Switch components in JavaScript and jQuery.

Scheduler

Fixed

  • We fixed the display of min and max dates, which did not appear as invalid on the scheduler.

Select

Fixed

  • We fixed the styling of the filter input which did not inherit the specified theme variant (light or dark).

Timeline

Fixed

  • We fixed an issue where some events were not displayed correctlty after changing the timezone dynamically.
  • We fixed the width of the date columns when using daily vertical resolution.
  • We fixed the display of min and max dates, which did not appear as invalid on the timeline.
  • We fixed an issue where the timeline entered into infinite rendering with custom event templates at certain screen sizes.

What's New

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.

Scheduler

Fixed

  • We fixed an issue where the length of the all-day events was not calculated correctly.

Timeline

Fixed

  • We fixed the dragging of external all-day events, which was not working correctly.
  • We fixed an issue, where creating events with external drag & drop was possible on resources with event creation turned off.
  • We fixed the scroll to time feature, to scroll to the beginning of the day, when whole days are displayed.
  • We fixed the vertical dragging of the events, where the scroll got stuck after a while.

What's New

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.

Agenda

New

  • We added support to store the timezone directly on the event, which takes precedence over the dataTimezone option.

Fixed

  • We fixed an issue where an extra empty space was displayed above the event times.

Eventcalendar

New

  • We added support to store the timezone directly on the event, which takes precedence over the dataTimezone option.

Fixed

  • We fixed an issue where navigating the calendar with an external button did not work, if the selected date was pressed twice.

Scheduler

New

  • We added support to store the timezone directly on the event, which takes precedence over the dataTimezone option.

Fixed

  • We fixed an issue where grouping by resource was lost on dynamic view change.
  • We fixed an issue where the header and columns did not align on dynamic view change.

Timeline

New

  • We added support to store the timezone directly on the event, which takes precedence over the dataTimezone option.
  • We added an improvement to keep the visible date and time in view after a dynamic view change.

Fixed

  • We fixed an issue where the row heights were not calculated correctly when changing to or from event listing mode.

What's New

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.

Select

Fixed

  • We fixed an issue where the picker was not opening when using the Angular or React components (regression introduced in 5.23.1).

Timeline

Fixed

  • We fixed the sticky label of the events, when days are displayed vertically and there are no resources.

What's New

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.

Agenda

Fixed

  • We fixed the getEvents and getInvalids methods, which did not handle all-day data correctly.

Datepicker

Fixed

  • We fixed the range selection, when the picker used 2 inputs, it was initialized on the start input and the display was modified using the responsive option.

Eventcalendar

Fixed

  • We fixed the getEvents and getInvalids methods, which did not handle all-day data correctly.

Forms

Fixed

  • We fixed the radio and segmented components which were not working correctly when there was no value specified on the segmented or radio items.

Scheduler

Fixed

  • We fixed a layouting issue where the events were overlapping in some cases.
  • We fixed the getEvents and getInvalids methods, which did not handle all-day data correctly.

Timeline

Fixed

  • We fixed the shadow of the header for the Material theme.
  • We fixed the getEvents and getInvalids methods, which did not handle all-day data correctly.
  • We fixed the date columns which were not expanding vertically, if used without resources.

What's New

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.

All Components

New

  • We made Angular packages available in Ivy format, making it compatible with Angular 16.

Fixed

  • We fixed the Today button of the calendar, which did not select today's date correctly.
  • We fixed a validation issue, when an invalid range intersected with the minimum date. ( #515 )

Timeline

New

  • We are introducing vertical timeline segmentation by day though the resolutionVertical view option.

What's New

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.

All Components

Fixed

  • We fixed the compatibility issues with Tailwind CSS, where extra borders were displayed in multiple places.

Agenda

Fixed

  • We fixed a styling issue, where the agenda list was visible during scroll in a pixel height strip above the sticky day header on iOS.

Datepicker

Fixed

  • We fixed the calendar scrollbar, which was not appearing when needed in year or multiple month view.
  • We fixed an issue where the calendar page did not change on next arrow click in case of range selection, after the first day of the next month was selected as start date.

Popup

Fixed

  • We fixed an issue where a popup without an overlay couldn't be closed while a toast or snackbar message was visible.

Print module

Fixed

  • We open the print dialog a bit later, to allow the complete rendering of the page.

Scheduler

Fixed

  • We fixed the renderScheduleEventContent option to make it work with jsx content in React.
  • We fixed the current time indicator bullet, which was showing up at the wrong place with the iOS and Material themes.
  • We fixed the external event drag, where sometimes the event was not droppable on the all-day section of the scheduler.

Timeline

Fixed

  • We fixed the renderScheduleEventContent option to make it work with jsx content in React.
  • We fixed the position of the dragged event, when the timeline was set to equal row heights.

What's New

Bugfix release

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

Datepicker

Fixed

  • We fixed an issue where the soft keyboard was opening on touch screens when the picker was opened by tapping on the input label.

Eventcalendar

Fixed

  • We fixed the calendar weekdays displayed at the wrong place in year view, when used with labels: 'all'.

Timeline

Fixed

  • We fixed an issue where sometimes an empty area was rendered when switching from a larger view to a smaller one.
  • We fixed a rendering issue where the month names overlapped each other when the view started with the last day of a month.
  • We fixed the navigateToEvent method, which only worked when called for the first time on the displayed view.
  • We fixed an issue with the external drag & drop, where moving the event over the resource column caused the timeline to scroll.

What's New

Bugfix release

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

Datepicker

Fixed

  • We fixed an issue with the calendar navigation, where selecting year and month was not possible, when the picker was used within a web component.

Eventcalendar

Fixed

  • We fixed an issue on touch screens, where onEventUpdateFailed was triggered on event tap, when the event jumped back after dragged over an invalid range.

Forms

Fixed

  • We made it possible to add a custom id to the segmented and radio controls, instead of the auto-generated one, to avoid differences between client and server side rendered markup.
  • We fixed an issue with the Angular textarea component, which threw an error in Jest test environment.

Scheduler

Fixed

  • We fixed the cursor time indicator, to hide when the cursor leaves the grid area. We also fixed the positioning, when the main page content was scrolled.
  • We fixed an issue on touch screens, where onEventUpdateFailed was triggered on event tap, when the event jumped back after dragged over an invalid range.

Timeline

Fixed

  • We fixed the cursor time indicator, to hide when the cursor leaves the grid area.
  • We fixed an issue on touch screens, where onEventUpdateFailed was triggered on event tap, when the event jumped back after dragged over an invalid range.

What's New

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.

Datepicker

Fixed

  • We fixed a bug in the setVal method, that was throwing an exception when called with null in case of range selection.

Eventcalendar

New

  • We added the action argument to the onEventDragStart lifecycle event, which will be 'create', 'resize' or 'move', depending on the user action. This will help determine the action the drag event was triggered from.

Fixed

  • We fixed a bug where the renderDay and dayTemplate did not receive the events for the day, if labels were not displayed on the calendar view.
  • We fixed an issue where the calendar header was flickering in some Angular versions, if all labels were displayed and the calendar had a scrollbar.

Forms

Fixed

  • We fixed a bug in the input, dropdown and textarea components, which sometimes resulted in error inside an Angular test environment when destroy was triggered.

Scheduler

New

  • We added the currentTimeIndicator property to the view option that controls whether the current time indicator of the scheduler is visible or not.
  • We added the eventCreation property to the base resource object, which can be used to enable/disable event creation on specific resources.
  • We added the action argument to the onEventDragStart lifecycle event, which will be 'create', 'resize' or 'move', depending on the user action. This will help determine the action the drag event was triggered from.

Fixed

  • In case of days without events, we now pass an empty array to the renderDay and dayTemplate instead of undefined.

Timeline

New

  • We added the currentTimeIndicator property to the view option that controls whether the current time indicator of the timeline is visible or not.
  • We added the eventCreation property to the base resource object, which can be used to enable/disable event creation on specific resources.
  • We added the possibility of customizing the resource row with CSS by using the .mbsc-timeline-row class. E.g. increasing or decreasing the row height.
  • We added the possibility of customizing the parent resource row with CSS, by using the .mbsc-timeline-parent class. E.g. increasing or decreasing the row height specifically for parent resources.
  • We added the possibility of customizing the remaining empty space in the resource row below the rendered events, by using the .mbsc-timeline-row-gutter class. E.g. completely removing the extra space below the events.
  • We added highlighted styling for today's date, week, month or year, depending on the resolution used.
  • We added the action argument to the onEventDragStart lifecycle event, which will be 'create', 'resize' or 'move', depending on the user action. This will help determine the action the drag event was triggered from.
  • We added templating support for the empty cell below the resource column through the renderResourceFooter and resourceFooterTemplate options.
  • We added the renderDayFooter and dayFooterTemplate options for rendering a custom footer below the timeline day cells.
  • We added the renderSidebar and sidebarTemplate options for rendering a custom sidebar at the opposite end (to the resource) of the timeline.
  • We added templating support for the empty cell above the sidebar column through the renderSidebarHeader and sidebarHeaderTemplate options.
  • We added templating support for the empty cell below the sidebar column through the renderSidebarFooter and sidebarFooterTemplate options.
  • We added the onResourceExpand and onResourceCollapse lifecycle events, triggered when a parent resource is expanded or collapsed.

Fixed

  • In case of days without events, we now pass an empty array to the renderDay and dayTemplate instead of undefined.
  • We fixed an issue where data (event, invalid or color) was not appearing on the timeline if it started before the current view and ended right on the start of the view, with exclusiveEndDates turned off.

What's New

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.

Agenda

Fixed

  • We fixed an issue where the agenda list was not refreshed after changing the view.
  • We fixed an issue where the agenda wasn't scrollable if changed from scheduler view.

Datepicker

Fixed

  • We fixed the calendar header which did not appear in the Angular component (broken in 5.21.0).
  • We fixed a bug that prevented the navigation buttons to work in the case of range selection when used together with the minRange option.
  • We fixed a bug that came up while switching between all-day and non all-day dates with timezones and resulted in setting the time part to an incorrect value.
  • We improved on range selection with timezones to work better with the Eventcalendar when switching between all-day and non all-day event dates.

Timeline

Fixed

  • We fixed an issue where the timeline columns were not always streched properly to fill the available width.
  • We fixed the display of the event resize handles in event listing mode for the Material and Windows themes.

What's New

Bugfix release

We fixed the trial version, which broke in 5.21.0.

All Components

Fixed

  • We fixed the trial version, which broke in 5.21.0.

Select

Fixed

  • We fixed the select filter, which broke in 5.21.0.

What's New

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.

Forms

New

  • We added component based notifications (Alert, Confirm, Prompt, Toast, Sanckbar) for React, to prevent ReactDOM.render warning in React 18.

Fixed

  • We fixed the default value of the prompt input, the value option was not passed to the input.

Timeline

New

  • We added support for weekly, monthly and yearly column resolutions.

Fixed

  • We fixed the display of the colors and invalids, when the range started outside of the displayed view.

What's New

Bugfix release

Datepicker

Fixed

  • We fixed an issue where specifying an initial value for the time picker resulted in an infinite loop in Angular.
  • We fixed an issue where the hover states of calendar days got stuck in Angular, when closing and reopening the picker.

Eventcalendar

Fixed

  • We fixed an issue where navigating the view with custom buttons was not animated.

Forms

Fixed

  • We fixed the typescript type of the segmented value to accept any type, not just string.

Scheduler

Fixed

  • We fixed an error when an external drag was started and one of the receiving calendars was hidden.
  • We fixed an issue with drag & drop on touch devices, where tapping on the event after dropping it on an invalid range resulted in an error.

Timeline

Fixed

  • We fixed an error when an external drag was started and one of the receiving calendars was hidden.
  • We fixed the event positioning on drag, when the event was jumping to the top row when it was assigned to multiple resources.

What's New

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.

All Components

Fixed

  • We fixed the React Draggable component used for external drag & drop, which if rendered conditionally was not working in React 18 strict mode.
  • We fixed the responsive option to work with React SSR (server side rendering).

Agenda

New

  • We added the cssClass property to the event model that can be used to pass custom CSS classes on an event to event basis. Useful for quick styling adjustments of the event container.

Eventcalendar

New

  • We added the cssClass property to the event model that can be used to pass custom CSS classes on an event to event basis. Useful for quick styling adjustments of the event container.

Forms

Fixed

  • We fixed the notifications, which resulted in an error, when called from useEffect or componentDidMound in React.

Scheduler

New

  • We added the cssClass property to the event model that can be used to pass custom CSS classes on an event to event basis. Useful for quick styling adjustments of the event container.
  • We added the cssClass property to colors that can be used to customize the background of cells and time ranges.
  • We added the cssClass property to the invalid object for passing custom CSS classes on case by case basis for customizing the background and label.

Fixed

  • We fixed a bug where the resource id was not passed to the dayContentTemplate in Angular.

Select

Fixed

  • We fixed an issue, where the initially selected value was lost, if used on a native HTML select.

Timeline

New

  • We added the cssClass property to the event model that can be used to pass custom CSS classes on an event to event basis. Useful for quick styling adjustments of the event container.
  • We added the cssClass property to colors that can be used to customize the background of cells and time ranges.
  • We added the cssClass property to the invalid object for passing custom CSS classes on case by case basis for customizing the background and label.
  • We added the renderDay and dayTemplate options for custom day content rendering in the timeline header.
  • We improved the event positioning on interaction (drag/resize/create) where the modified event will remain on the same horizontal track when moved around instead of jumping to the top of the row.

Fixed

  • We fixed the vertical virtual scroll where virtual pages were loaded too late, causing an empty area being visible at the bottom in some cases.

What's New

Bugfix release

All Components

Fixed

  • We fixed an issue which caused a compilation error with typescript >= 4.8.0.

Datepicker

Fixed

  • We fixed an issue where dynamically changing the number of displayed month caused the picker to jump to a different year.
  • We fixed an issue where it was possible to navigate outside of the specified min and max dates from the header navigation.
  • We fixed the month name display in the calendar header in week view, when navigating from the header navigation.
  • We fixed an issue where the datepicker was not closed if another datepicker was opened and the showOnFocus option was enabled.

Eventcalendar

Fixed

  • We fixed the minimum height of the calendar view to display at least 2 labels when using the Windows theme in desktop mode.

Print module

Fixed

  • We fixed a styling issue, where the header days were not properly aligned with the grid columns, if the grid had vertical scrollbar.

Scheduler

Fixed

  • We fixed the alignment of the all-day text for the Material theme and in RTL mode for all other themes.

What's New

Bugfix release

Datepicker

Fixed

  • We added the missing exclusiveEndDates input option to the Angular component.
  • We fixed the styling of the multiple month and year view, where on certain sizes we displayed too many months in a row, causing the day week headers not aligning properly with the day columns.
  • We fixed an issue, when the end date displayed in the input field was before the start date, when timezones were used.

Eventcalendar

Fixed

  • We fixed the styling of the multiple month and year view, where on certain sizes we displayed too many months in a row, causing the day week headers not aligning properly with the day columns.

Forms

Fixed

  • We fixed an issue where the prompt dialog closed automatically if the input was autofilled with a value.
  • We fixed the styling of the stepper input, where the native spin buttons were visible in Firefox.

Popup

Fixed

  • We fixed an issue where the popup threw an error in React 18 strict mode, if it was displayed initially open.

Scheduler

Fixed

  • We fixed an issue with the cursor time indicator, which caused an error in Angular, if drag options were enabled dynamically.

Timeline

Fixed

  • We fixed an issue where the timeline was rendered incorrectly when changing the rtl option dynamically.
  • We fixed an issue with the cursor time indicator, which caused an error in Angular, if drag options were enabled dynamically.
  • We improved the vertical spacing of the events to fix the display of the connection lines.

What's New

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.

Agenda

New

  • We added the navigateToEvent method which can be used to move the view to the specified event.

Datepicker

Fixed

  • We fixed an issue where the picker was not opening with Android TalkBack.

Eventcalendar

New

  • We added the navigateToEvent method which can be used to move the view to the specified event.

Fixed

  • We fixed the updateRecurringEvent util function to don't override the start date of the original recurring event.

Print module

New

  • The document title will be used as default file name when saving the print as pdf in supported browsers.
  • We added dynamic page breaks to avoid cutting rows in half.

Fixed

  • We fixed a FOUC issue when opening the print popup window
  • The Prev, Next and Today buttons are now hidden in the calendar header when printing.
  • We fixed an issue where some resources were not showing up when printing the timeline component.
  • We fixed an issue in angular that prevented printing of more than one page from the timeline component.
  • We fixed a missing right border on the calendar view when printing the page.

Scheduler

New

  • We added the navigateToEvent method which can be used to move the view to the specified event.
  • We added a cursor indicator which displays the time where the cursor is positioned in the time labels section. In case of event drag & drop it will display the start/end time of the updated event.

Fixed

  • We fixed an issue where the day view was not loaded correctly if the specified startDay was different than the first weekday specified by the locale options.
  • We fixed the today button which scrolled to the wrong time if the display timezone was different from the local timezone.

Select

Fixed

  • We fixed an issue where the picker was not opening with Android TalkBack.
  • We added the missing invalid option to the Angular component.

Timeline

New

  • We added event connection support. Events can be linked with lines, optionally with arrows to illustrate the direction of the connection.
  • We added the navigateToEvent method which can be used to move the view to the specified event.
  • We added a cursor indicator which displays the time where the cursor is positioned in the time labels section. In case of event drag & drop it will display the start/end time of the updated event.

Fixed

  • We fixed an issue where an extra resource row was rendered if a resource had an empty array as children.
  • We fixed SSR issues, where the markup coming from the server was different compared to the markup rendered by the client.
  • We fixed an issue where event drag got stuck, if the event was dragged on a longer distance while scrolling.
  • We fixed the today button which scrolled to the wrong time if the display timezone was different from the local timezone.

What's New

Bugfix release

All Components

Fixed

  • We fixed a bug that resulted in an javascript error when the luxon library was used above version 2 with the target environment above ES5.

Calendar integrations

Fixed

  • We fixed the Google Calendar integration to store the auth tokens between page reloads.
  • We fixed the Google Calendar integration to request a new token once the old one expired.

Eventcalendar

Fixed

  • We fixed an issue where today's date was wrongly calculated if the date was different in the specified displayTimezone compared to the browser's local timezone.
  • We fixed an issue where the onEventClick and onLabelClick events were not fired in Safari with Angular, if the event text was clicked.

Scheduler

Fixed

  • We fixed an issue where today's date was wrongly calculated if the date was different in the specified displayTimezone compared to the browser's local timezone.

Timeline

Fixed

  • We fixed an issue where today's date was wrongly calculated if the date was different in the specified displayTimezone compared to the browser's local timezone.

What's New

Bugfix release

All Components

Fixed

  • We fixed the updateReccurringEvent util function to handle the new recurring features.

Datepicker

Fixed

  • We fixed an issue where the start and end input initial value was not picked up by the datepicker on initialization in the case of plain JavaScript and jQuery
  • We fixed a parsing issue when entering white space resulted in 1st January 1970 instead of empty value.
  • We fixed the type of the onActiveDateChange event. The instance parameter was missing from the type definition, which gave an error when using typescript.
  • We fixed an issue with range selection where the calendar navigated away from the start selection to the current month when minRange was more than one day.

Eventcalendar

Fixed

  • We now export the MbscCalendarColor type.
  • We fixed an issue where the cell borders were not displayed consistently in variable row mode on small screens.

Popup

Fixed

  • We fixed an issue where the popup was not always closed on outside click, if other popups (like tooltips) were also displayed while the popup was open.

Scheduler

Fixed

  • We fixed an issue where the selected day was not displayed in the header in single day mode, if the resources were changed dynamically.
  • We fixed an issue where the navigation days were not displayed in single day mode, even if explicitly specified inside the view option.

Select

Fixed

  • We added the missing showInput option to the angular select component.

Timeline

Fixed

  • We fixed an issue where the timeline crashed with an error, if the screen width was smaller than the resource column width.
  • We fixed an issue where the timeline did not re-render correctly when the view was changed dynamically in Angular.
  • We fixed an issue where event validation against invalid ranges was not working correctly for ranges spanning across multiple days.
  • We speeded up the rendering when slots were used on large views with lot of events.
  • We fixed the drag & drop of multi-day events, when used with slots.

What's New

Bugfix release

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

All Components

Fixed

  • We fixed the monthly and yearly repeat, where the count was not correct, if the start date of the event was after the specified month day.

Datepicker

Fixed

  • We fixed an issue where using calendar labels resulted in error in 5.18.0.

Eventcalendar

Fixed

  • We fixed the custom label rendering, which resulted in error in 5.18.0.

Scheduler

Fixed

  • We fixed the Angular component, which threw on error on initial show in 5.18.0.

What's New

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.

All Components

New

  • We implemented new features to the recurring rules. We now support multiple days in monthly repeat, multiple days and months on yearly repeat and selecting the nth occurrence in case of monthly and yearly repeat (BYSETPOS in the RFC-5545 specification). This applies to recurring events, colors, invalids and marked days in case of the event calendar. The date picker is getting the new capabilities as well for the color, invalid, label and marked day options.

Agenda

New

  • We added event selection to the agenda. It is possible to select and highlight events starting this version.
  • We added possibility of multiple event selection which can be enabled with the selectMultipleEvents option. Either single or multiple selected events are reachable in the instance which enables rich bulk operations like delete, cut, copy, paste, update, reassign, etc.

Datepicker

New

  • We added the refDate option to the Datepicker component. When using the calendar control with multiple weeks or months, the refDate sets the starting point, from which the navigation occurs.
  • We improved on the accessibility of the calendar control. We removed unnecessary aria roles, hid parts of the UI from screen readers and added support for reading calendar labels.

Fixed

  • We fixed a bug in the case of the timegrid control, where the time part of the selection was reset when the picker opened for a second time and a new date part was selected.

Eventcalendar

New

  • We added event selection to the event popover. Starting this version it is possible to select events from the popover as well.
  • We added possibility of multiple event selection which can be enabled with the selectMultipleEvents option. Either single or multiple selected events are reachable in the instance which enables rich bulk operations like delete, cut, copy, paste, update, reassign, etc.
  • We improved on the accessibility of the calendar view. We removed unnecessary aria roles, hid parts of the UI from screen readers and added support for reading calendar labels.

Fixed

  • We fixed the domEvent property which was not correct inside the onEventHoverIn and onEventHoverOut events happening from the event popover in Angular.

Popup

New

  • We added the aria-modal attribute to the popup component for better semantics in accessibility.

Scheduler

New

  • We added possibility of multiple event selection which can be enabled with the selectMultipleEvents option. Either single or multiple selected events are reachable in the instance which enables rich bulk operations like delete, cut, copy, paste, update, reassign, etc.
  • We improved on the screen reader support by adding aria labels to day headers and events.

Fixed

  • We fixed an issue with drag & drop, where an event created with internal or external drag did not appear on previously empty days.

Select

Fixed

  • We fixed an issue where the picker was not opening in React 18 strict mode.

Timeline

New

  • We virtualized the vertical scrolling of the timeline, resulting in performance boost when working with lots of resources. With this we are launching virtualization for the timeline making it possible to work with large data sets across long periods of time and many resources while not degrading interaction performance on neither mobile or desktop.
  • We added possibility of multiple event selection which can be enabled with the selectMultipleEvents option. Either single or multiple selected events are reachable in the instance which enables rich bulk operations like delete, cut, copy, paste, update, reassign, etc.
  • We improved on the screen reader support by adding aria labels to day headers and events.

Fixed

  • We fixed an issue with drag & drop, where an event created with internal or external drag did not appear on previously empty days.

What's New

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.

Calendar integrations

Fixed

  • We added the pageSize option to the Outlook calendar integration, to be able to retreive more than 10 events. It defaults to 1000, which is the possible maximum.

Datepicker

Fixed

  • We fixed a bug that caused an invalid range when switching between datetime and date range selection when the exclusiveEndDates option was on.
  • We fixed a bug that prevented the changing of the start date when editing an already selected value on the calendar with the exclusiveEndDates option turned on.
  • We fixed a bug, where the exclusiveEndDates option was not taken into account when the invalid and valid options were processed.
  • We fixed an issue where the datepicker was throwing an error and could not be opened again after hitting the cancel button if the timegrid control was used.
  • We fixed a bug where the selected time was not scrolled into the view when the picker opened in the case of the timegrid control.

Eventcalendar

Fixed

  • We fixed an issue with the year view, where the onCellClick event was wrongly fired, and displayed the event popover, when selecting a year from the header navigation popup.
  • We added an export for the MbscRecurrenceRule typescript type.

Forms

Fixed

  • We fixed the segmented group component, to take the className option into account.

Scheduler

Fixed

  • We fixed the time formatting to take the amText and pmText options into account.

Select

Fixed

  • We fixed the selectMultiple option, which was not working in Javascript/jQuery, when initialized on a select element.

Timeline

Fixed

  • We fixed the styling of the events in listing mode, where the text ellipsis ran outside of the event boundaries in case of long titles.
  • We fixed the time formatting to take the amText and pmText options into account.
  • We fixed the horizontal virtual scroll, where in some cases days were missing on very large screens.

What's New

Bugfix release

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

Agenda

Fixed

  • We fixed an issue where the getEvents method did not return events that didn't have and end date.

Datepicker

Fixed

  • We fixed an issue where the selected value was returned in UTC instead of the specified dataTimezone, when used with the momentTimezone plugin.
  • We fixed the timegrid control to take timezones into account.
  • We fixed an issue where the value on the picker was not updated correctly on dynamic timezone change, in inline display mode.

Eventcalendar

Fixed

  • We fixed an issue with the multiple month view, where the months were unnecessarily re-rendered on day click, causing the event popover pointing at the wrong place.
  • We fixed an issue where the getEvents method did not return events that didn't have and end date.

Scheduler

Fixed

  • We fixed an issue where the getEvents method did not return events that didn't have and end date.

Timeline

Fixed

  • We fixed the resource property of the onCellClick, onCellDoubleClick and onCellRightClick events in Angular.
  • We fixed an error that occurred for multi-level hierarchies when expanding resources.
  • We fixed an issue where the events were not always properly rendered if they started outside of the view, or the start of the event was dragged outside of the view.
  • We fixed an issue where the getEvents method did not return events that didn't have and end date.

What's New

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.

All Components

New

  • We have added three shaking to the styles, using SASS variables.

Calendar integrations

Fixed

  • We fixed the scopes option for the Google calendar integration, which was not taken into account after the migration to the new auth service.
  • We fixed an error with the Google calendar integration, when used with public calendars without clientId specified.

Datepicker

Fixed

  • We improved the Angular component to init the date picker controls without any latency.

Eventcalendar

New

  • We added the eventDelete option that can be used to enable or disable event deletion independently of the clickToCreate or dragToCreate options.
  • We added the updateRecurringEvent helper function for editing recurring events. The function returns the updated event and the new event based on the configuration.

Fixed

  • We fixed the event width calculation which was not always correct in year or multiple month view.

Timeline

New

  • We virtualized the horizontal scrolling of the timeline, resulting in performance boost when working with long time periods.
  • We changed how scrolling works and how the timeline grid is being rendered. This serves as a prerequisite for full timeline virtualization.

Fixed

  • We fixed an issue where the title of all-day invalids was not displayed.

What's New

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.

All Components

Fixed

  • We fixed an issue where a canvas error was thrown in the React testing environment if some extra testing packages were not installed.

Calendar integrations

Fixed

  • We updated the deprecated Google Auth2 library used for the calendar integrations sign in with the new Google Identity Services.
  • We added support for passing Google/Outlook specific event properties to the calendar integrations add and update methods.

Datepicker

Fixed

  • We improved the accessibility of the calendar by focusing on the selected day when the calendar is opened.
  • We improved on the accessibility of the calendar control by adding the aria-selected attribute and button role for calendar days.

Eventcalendar

Fixed

  • We improved on the accessibility of the calendar view by adding the aria-selected attribute and button role for calendar days.

Scheduler

Fixed

  • We fixed the scroll to date feature that was not working correctly when horizontal scrolling was necessary.

Segmented

Fixed

  • We fixed an accessibility issue for voiceover where the segmented items were read like buttons.

Timeline

Fixed

  • We fixed an issue where drag & drop was not working correctly with collapsed resource groups.

What's New

Bugfix release

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

All Components

Fixed

  • We fixed the 'Today' translation for Portuguese, and the 'End' translation for all languages.

Datepicker

Fixed

  • We fixed an bug in the calendar that incorrectly slid the multi-mont view, if a selection was not made from the first month.
  • We fixed an issue which caused a runtime error when the calendar was used with the timegrid in Angular.

Eventcalendar

Fixed

  • We fixed an issue where the event argument of the onEventDragStart and onEventDragEnd events was not set.
  • We fixed an issue where the onEventDragStart and onEventDragEnd events were incorrectly fired when an event was created with click or double click.

Scheduler

Fixed

  • We fixed an issue where the onEventDragStart and onEventDragEnd events were incorrectly fired when an event was created with click or double click.

Select

Fixed

  • We fixed the dropdown option, which was supposed to hide the dropdown arrow icon on the input, when set to false, but it was not working.

Timeline

Fixed

  • We fixed an issue where an error was thrown, when opening a parent resource, which was initially collapsed.
  • We fixed an issue where the onEventDragStart and onEventDragEnd events were incorrectly fired when an event was created with click or double click.

What's New

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.

Agenda

Fixed

  • We fixed an issue in React 18, where the year and multi-year views were not correctly removed from the markup after animation. This made the component unusable.

Datepicker

New

  • We added a new valid option, that can be used instead of the invalid option to set valid dates, times, ranges instead of invalidating values.

Fixed

  • We fixed an issue, where the timezone plugins couldn't be imported from packages that only contained the Datepicker component.
  • We exported the MbscPopupDisplay option, which was not reachable before. This is necessary if the display is set dynamically.
  • We fixed an issue in React 18, where the year and multi-year views were not correctly removed from the markup after animation. This made the component unusable.
  • We fixed an issue on the date wheel, where the 'D' letter from the week day name was incorrectly replaced with the date number.
  • We fixed an issue with time validation, where some hours were not displayed as disabled in 24 hour format if the min/max options were also used.
  • We added the aria-hidden attribute on the calendar months that are out of view.
  • We fixed the value parsing which was not working in case of the 'preset-range' selection mode.

Eventcalendar

New

  • We added the onEventDragStart and onEventDragEnd lifecycle events which are triggered when an event is being dragged. This applies to both on-calendar events and external (to-be-created) events.

Fixed

  • We fixed an issue in React 18, where the year and multi-year views were not correctly removed from the markup after animation. This made the component unusable.

Scheduler

New

  • We added support for displaying the time tracks in multiple timezones at the same time. The timezones can be listed using the timezones property of the schedule object under the view option.
  • We added the onEventDragStart and onEventDragEnd lifecycle events which are triggered when an event is being dragged. This applies to both on-calendar events and external (to-be-created) events.

Fixed

  • We fixed the height of the events ending exactly at daylight saving time.
  • We fixed the navigate function to correctly scroll to the selected date horizontally if it's out of view.
  • We fixed an issue in React 18, where the year and multi-year views were not correctly removed from the markup after animation. This made the component unusable.

Timeline

New

  • We added the year view type to the timeline, which can be used instead of type: 'month' and size: 12.
  • We added the onEventDragStart and onEventDragEnd lifecycle events which are triggered when an event is being dragged. This applies to both on-calendar events and external (to-be-created) events.

Fixed

  • We fixed the width of the events ending exactly at daylight saving time.
  • We fixed the sticky day/month/week labels which did not work after opening/collapsing resource groups or after changing the resources in Angular.
  • We fixed an issue in React 18, where the year and multi-year views were not correctly removed from the markup after animation. This made the component unusable.

What's New

Bugfix release

Calendar integrations

New

  • We added support for loading public Google calendars, without the need for authentication.

Fixed

  • We fixed an error which occurred if the loaded Google calendar was not present on the calendar list of the user.
  • We fixed the type definition of the Google calendar integration to accept the apiKey option.

Datepicker

Fixed

  • We fixed the localization of month names in multiple month view in Angular.
  • We fixed the calendar styling which did not expand to full width in bottom mode in Angular.
  • We fixed the parsing of the input value, which was not working if timezones were used.

Eventcalendar

Fixed

  • We fixed the localization of month names in multiple month view in Angular.
  • We fixed the length of the recurring event occurrence in case of all-day events, which, depending on the end time, was shown one day longer or shorter on the day of daylight saving change.
  • We improved and simplified the calculation of the event label widths, which was not exactly accurate on the print view.

Select

Fixed

  • We fixed an issue where the input value was not updated if the text of the selected value has been changed.

Timeline

Fixed

  • We fixed the event length calculation on the days of daylight saving change.

What's New

Bugfix release

All Components

Fixed

  • We fixed a runtime error in Angular, which occured if the reflect-metadata package was also used in the project.

Agenda

Fixed

  • We fixed an issue where the agenda scroll was jumping, if selectedDate was used in controlled mode in React.

Datepicker

Fixed

  • We fixed the validation, which did not work correctly when single date wheel was used on the date scroller. Recurring invalids were only loaded for the next and previous months from the initial date.
  • We improved compatibility with Ionic input to make it work correctly with floating labels and trigger the ionChange event as well.
  • We added aria-label attributes to the next and previous buttons on the calendar.

Eventcalendar

Fixed

  • We added the missing label and labels properties to the MbscLabelClickEvent interface.
  • We added aria-label attributes to the next and previous buttons on the calendar.
  • We fixed an issue where the selected date was not displayed correctly when timezones were used.

Forms

Fixed

  • We fixed an issue where it was not possible to uncheck a radio button in jQuery and Javascript.
  • We improved the accessibility of the segmented item by allowing to specify aria-label for icon-only items.

Scheduler

Fixed

  • We fixed the the event positioning logic for external drag & drop that still ended up in an error, when the external event was dragged from the right side.
  • We fixed an issue where some occurrences of weekly recurring events were skipped.
  • We fixed the date argument of the onCellClick event, which was incorrect on the day of daylight saving start or end.

Timeline

Fixed

  • We fixed the resize in event listing mode and for all-day events, if there was no end date specified.
  • We fixed an issue where some occurrences of weekly recurring events were skipped.
  • We fixed the date argument of the onCellClick event, which was incorrect on the day of daylight saving start or end.
  • We fixed the drag & drop of all-day events, where the day boundaries were not respected.

What's New

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.

All Components

New

  • We added a new calendar integration plugin that comes with Google Calendar and Outlook Calendar integration for syncing, loading, reading and writing events and calendars. Let your users sync with their personal and work calendars.

Fixed

  • We fixed the yearly recurrence, which was not working correctly if month was not explicitly specified, now it takes the month of the event start.
  • We fixed the weekly recurrence, which was not working if week day was not explicitly specified, now it takes the week day of the event start.
  • We fixed the date parser to accept ISO8601 basic format as well (e.g. '20210214T1000' as well, not just '2021-02-14T10:00').

Datepicker

New

  • We added support for timezones. The dataTimezone and displayTimezone options enable you to store the value in one timezone, and then display it in another. We use external libraries to handle the timezone information, currently supporting moment-timezone and luxon.

Fixed

  • We fixed a bug in case of the range selection, when the same range was selected twice, the end date time part was jumping to the end of the day.
  • We fixed the bottom display on iOS 15 Safari, where there was an extra space under the picker.
  • We fixed the time grid css style loading that didn't take the included themes in account.

Eventcalendar

Fixed

  • We fixed the occasional initial flash of styling in desktop mode.
  • We fixed a bug in the year view where the first month wasn't always January after dynamically switching from timeline or scheduler.
  • We fixed the lastDay argument of the onPageLoading and onPageLoaded events, which was not correct in case of the year view.
  • We fixed the year view that appeared incorrectly in the Windows theme.

Forms

Fixed

  • We fixed the stepper css style loading that didn't take the included themes in account.

Scheduler

Fixed

  • We fixed the the event positioning logic for external drag & drop that ended up in an error in some cases.
  • We fixed the drag & drop, which worked incorrectly in day mode with resources.

Select

Fixed

  • We fixed the bottom display on iOS 15 Safari, where there was an extra space under the picker.

Timeline

Fixed

  • We fixed the the event positioning logic for external drag & drop that ended up in an error in some cases.
  • We fixed the resize and drag & drop, where day boundaries were incorrectly calculated for all-day events and in event listing mode.

What's New

Bugfix release

Agenda

Fixed

  • We fixed the header navigation picker styling for the Windows theme (broken in 5.14.0).

Eventcalendar

Fixed

  • We fixed the header navigation picker styling for the Windows theme (broken in 5.14.0).

Forms

Fixed

  • We fixed an issue where the button was not initialized correctly on span or a elements in jQuery/Javascript.

Scheduler

Fixed

  • We fixed the header navigation picker styling for the Windows theme (broken in 5.14.0).

Select

Fixed

  • We fixed an issue, where the users were able to type into the select input (broken in 5.14.0).

Timeline

Fixed

  • We fixed the header navigation picker styling for the Windows theme (broken in 5.14.0).

What's New

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.

Datepicker

New

  • We added the inputTyping option that can be used to allow typing into the input field in desktop mode even if the date picker is shown. This is on by default and can be turned off by setting the inputTyping option to false.

Eventcalendar

New

  • We added the originEvent property to the onEventCreate and onEventCreateFailed lifecycle events when working with recurring events.
  • The newEvent and oldEventOccurrence properties got added to the onEventUpdate and onEventUpdateFailed lifecycle events that can come in handy when working with recurring events.
  • We added the mbsc-readonly-event css class to the fixed events so that custom styling can be applied to these read-only events if necessary.
  • We added dynamic row height support that expands the height of the rows depending on the number of events. This feature can be turned on by setting the labels: 'all' or labels: 5 property of the view option. This makes displaying all events or up to x events possible.

Fixed

  • We fixed a bug that occurred for certain time zones and broke the event label rendering.

Forms

Fixed

  • We fixed the notification css style loading that didn't take the included themes in account.
  • We improved the accessibility by adding the aria-disabled attribute on disabled buttons.

Scheduler

New

  • We added the mbsc-readonly-event css class to the fixed events so that custom styling can be applied to these read-only events if necessary.
  • We added support for monthly schedule views.
  • We added support for defining the visible days through the startDay and endDay properties. Days outside of the the start-end range will be hidden.

Fixed

  • We fixed a bug that made some one day events (with start date only) become two day events on drag.
  • We fixed a number of rendering issues in IE11.

Timeline

New

  • We added the mbsc-readonly-event css class to the fixed events so that custom styling can be applied to these read-only events if necessary.
  • We added support for defining the visible days through the startDay and endDay properties. Days outside of the the start-end range will be hidden.
  • We added support for week numbers in the header. Can be turned on using the weekNumbers property of the view option.

Fixed

  • We fixed a rendering bug that happened with overlapping events when event listing mode was turned on dynamically.
  • We fixed a number of rendering issues for IE11.

What's New

Bugfix release

All Components

Fixed

  • We added missing type declarations for the jQuery version, so chaining jQuery selector functions now work with proper typings.

Datepicker

Fixed

  • We fixed the minRange and maxRange options to take into account the time differences when daylight savings change.
  • We fixed in issue where the calendar swipe got stuck after a while on some Android devices.
  • We fixed a styling issue that prevented the calendar to show up in Internet Explorer 11.

Scheduler

Fixed

  • We fixed an issue where an event ending at 00:00 appeared on the next day as well, filling the whole day.

Timeline

Fixed

  • We fixed an issue where all-day invalid ranges (without specified start and end time) were not displayed.
  • We fixed the display of all-day events, where the overlap was not checked correctly, and the width was not correct for events ending outside of the view.

What's New

Bugfix release

Datepicker

Fixed

  • We fixed an issue where the start and end inputs did not work correctly for the range picker in Angular.
  • We fixed an issue where using the date picker on ion-input did not work correctly in Angular.

Select

Fixed

  • We fixed the ARIA labels on the select items.
  • We fixed the keyboard arrow navigation of the group select.

What's New

Bugfix release

Agenda

Fixed

  • We fixed the navigation and title in case of custom header, which was not updated in jQuery and plain javascript.

Datepicker

Fixed

  • We fixed the selected line on the date & time scroller, which was hidden in desktop mode with the Material theme.
  • We fixed the navigation and title in case of custom header, which was not updated in jQuery and plain javascript.
  • We fixed an issue where the screen remain locked if the date input was double clicked in Angular.
  • We fixed an issue where the picker did not work correctly on Safari, when used with IonInput in Ionic React.
  • We fixed the vertical calendar scroll, which broke in v5.13.0.

Eventcalendar

Fixed

  • We fixed the navigation and title in case of custom header, which was not updated in jQuery and plain javascript.
  • We fixed an issue, where the target was not set correctly inside the onEventCreated and onEventUpdated events, when custom label rendering was used.
  • We fixed the deletion of recurring events, where the created exception date was not correct.
  • We fixed an issue where the updated event was not re-rendered immediately when using the updateEvent method in jQuery and plain javascript.
  • We fixed the vertical calendar scroll, which broke in v5.13.0.

Scheduler

Fixed

  • We fixed the navigation and title in case of custom header, which was not updated in jQuery and plain javascript.
  • We fixed the deletion of recurring events, where the created exception date was not correct.

Timeline

Fixed

  • We fixed the navigation and title in case of custom header, which was not updated in jQuery and plain javascript.
  • We fixed the deletion of recurring events, where the created exception date was not correct.
  • We fixed the drag & drop validation which was not working correctly if the invalid range was spanning across multiple days.

What's New

Bugfix release

Datepicker

Fixed

  • We fixed the calendar header, which sometimes did not appear, only after clicking on a day.
  • We fixed the multiple month and year view, which appeared incorrectly in Firefox.

Eventcalendar

Fixed

  • We fixed the getInvalids method, which only returned the first invalid object from the given range.

Scheduler

Fixed

  • We fixed the getInvalids method, which only returned the first invalid object from the given range.

Timeline

Fixed

  • We fixed the getInvalids method, which only returned the first invalid object from the given range.

What's New

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.

All Components

Fixed

  • We updated the month and day names in the Dutch localization to be consistent with other locale.

Eventcalendar

Fixed

  • We fixed the domEvent property of the onEventDelete event argument, which was not correctly set.
  • We fixed the enhancement of mobiscroll components inside custom event template in the event popover, which was not working properly in jQuery/Javascript.
  • We fixed an issue where the event labels were split on the first day of the month in case of week view.
  • We fixed an issue where the recurring exception date was not in the correct timezone when editing/deleting a recurring event.

Forms

Fixed

  • We fixed the borders of the iOS underline styled textarea and select in Angular.

Scheduler

Fixed

  • We fixed the domEvent property of the onEventDelete event argument, which was not correctly set.
  • We fixed the width of the dragged all-day event, which was not always correct.
  • We fixed an issue with the navigation in day view, where clicking on a day would load a different week, if the first day of the week was not Sunday, and startDay and endDay was not explicitly set.
  • We fixed an issue where the recurring exception date was not in the correct timezone when editing/deleting a recurring event.
  • We changed the minimum length of an event to be the value of dragTimeStep during resize, which was hard-coded to 15 minutes. ( #494 )

Timeline

Fixed

  • We fixed the domEvent property of the onEventDelete event argument, which was not correctly set.
  • We fixed the sticky resource column which was not working correctly on iOS Safari < 13.
  • We fixed an issue, where the events were overlapping each other on initial show, when custom event height was used.
  • We fixed an issue where the recurring exception date was not in the correct timezone when editing/deleting a recurring event.
  • We changed the minimum length of an event to be the value of dragTimeStep during resize, which was hard-coded to 15 minutes. ( #494 )

What's New

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.

Agenda

New

  • We added print optimized styling for PDF export and printing.
  • We added the tooltip property to the event data that overrides the default event tooltip text.
  • We added the showEventTooltip option which can be used to hide the native event tooltip.
  • We added means to set the reference date for views with custom length ranges. Through the new refDate option, ranges can start from the any date, like the first day of the year or dynamically from the current day.

Fixed

  • We fixed the quick navigation label that was wrong for year selection (#493).
  • We fixed the weekly recurring event logic that was wrong in case of repeat intervals greater than one.

Datepicker

Fixed

  • We fixed the time validation, which did not disable some values when there were multiple invalid entries for the same day.
  • We fixed the timegrid scroll to the selected value, which was not working properly in Angular with animations module loaded.
  • We fixed an issue where the manually entered value was not picked up on the first edit.
  • We fixed the quick navigation label that was wrong for year selection. ( #493 )

Eventcalendar

New

  • We added print optimized styling for PDF export and printing.
  • We added the tooltip property to the event data that overrides the default event tooltip text.
  • We added the showEventTooltip option which can be used to hide the native event tooltip.
  • We added means to set the reference date for views with custom length ranges. Through the new refDate option, ranges can start from the any date, like the first day of the year or dynamically from the current day.

Fixed

  • We fixed the quick navigation label that was wrong for year selection. ( #493 )
  • We fixed the weekly recurring event logic that was wrong in case of repeat intervals greater than one.

Forms

Fixed

  • We fixed textarea sizing in case of programmaticall value set in jQuery and JS.
  • We fixed the password input padding with toggle icons.
  • We fixed the placeholder text for the file input in Angular.

Scheduler

New

  • We added startDay and endDay support for day view, weekdays outside of start and end days will be skipped upon navigation.
  • We added support for multiple day and week views. Set the number of consecutive days or weeks through the size property to the view option.
  • We added print optimized styling for PDF export and printing.
  • We added the tooltip property to the event data that overrides the default event tooltip text.
  • We added the showEventTooltip option which can be used to hide the native event tooltip.
  • We added means to set the reference date for views with custom length ranges. Through the new refDate option, ranges can start from the any date, like the first day of the year or dynamically from the current day.

Fixed

  • We fixed the quick navigation label that was wrong for year selection. ( #493 )
  • We fixed the weekly recurring event logic that was wrong in case of repeat intervals greater than one.

Select

Fixed

  • We fixed a bug in angular that prevented the item templates to show up in case of multiple selection on mobile devices.
  • We include the getJson util function as well, when the Select is downloaded individually from our Download Builder.
  • We fixed a bug in the case of multi selection, where you could remove items from the tag input when the component was disabled.
  • We fixed a bug in the case of multi selection, where selected items disappeared from the tag input, when remote filtering was used.

Timeline

New

  • We added dynamic row height support that expands the height of the resource rows depending on the number of events. This is on by default and can be changed in the rowHeight option by setting it from 'variable' to 'equal'.
  • We added startDay and endDay support for day view, weekdays outside of start and end days will be skipped upon navigation.
  • We added support for multiple day, week and month views. Set the number of consecutive days or weeks through the size property to the view option. Year views are supported through multiples of months.
  • We added print optimized styling for PDF export and printing.
  • We added the tooltip property to the event data that overrides the default event tooltip text.
  • We added the showEventTooltip option which can be used to hide the native event tooltip.
  • We added means to set the reference date for views with custom length ranges. Through the new refDate option, ranges can start from the any date, like the first day of the year or dynamically from the current day.

Fixed

  • We fixed the weekly recurring event logic that was wrong in case of repeat intervals greater than one.
  • We fixed the resource header template to make the click/tap events run correctly.
  • We fixed the quick navigation label that was wrong for year selection. ( #493 )

What's New

Bugfix release

Datepicker

Fixed

  • We fixed an issue, where the Set button disabled state was not updated on range end date selection in Angular.

Scheduler

Fixed

  • We fixed the display of all-day events in case of resources grouped by date.
  • We fixed the positioning of the overlapping events in RTL mode, Angular.
  • We fixed the text overflow for short events in Safari.
  • We fixed the event resize when resources were used in group by date mode.

Timeline

Fixed

  • We fixed the display of colored and invalid ranges spanning across multiple days, which appeared only on the first day, when used together with slots.
  • We fixed the display of the dragged event spanning across multiple days, which appeared only on the first day, when used together with slots.
  • We fixed an issue where in listing mode, events created with click were spanning across 2 days.

What's New

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.

Datepicker

Fixed

  • We fixed the calendar swipe, which was not working in RTL mode (regression introduced in v5.8.0).
  • We fixed an issue in the mobile scroller, where the value was not set through the Set button, if the wheels were not moved before.

Eventcalendar

Fixed

  • We fixed the calendar swipe, which was not working in RTL mode (regression introduced in v5.8.0).
  • We fixed the calendar next page navigation in Angular, which failed if the first day of the next month was selected on the view.

Scheduler

New

  • We improved the event label rendering to remain sticky on scrolling. This improves the overall UX of the scheduler.

Fixed

  • We fixed recurring events, where sometimes an occurrence did not appear on the first or last day of the view.
  • We fixed the external drop to prevent overwriting the drag event data when extendDefaultEvent is also used.

Select

New

  • We added item templating support that enables custom styled content and markup inside the select items. Using the itemTemplate or the renderItem options, depending on which framework you use, you can render any component/element inside the wheels of the select.
  • We introduced the group wheel for selects with grouping. Using the showGroupWheel option, the group wheel is rendered containing the labels of the groups to improve navigation in case of long lists.

Fixed

  • We fixed the onFilter event. Returning false will now correctly prevent the built in filtering.
  • We fixed an issue that prevented value selection on desktop when clicking on items selected through defaults.

Timeline

New

  • We added templating support for the empty cell above the resource column through the renderResourceHeader and resourceHeaderTemplate options.
  • We improved the event label rendering to remain sticky on scrolling. This improves the overall UX of the timeline.
  • We introduced a new a horizontal level daily grouping feature called slots. This can be used instead of the continuous timeline for custom time slots and work shifts.

Fixed

  • We fixed recurring events, where sometimes an occurrence did not appear on the first or last day of the view.
  • We fixed the external drop to prevent overwriting the drag event data when extendDefaultEvent is also used.
  • We fixed the navigation logic of the year/month selector from the header to always scroll to the first day of the selected month.

What's New

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.

All Components

Fixed

  • We fixed an issue which caused the React server side rendering to fail with the trial version.

Agenda

Fixed

  • We fixed the daily agenda rendering where events were not displayed on the day of daylight saving change.

Datepicker

Fixed

  • We fixed an issue where the initial calendar view was not updated if min or max was changed dynamically, and there was no selected value.

Forms

Fixed

  • We fixed an issue which caused the 'Cannot flush updates when React is already rendering' error in React, when a toast or snackbar was closing.

Popup

Fixed

  • We fixed an issue which caused the 'Cannot flush updates when React is already rendering' error in React, if the popup was not closed with a click (e.g. on element hover out, or automatic close with a timer).

Scheduler

Fixed

  • We fixed the view rendering to render the days from the same week if startDay and endDay was changed dynamically, e.g. changing from week to work week.
  • We fixed the firstDay and lastDay arguments of the onPageLoading, onPageLoaded and onPageChange events to based off of the rendered days rather than the entire week.
  • We fixed the 'start-end' validation that is triggered on drag & drop, to allow events starting right at an invalid range ending.
  • We fixed the drag & drop in RTL mode, which was not working correctly if there was horizontal scrolling in the view.
  • We fixed the scrolling during drag & drop, which was not working correctly in RTL mode.

Select

Fixed

  • We fixed an issue which caused the 'Cannot update during an existing state transition' error in React if picker was closed using keyboard (Enter or Esc).

Timeline

Fixed

  • We fixed and improved the scrolling performance of the header, which followed the horizontal movement of the timeline body with a visible latency.
  • We fixed an erratic behavior of the resource column that happened on iOS 14 and earlier versions of Safari.
  • We fixed the scroll to time functionality in RTL.
  • We fixed the view rendering to render the days from the same week if startDay and endDay was changed dynamically, e.g. changing from week to work week.
  • We fixed the firstDay and lastDay arguments of the onPageLoading, onPageLoaded and onPageChange events to based off of the rendered days rather than the entire week.
  • We fixed the 'start-end' validation that is triggered on drag & drop, to allow events starting right at an invalid range ending.
  • We fixed the event resize handle touch area on touch devices, so it's easier to grab the resize handles of an event.
  • We fixed the scrolling during drag & drop, which was not working correctly in RTL mode.

What's New

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.

Datepicker

New

  • We added multiple month and year view to the calendar and range picker. Enable it through the calendarType and calendarSize options. Use it to build quarterly views, 6 month views or full year views.
  • We have updated the styling of the week numbers.

Fixed

  • We fixed the rendering of the labels when outer days were not shown.

Eventcalendar

New

  • We improved on the rendering of the labels to indicate whether a label continues on the next week or in the next month.
  • We added multiple month and year view to the event calendar. Enable it through the calendar.type and calendar.size under the view option. Use it to build quarterly views, 6 month views or full year views.
  • We have updated the styling of the week numbers.

Fixed

  • We fixed the rendering of the labels when outer days were not shown.

Forms

Fixed

  • We fixed the floating labels to render correctly if the initial value is 0.
  • We fixed the textarea sizing, which was not working correctly in Angular on programatic value change.

Popup

Fixed

  • We fixed a quirky issue that happened in Safari. Whenever a picker was opened from within a popup the page got scrolled to top when closing the popup.

Scheduler

Fixed

  • We fixed scroll to time in React strict mode. This happened for development builds when calling the navigate function.
  • We fixed the rendering of events where no duration is added.

Select

New

  • We added support for empty states which enables cancelling and clearing a selection and an initial empty state. This comes as a UX improvement above the native selects in the browsers.

Timeline

Fixed

  • We fixed scroll to time in React strict mode. This happened for development builds when calling the navigate function.
  • We fixed the display of events with no duration.
  • We added a minimum width to events. This fixes the rendering of events where no duration or a very short duration is added.

What's New

Bugfix release

Agenda

Fixed

  • We fixed an issue with the recurring events from and until dates, where timezone was not handled correctly.
  • We fixed the ordering of all-day events to take into account the time as well, if specified.

Datepicker

Fixed

  • We fixed the hovered date styling for range picking, which did not work, if on start date selection the hovered date was after end, or on end date selection the hovered date was before start.

Eventcalendar

Fixed

  • We fixed an issue with the recurring events from and until dates, where timezone was not handled correctly.
  • We fixed the ordering of all-day events to take into account the time as well, if specified.

Scheduler

Fixed

  • We fixed the external drop to set the resource correctly on the created event.
  • We fixed an issue with the recurring events from and until dates, where timezone was not handled correctly.
  • We fixed the ordering of all-day events to take into account the time as well, if specified.

Timeline

Fixed

  • We fixed an issue which caused an AOT build error in Angular 4.
  • We fixed the external drop to set the resource correctly on the created event.
  • We fixed an issue with the recurring events from and until dates, where timezone was not handled correctly.
  • We fixed the ordering of all-day events to take into account the time as well, if specified.

What's New

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.

Agenda

Fixed

  • We fixed the date format on the day headers which was incorrect for the following locales: ar - Arabic, bg - Bulgarian, fa - Farsi, fr - French, he - Hebrew, hi - Hindi, it - Italian, ja - Japanese, ko - Korean, lt - Lithuanian, nl - Dutch, sr - Serbian, th - Thai, zh - Chinese.
  • We fixed the date header of the day view agenda, if multiple days are displayed.

Datepicker

New

  • We added preset range selection. It can be enabled with select: 'preset-range'. Use it for single or multiple week selection by configuring the firstSelectDay (from Mon-Sun) and selectSize (number of days eg. 3 for three days, 7 for a week or 14 for two weeks).
  • We added the onActiveDateChange lifecycle event that is triggered when the start/end selection is being cycled in case of range selection. It is useful when building a custom validation logic and other advanced interactions.
  • We added the rangeEndInvalid option that lets users pick an end date on the first disabled date occurring after the start date of the range. This is useful for accommodation booking where the check out date can happen on a day that is already occupied.

Fixed

  • We fixed some issues regarding IE11 compatibility in the timegrid control.
  • We fixed a bug that caused the datepicker to change the time part of the selection to the default value when using the calendar and time scroller and setting a temporary value prior to selection.

Eventcalendar

New

  • We added the name of the month to the first day cell to improve navigation. This UX improvement helps users derive the selected month at a glance.

Scheduler

Fixed

  • We added the possibility to set the resource of a new event using the extendDefaultEvent option.
  • We fixed the navigate method to always scroll to the given date and time.

Select

New

  • We added better keyboard support for single and multiple selection. You can now navigate the wheel with the arrow keys and select options with space and enter keys.

Fixed

  • We fixed the placeholer in the Javascript and jQuery versions.
  • We added the missing inline options for the filterPlaceholderText and the filterEmptyText in angular.

Timeline

New

  • We added start/end time support to the timeline view for setting recurring start and end times. Ranges outside the start and end times will not be generated.
  • We improved the scrolling experience of the timeline view and enabled scrolling on the resource list.

Fixed

  • We added the possibility to set the resource of a new event using the extendDefaultEvent option.
  • We fixed the initial height of the resource row in event listing mode.
  • We fixed the navigate method to always scroll to the given date and time.

What's New

Bugfix release

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

Agenda

Fixed

  • We fixed an issue where the selected date on the calendar was changed when switching from month view to week view, when the agenda was displayed together with the calendar.
  • We fixed all-day events rendering when timezones are used. All-day events will ignore timezones, they will be displayed for the whole day in every timezone.

Datepicker

Fixed

  • We fixed an issue where the time parts of the selected date, which cannot be selected (e.g. seconds) was not set to 0.

Eventcalendar

Fixed

  • We fixed all-day events rendering when timezones are used. All-day events will ignore timezones, they will be displayed for the whole day in every timezone.

Scheduler

New

  • We added a space on the right (or left in RTL) of the events, so a new event can be created on the time slot where an event already exists.

Fixed

  • We fixed an issue where the dragged event remained faded when it was tapped on touch screen.
  • We fixed all-day events rendering when timezones are used. All-day events will ignore timezones, they will be displayed for the whole day in every timezone.

Timeline

Fixed

  • We fixed all-day events rendering when timezones are used. All-day events will ignore timezones, they will be displayed for the whole day in every timezone.
  • We fixed an issue where the dragged event remained faded when it was tapped on touch screen.
  • We fixed an issue where the colored range title did not appear when used with Angular.
  • We fixed an issue where the onEventHoverIn and onEventHoverOut events were not fired.
  • We fixed an issue where in case of external drop the event was always set to all-day.

What's New

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.

All Components

Fixed

  • We fixed the SCSS file generation, where the order of the rules was incorrect, causing style bugs when the SCSS file was used instead of the CSS.

Datepicker

Fixed

  • We fixed an issue in the datepicker, that allowed end times to be selected before the start time when selecting only time ranges.
  • We fixed a styling issue where the time scroller wheel was not expanded to full width in desktop mode.
  • We fixed a bug that caused the set button to remain disabled even though a value was selected. The problem occured when using the calendar and time controls and having the range labels hidden.
  • We fixed an issue, where the placeholder did not appear in case of tag input.

Eventcalendar

New

  • We added the getEvents method which will return the event data between a given range.
  • We added the getInvalids method which will return the invalid values between a given range.
  • We added the onEventHoverIn and onEventHoverOut lifecycle events, that enable the creation of custom actions when events are hovered.

Forms

Fixed

  • We fixed a styling issue, where the input text SCSS variable was not applied on the input label.

Scheduler

New

  • We added the title and textColor properties for the colors option to customize the title and the title color of the colored ranges.
  • We added the currentResource property for the event data object, which can be used to pass the resource object to the custom event template.
  • We added the getEvents method which will return the event data between a given range.
  • We added the getInvalids method which will return the invalid values between a given range.

Select

New

  • We added support for displaying group headers.

Fixed

  • We fixed an issue where the change events were not triggered when the select component was initialized on a select html element.
  • We fixed an issue, where the placeholder did not appear in case of tag input.

Timeline

New

  • We added grouping/hierarchy support for the resources. The resource object has two new properties the children property which holds the child resources and the collapsed property determining the collapsed state of the actual group.
  • We added the title and textColor properties to the colors option to customize the title and the text color of the colored ranges.
  • We added the currentResource property to the event data object passed to the custom event template, which holds the resource where the event is being rendered.

Fixed

  • We fixed the form component initialization inside the resource templates in jQuery and plain Javascript.
  • We fixed the target argument for the onEventCreated and onEventUpdated events, which was not set properly.
  • We fixed an issue, where in week or month view events started on the previous week or month were not displayed.
  • We fixed the rendering and drag & drop for all-day events.
  • We fixed the min and max options where the time part was not taken into account.

What's New

Bugfix release

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

Datepicker

Fixed

  • We fixed the invalid value styling on the date scroller wheels, which got broken in 5.7.0.
  • We fixed a styling issue, where the hidden outerdays background color was still shown when using the colors option.

Eventcalendar

Fixed

  • We fixed a styling issue, where the hidden outerdays background color was still shown when using the colors option.

Forms

Fixed

  • We fixed an issue that prevented the placeholder text to show up on the textarea component in Angular.

Timeline

Fixed

  • We fixed an issue, where the timezone options were not taken into account on the timeline view, when a timezone plugin was used.

What's New

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.

All Components

Fixed

  • We fixed the global display mode when set through setOptions.

Agenda

Fixed

  • We fixed a bug between the agenda and version 2 of the luxon timezone library.

Datepicker

New

  • We introduced the minTime and maxTime options, that limit the time part of the selection in a recurring manner. Times before minTime and times after maxTime can't be selected on the date picker's time and time grid control. This is useful when limiting opening hours for example.
  • We added the renderDay and dayTemplate options for custom day cell rendering that can be used to customize the full content of the calendar cells.
  • We added the renderDayContent and dayContentTemplate options to improve on the customizability. These options will be helpful if you only want custom content and don't want to bother with the basic look of the days.
  • We added the timegrid control that can be used for time selection as an alternative to the scroller and time list, especially useful for appointment booking.

Eventcalendar

New

  • We added the renderDay and dayTemplate options for custom day cell rendering that can be used to customize the full content of the event calendar cells.
  • We added the renderDayContent and dayContentTemplate options to improve on the customizability. These options will be helpful if you only want custom content and don't want to bother with the basic look of the days.

Fixed

  • We fixed a bug between the event calendar and version 2 of the luxon timezone library.

Scheduler

New

  • We added the renderDay and dayTemplate options for custom day cell rendering that can be used to customize the headers of the scheduler time grid.
  • We added the renderDayContent and dayContentTemplate options to improve on the customizability. These options will be helpful if you only want custom content and don't want to bother with the basic look of the days.

Fixed

  • We fixed a bug between the scheduler and version 2 of the luxon timezone library.

Select

New

  • We added support for filtering values making it easier to use with large datasets. Filtering can be turned on with the filter: true option. It renders a filter input above the values. The filterEmptyText and filterPlaceholderText is localized.

Timeline

New

  • We introduced event listing, that provides a summary for the timeline. Controlled thoguh the eventList property that is localted under the view configuration settings. This can be used to easily visualize shifts and daily workloads.

What's New

Bugfix release

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

Scheduler

Fixed

  • We fixed the event drag & drop on touch devices in Angular where an error was thrown if there was interaction with the events.

Timeline

Fixed

  • We fixed the timeline resources column was not scrolling alongside the grid in Angular.
  • We fixed the incorrect resource calculation during drag & drop interactions when there was vertical scroll in the grid.

What's New

Bugfix release

This release fixes a bug in the monthly timeline rendering.

Scheduler

Fixed

  • We fixed a bug in the monthly timeline view that didn't render the last day.

What's New

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.

Agenda

New

  • We added exclusive end date support for events, invalids and colors. When enabled using the exclusiveEndDates option, ranges that end on 00:00 will count until the previous day. This option is automatically turned on when working with timezones.
  • We added support for displaying events in different timezones. The dataTimezone and displayTimezone options enable you to parse the event data in one timezone, and then display it in another. We use external libraries to handle the timezone information, currently supporting moment-timezone and luxon.

Datepicker

Fixed

  • We fixed the disabling of the show/hide animation, which did not work correctly.

Eventcalendar

New

  • We added exclusive end date support for events, invalids and colors. When enabled using the exclusiveEndDates option, ranges that end on 00:00 will count until the previous day. This option is automatically turned on when working with timezones.
  • We added support for displaying events in different timezones. The dataTimezone and displayTimezone options enable you to parse the event data in one timezone, and then display it in another. We use external libraries to handle the timezone information, currently supporting moment-timezone and luxon.

Fixed

  • We fixed the onCellDoubleClick event, which only worked with clickToCreate enabeled.
  • We fixed the mouse cursor styling on empty days.

Scheduler

New

  • We added exclusive end date support for events, invalids and colors. When enabled using the exclusiveEndDates option, ranges that end on 00:00 will count until the previous day. This option is automatically turned on when working with timezones.
  • We added vertical and horizontal auto-scroll to drag & drop. The viewport automatically follows when the event approaches the edge of the scrollable area.
  • We added support for displaying events in different timezones. The dataTimezone and displayTimezone options enable you to parse the event data in one timezone, and then display it in another. We use external libraries to handle the timezone information, currently supporting moment-timezone and luxon.
  • We added a month view to the timeline.

Fixed

  • We fixed the dragTimeStep option, which was not working correctly if was greater than 1 hour.

Select

New

  • We added multiple select inputs. This brings a new styling to mobiscroll inputs that are linked to multi-select pickers by displaying each selection as separate chips (small containers with text that stand out) on the UI.

Fixed

  • We fixed a bug that prevented the value selection when using the select with reactive forms in Angular 9+.

Timeline

New

  • We added vertical and horizontal auto-scroll to drag & drop. The viewport automatically follows when the event approaches the edge of the scrollable area.

What's New

Bugfix release

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

All Components

Fixed

  • We fixed another AOT build error in Angular < 9.

Datepicker

Fixed

  • We fixed the default time wheel ordering for the Arabic language.

Eventcalendar

Fixed

  • We fixed the onCellDoubleClick event which was not firing in jQuery/JS.

Scheduler

Fixed

  • We fixed the onCellDoubleClick event which was not firing in jQuery/JS.

Timeline

Fixed

  • We fixed the onCellDoubleClick event which was not firing in jQuery/JS.

What's New

Bugfix release

This release fixes important issues of the timeline view.

Timeline

Fixed

  • We fixed the timeline navigation in Angular, where it always changed the month instead of week or day.
  • We fixed the timeline date header in day mode.
  • We fixed a build error in Angular.

What's New

Bugfix release

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

Datepicker

Fixed

  • We fixed an issue where the selected value was not filled into the input in IE11.

Scheduler

Fixed

  • We fixed the event creation with click or double click, where event had no length. We also made an improvement so that the newly created event will fill the clicked cell by default.
  • We fixed a styling problem where the all-day event columns were not aligned with the time grid columns in week view on small screens.

Timeline

Fixed

  • We fixed the date header update on dynamic localization change.
  • We fixed the event creation with double click, where the created event had no length. We also made an improvement so that the newly created event will fill the clicked cell by default.
  • We fixed the source argument of the event and cell click lifecycle events.
  • We fixed the external drop, which did not work correctly for the timeline.

What's New

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.

Datepicker

New

  • We added the year and year/month picker to the calendar. This can be controlled by setting the dateFormat to year and year with month.
  • We added multiple select inputs. This brings a new styling to mobiscroll inputs that are linked to multi-date pickers by displaying each selection as separate chips (small containers with text that stand out) on the UI.

Fixed

  • We added the missing moment option in angular, that was required by the returnFormat to support moment objects.
  • We fixed the time validation that got broken for custom time steps.
  • We fixed the date validation that sometimes incorrectly jumped to values below min, or above max.

Eventcalendar

New

  • We introduced the timeline view with horizontal time and day rendering and vertical resource listing. The timeline can be enabled and configured through the view option.

Fixed

  • We fixed the keyboard navigation to only allow focusing on labels from the visible month.

Scheduler

Fixed

  • We fixed the navigation logic that sometimes skipped a week if custom startDay and endDay was used.

What's New

Bugfix release

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

Agenda

Fixed

  • We fixed a rendering issue that occurred on page navigation in the jQuery and Javascript version when a calendar view was combined with the agenda.

Datepicker

Fixed

  • We fixed the select counter localization that always showed the English 'selected' text when more than one value was selected regardless of the locale used.

Eventcalendar

Fixed

  • We fixed the page navigation to correctly fire the onPageLoaded event in the jQuery and Javascript version.
  • We fixed an issue where an error was thrown if an event had the resource property set, but no resources were passed to the calendar.

Scheduler

Fixed

  • We fixed an issue where double clicking on date or resource header created a new event.
  • We fixed the displayed dates for the Jalali and Hijri calendars.

Select

Fixed

  • We fixed the invalid logic in the Angular version that incorrectly allowed disabled items to be selected.

What's New

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.

All Components

Fixed

  • We fixed a Typescript type definition bug, that prevented the use of Moment.js objects in options where multiple date types are accepted (string, date object, moment object) eg. the min and max options.
  • We fixed the Angular package builder to make it compatible with JIT and reflect-matadata with Ivy enabled.

Datepicker

New

  • We added time validation. The invalid option now supports times as well.

Fixed

  • We fixed an issue where the time of a date-time picker was reset to the current time when changing the date.
  • We fixed an issue in the calendar that showed the current date instead of the selected date when opened more that once.
  • We fixed the onTempChange event to not fire incorrectly multiple times in desktop display mode.
  • We fixed a bug, that prevented the closing of the Datepicker in Angular, when the directive was used with the showOnFocus and showOnClick options explicitly set true.
  • We fixed an issue, that prevented the changing of showOnFocus and showOnClick options dynamically.
  • We fixed an issue, that caused the famous ExpressionChangedAfterItHasBeenChecked error to be thrown in angular, when the invalid option was changed in any of the onPageChange, onPageLoading or onPageLoaded events.
  • We fixed an issue, that prevented the selection of the initial date shown on the date scrollers, when using the anchored display option.
  • We fixed an issue where the stepMinute option was not working correctly with timeWheels: '|H:mm|'.
  • We fixed the date value parsing that broke if the format contained a comma (',').
  • We fixed an issue where the picker header (value or selection counter) did not appear correctly with the iOS theme in bottom display mode.

Eventcalendar

Fixed

  • We fixed an issue where the labels for multi-day events could not be selected with click (broken in v5.3.0).
  • We fixed an issue where events with editable: false could be still deleted.
  • We fixed the drag & drop, resize and create in case of vertical scroll.

Scheduler

New

  • We added templating support for resource headers through the renderResource and resourceTemplate options.

Fixed

  • We fixed an issue where events with editable: false could be still deleted.
  • We fixed the dynamic change of the time cell or time label steps.
  • We fixed an issue where on touchscreen long tap the newly created event did not appear, only if finger was moved.
  • We fixed the first and last cell height calculation when timeCellStep was set to more than 60 minutes

Select

New

  • We are introducing the Select component to v5. It ships with single, multiple select for mobile and desktop.

What's New

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.

Datepicker

Fixed

  • We fixed an issue where selecting a date on the calendar sometimes broke the swipe and arrow navigation.

Eventcalendar

New

  • We added the invalidateEvent option to configure the built-in validation of events on create/move/resize. Setting it to 'start-end', invalid ranges can be in bounds of an event, only the event start and end cannot overlap. With strict the event cannot intersect with any invalid range at all.
  • We added the eventOrder option to customize the sort order of the events.
  • We added the editable property to the event object which disables drag & drop and resize on the event if true.

Fixed

  • We fixed an issue where the custom label templates did not receive the formatted start and end times.

Forms

New

  • We updated the look & feel of the iOS stepper, and improved the styling of the Material and Windows themes.

Fixed

  • We fixed an issue in jQuery / Javascript that broke the styling when the original input element had a custom css class.

Scheduler

New

  • We added the invalidateEvent option to configure the built-in validation of events on create/move/resize. Setting it to 'start-end', invalid ranges can be in bounds of an event, only the event start and end cannot overlap. With strict the event cannot intersect with any invalid range at all.
  • We added an improvement so when resources are not passed at all or null or undefined is passed, the resource property of the events are not taken into account and all events are displayed.
  • We added the eventOrder option to customize the sort order of the events (all day events only).
  • We added the editable property to the event object which disables drag & drop and resize on the event if true.
  • We added the timeCellStep and timeLabelStep properties to the view option to control the granularity of the time grid.

Fixed

  • We fixed the current time indicator positioning which was a bit off when the horizontal scrollbar was present.
  • We fixed the header horizontal scroll in RTL mode.
  • We added the missing resource argument to the onCellClick, onCellRightClick, onCellDoubleClick, onEventClick, onEventRightClick, onEventDoubleClick events.
  • We removed the min-width from the scheduler when there are no resources specified.

What's New

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.

Agenda

New

  • We added the source property to the onEventClick, onEventDoubleClick, onEventRightClick, onCellClick, onCellDoubleClick, onCellRightClick events to determine where the click is coming from ('agenda', 'calendar', 'schedule', 'popover').

Datepicker

New

  • We added scrollbars to the datepicker wheels in desktop mode to make scrolling easier using a mouse.

Fixed

  • We fixed an issue where an input change event was unnecessarily fired, when the format of the initial value was different from the format specified by the returnFormat option.
  • We fixed an issue where an ngModelChange was incorrectly firing when the value was initially set.
  • We removed the hover and focus styles from the calendar labels.
  • We fixed an issue where the invalid check inisde a range resulted in an infinite loop in case of yearly recurring invalid values.

Eventcalendar

New

  • We added the source property to the onEventClick, onEventDoubleClick, onEventRightClick, onCellClick, onCellDoubleClick, onCellRightClick events to determine where the click is coming from ('agenda', 'calendar', 'schedule', 'popover').
  • We added the extendDefaultEvent option for being able to dynamically extend the default event created with drag or click.

Fixed

  • We fixed an issue where the onEventUpdate event was firing when an event was clicked inside the event popover.
  • We fixed an issue where the onEventUpdate event was fired even though no actual changes were made to the event.

Scheduler

New

  • We added the source property to the onEventClick, onEventDoubleClick, onEventRightClick, onCellClick, onCellDoubleClick, onCellRightClick events to determine where the click is coming from ('agenda', 'calendar', 'schedule', 'popover').
  • We added the resources option for displaying multiple resources inside a single schedule instance.
  • We added the resource property to the colors, invalid, data options so these can be tied to a specific resource. The property will also be passed to the lifecycle events alongside the other properties.
  • We added the groupBy option for grouping the resources.
  • We added the extendDefaultEvent option to be able to set properties for an event created with drag or click.

Fixed

  • We fixed an issue where the scheduler events were not displayed correctly when used together with the calendar view.
  • We fixed an issue where the initially selected date was not highlighted in case of daily schedule.
  • We fixed an issue where the onEventUpdate event was fired even though no actual changes were made to the event.

What's New

External drag & drop

We are adding new features that enable the drag & drop of external events for the event calendar & scheduler. Use the new draggable component to make any element a draggable item which can be dropped as an event. Easily create a set of pre-defined tasks that users can spawn multiple events from or distribute the task and schedule them with the help of the event calendar.

Colored backgrounds

With this latest release we’re enabling the background customization for both the event calendar and the scheduler. Color exact dates, recurring days and dates - like weekends, holidays - in the event calendar and set the background color for full days and time-ranges in the time grid of the scheduler.

Stepper component

We have added the stepper component to v5. Use it in building various forms, dialogs, reservation systems, appointment booking and everywhere where incrementing a value step-by-step, click-by-click makes sense.

More depth and advanced functionality with the help of new lifecycle events

onCellDoubleClick , onCellRightClick, onEventDoubleClick and onEventRightClick was added for the event calendar, scheduler and agenda. Use these new events to add more interactivity to your calendars. Trigger context menus, custom actions and so on.

Various UX improvements

We have improved on the UX of the scheduler by not changing the scroll position on view change (paging, day change, week change). We have improved the event rendering if the event stretches outside of the current view (extends to the previous/next days).

All Components

Fixed

  • We updated the internal virtual dom library (Preact) used for the jQuery and plain Javascript components, which fixes a few rendering issues.

Agenda

New

  • We added the onEventDoubleClick and onEventRightClick lifecycle events, that enable the creation of custom actions when events are right clicked and double clicked.

Fixed

  • We added the missing dateFormatLong option to the Angular component.
  • We fixed a typo in the Italian day name translation.

Datepicker

Fixed

  • We fixed a typo in the Italian day name translation.
  • We fixed the cellCssClass property of the marked and colored options that was not working if labels were also used.

Eventcalendar

New

  • We added the onCellDoubleClick, onCellRightClick, onEventDoubleClick and onEventRightClick lifecycle events, that enable the creation of custom actions when cells and events are right clicked and double clicked.
  • We added support for external drag & drop by using the draggable component and the externalDrop option.

Fixed

  • We added the missing dateFormatLong option to the Angular component.
  • We fixed a typo in the Italian day name translation.
  • We fixed the label display and drag & drop on months/weeks with daylight saving changes.
  • We fixed the label drag & drop to correctly keep the original event length during drag.
  • We fixed an issue where event creation was not prevented outside of min and max dates.

Forms

New

  • We added the stepper component.

Page

Fixed

  • We fixed the jQuery and plain javascript components to work on elments other than div as well.

Popup

Fixed

  • We fixed the positioning of anchored popups on devices with a notch on their display.
  • We fixed the popup buttons in anchored and bottom mode on Firefox within the iOS theme.

Scheduler

New

  • We improved the display of the events to indicate better if the event continues on previous/next days, or before/after grid hours.
  • We added the colors option for setting the background of the time grid and day cells.
  • We added the onCellDoubleClick, onCellRightClick, onEventDoubleClick and onEventRightClick lifecycle events, that enable the creation of custom actions when cells and events are right clicked and double clicked.
  • We added support for external drag & drop by using the draggable component and the externalDrop option.

Fixed

  • We added the missing dateFormatLong option to the Angular component.
  • We fixed a typo in the Italian day name translation.
  • We fixed the label display and drag & drop on months/weeks with daylight saving changes.
  • We’ve removed the automatic scroll-to-top behavior on page change. The time grid will keep it’s previous positions and won’t automatically scroll up when the day or week is changed.

What's New

Bugfix release

This release fixes a few issues with the event calendar invalid dates and times as well as improves the ISO8601 date parser.

Agenda

Fixed

  • We fixed the ISO8601 date string parser to accept timezone offsets without the : character between hours and minutes (e.g.: '2020-03-09T11:00-1100').

Datepicker

Fixed

  • We fixed an issue with the defaultSelection option, which could not be updated dynamically.
  • We made the moment date object detection more reliable, because it broke the date parsing logic, if a toDate method was added to the String prototype.
  • We fixed the ISO8601 date string parser to accept timezone offsets without the : character between hours and minutes (e.g.: '2020-03-09T11:00-1100').

Eventcalendar

Fixed

  • We fixed the event creation with drag or click, which worked on disabled days as well.
  • We fixed the event creation on touch screens, to remove the temporary event, if creation was rejected inside the onEventCreate event handler.
  • We made the moment date object detection more reliable, because it broke the date parsing logic if a toDate method was added to the String prototype.
  • We fixed the ISO8601 date string parser to accept timezone offsets without the : character between hours and minutes (e.g.: '2020-03-09T11:00-1100').
  • We fixed the navigation with prev/next arrows which did not always work correctly when the first day of the view was disabled.
  • We improved on the blocked out day display: if an invalid range starts and ends on the same day, it won't disable the whole day on the calendar view.

Scheduler

Fixed

  • We fixed the event creation on touch screens, to remove the temporary event, if creation was rejected inside the onEventCreate event handler.
  • We made the moment date object detection more reliable, because it broke the date parsing logic if a toDate method was added to the String prototype.
  • We fixed the ISO8601 date string parser to accept timezone offsets without the : character between hours and minutes (e.g.: '2020-03-09T11:00-1100').
  • We fixed the end day display of a multi day event where the event still showed up on the grid, even if the end hour was before the grid start hour.
  • We fixed an error which was appearing during event drag or resize, when the allDay property of the view option was set to false.

What's New

Work week & hours

We are adding tools for configuring the schedule view by hiding days and hours. Setting up a work calendar with days from Monday to Friday and hours from 8AM to 5PM is as easy as setting four properties of the view.schedule option. Configure the days through the startDay and endDay properties and the times through the startTime and endTime properties.

Hiding the all-day section

We are adding more control over the scheduler view configuration. Hide the all-day section completely from the scheduler with the allDay property of the view.schedule option.

Notifications

We’re happy to introduce four new controls for showing notifications and for quickly capturing user input. Alert, Confirm and Prompt along with Snackbars was added with this latest release.

Adding exceptions to recurring rules

We’ve improved working with recurring rules by adding exception support to the API. Adding one time exceptions along with recurring exceptions is supported through RRULE, object and array specification. With drag & drop enabled, altering an occurrence from a recurring sequence automatically creates a new event and adds the exception.

Agenda

New

  • We added support to specify exceptions for the recurring events with recurringException and recurringExceptionRule properties in the data option.

Fixed

  • We fixed the header buttons to do not submit if the agenda is placed inside a form.

Datepicker

Fixed

  • We fixed a bug where the header buttons used for navigation submitted the form if placed inside one.

Eventcalendar

New

  • We added support to specify exceptions for the recurring events with recurringException and recurringExceptionRule properties in the data option.

Fixed

  • We fixed the calendar header buttons to do not submit if the eventcalendar is placed inside a form.
  • We fixed an issue where the marked option was not working if the calendar labels were not explicitly turned off.
  • We fixed an issue with the "more" labels, where hovering the label added the hover styling for "more" labels on other days as well.

Forms

New

  • We added new notification types: alert, confirm, prompt and snackbar.

Scheduler

New

  • We enabled the hiding of the all-day section of the scheduler through the new allDay property under the view.schedule option.
  • We updated the schedule view option with the startDay/ endDay properties for controlling the displayed days and with the startTime/ endTime properties for controlling the disaplayed hours of the grid.
  • We added support to specify exceptions for the recurring events with recurringException and recurringExceptionRule properties in the data option.

Fixed

  • We fixed the header buttons to do not submit if the scheduler is placed inside a form.
  • We added the missing dragTimeStep option for the Angular component.
  • We fixed the resize of all day events to disallow dragging the end before start.

What's New

Bugfix release

This release serves as a hotfix for the responsive option that broke in 5.0.6 for the date pickers (calendar, date & time and range picker).

Datepicker

Fixed

  • We fixed the responsive option which was not working correctly (regression introduced in 5.0.6).

Forms

Fixed

  • We fixed the label option type for the Angular switch component, which was set to boolean instead of string;

What's New

Bugfix release

This release addresses a number of issues reported in Mobiscroll for Angular along with other minor fixes.

Datepicker

Fixed

  • We fixed the date & time scroller styling in Angular, which was not expanded to the full width of the picker in bottom display.
  • We added the missing value prop binding for the Angular input component.
  • We fixed the ancored positioning of the picker in Angular, which was not always correct.

Eventcalendar

Fixed

  • We fixed an exception which was thrown when clickToCreate was enabled and labels were not enabled on the calendar.

Forms

Fixed

  • We fixed the label option type of the Angualr input component from boolean to string.

Popup

Fixed

  • We fixed a bug in the popup which resulted in an error whenever it got closed in Angular 6.
  • We fixed the iOS rendering of the buttons and the header for the desktop fullscreen popup (with touchUi: false).

What's New

Bugfix release

This release includes a bugfixes across the board along with quality of life improvements, like more granular control over event creation with click. The new clickToCreate option supports 'double' and 'single' clicks as functionality is detached form the dragToCreate option.

All Components

Fixed

  • We fixed the AOT build for Angular 4 and 5.
  • We fixed the scss deprecation warnings which appeared when used with the new Dart Sass.

Agenda

Fixed

  • We fixed an issue which caused to display events from other months as well in case of monthly agenda, if calendar view was also displayed.
  • We improved the event ordering so that cross-day events not marked as all day will not appear on top.

Datepicker

New

  • We added the navigate method to programmatically navigate to a date on the calendar.

Fixed

  • We fixed an issue which caused an error in Angular 4 and 5, every time the picker was closed.
  • We added the missing functionality to parse and propagate the value to the picker, when the value is manually entered to the input field.

Eventcalendar

New

  • We show the event labels by default instead of just dots, if the calendar view is not combined with agenda or scheduler.
  • We added the clickToCreate option to control new event creation with click on desktop.

Fixed

  • We fixed an issue which caused the calendar to jump to the wrong date, if number of displayed weeks was changed dynamically.
  • We fixed the custom label rendering, which did not work in Javascript and jQuery.
  • We added the missing onEventDelete and onEventDeleted events for the Angular component.
  • We improved the event ordering so that cross-day events not marked as all day will not appear on top.
  • We fixed the display of event labels, to recalculate the number of labels which will fit, when changing between month and week views, or changing week numbers.

Forms

Fixed

  • We fixed the toast message styling if theme was not explicitly specified (the global theme was used).

Popup

Fixed

  • We fixed an issue which caused an error in Angular 4 and 5, every time the popup was closed.

Scheduler

Fixed

  • We added the missing onEventDelete and onEventDeleted events for the Angular component.
  • We fixed the all-day invalid display which did not work correctly if the passed all-day invalid object wasn't the first in the list.

What's New

Bugfix release

This release fixes AOT builds for Angular, type definition issues, Angular and Ionic Framework directive usage and contains a couple of date picker stability improvements and fixes.

All Components

Fixed

  • We fixed a bug in the trial packages that caused the AOT builds to fail in Angular 4 and 5 projects.
  • We fixed an issue related to the metadata used by Angular 4 and 5 projects, that caused AOT build errors.
  • We fixed an issue, where the import paths in the type definition files were not correct in the case of jQuery and plain JavaScript.
  • We extended the type of the setOptions methods parameter to make it accept options that are not common between different components.

Datepicker

Fixed

  • We fixed a bug that didn't let the time wheel to go below the start dates time, when selecting the end date in case of range selection.
  • We fixed the disabled option, so the Datepicker won't open when clicking on the input and the disabled option is true.
  • We fixed a bug that prevented the value to be set to the ngModel, when using the datepicker as a directive in Angular and Ionic.

Eventcalendar

Fixed

  • We fixed a bug that resulted in an error in the AOT builds of Ionic 4 apps with Angular 8.

What's New

Bugfix release

This release comes with various bugfixes and stability improvements for the date pickers, event calendar and scheduler.

Datepicker

Fixed

  • We fixed an issue with the labels, where the textColor property of a label did not work correctly.
  • We fixed an issue where the labels were not displayed correctly if loaded dynamically inside the onPageLoading event.
  • We fixed a bug that closed the picker before the ranges end date was selected when using the iso8601 returnFormat option.
  • We fixed a bug that cleared the whole selection when changing the time part of the start or end date using the iso8601 returnFormat option in the case of range selection.
  • We fixed an issue with the setVal method, that cleared half of the selection instead of setting the value correctly, when called in vanilla javascript and jQuery.
  • We adjusted the picker max width, if more than 2 months are displayed.
  • We fixed the getVal method to always take into account the returnFormat option and return the values in the specified format.
  • We added the missing export of the MbscLocale type, the type of the locale option, making it easier to customize the locales in a type-friendly way.
  • The onChange event was not triggered when the datepicker was used as directive in Angular.
  • We fixed an issue where show/hide animations were not completed correctly on Edge/Android, with the jQuery and Javascript versions.
  • We fixed the label highlight. When a label was clicked/hovered, all labels were highlighted on the calendar.
  • We improved the validation to do not allow an invalid date as initial value in case of single date selection and range selection.
  • We fixed our touchmove listening logic, which resulted in error in certain conditions. ( #481 )

Eventcalendar

Fixed

  • We fixed an issue where the full custom rendering of the labels was not working correctly.
  • We fixed the "more" label, which was not working in Angular with dragToCreate enabled.
  • We fixed the styling of the event count labels.
  • We fixed the touch drag on single day events.
  • We improved the validation to do not allow an invalid date as initial selected date.

Scheduler

Fixed

  • We fixed the days property for the schedule view to be able to hide the scheduler day header.

What's New

Bugfix release

This release fixes two major issues: the daily scheduler and daily agenda navigation was not working correctly in certain timezones, and the datepicker was not working properly if returnFormat was set to 'iso8601'.

Agenda

Fixed

  • We fixed an issue with daily schedule navigation, which was not working correctly in certain timezones.

Datepicker

Fixed

  • We fixed an issue that closed the picker after it opened when using the iso8601 returnFormat option in desktop mode.
  • We added the missing onCellHoverIn and onCellHoverOut events.

Eventcalendar

New

  • We added the action argument to the onEventCreate event, to determine if it was click or drag.

Fixed

  • We added the missing onCellHoverIn and onCellHoverOut events.

Scheduler

New

  • We added the action argument to the onEventCreate event, to determine if it was click or drag.

Fixed

  • We fixed an issue with daily schedule navigation, which was not working correctly in certain timezones.

What's New

Bugfix release

This release comes with a few stability bugfixes for v5.

Datepicker

Fixed

  • We removed the focused popup dashed top border in Firefox.
  • We fixed an issue where the time picker was stuck to the current time.

Scheduler

Fixed

  • We fixed the rendering of the events, when there were no overlaps.
  • Ensure a 15 minutes minimum duration for events when resizing events.
  • We fixed an issue in Angular which caused an error when rendering the all day events.

What's New

Final release of v5

We are incredibly happy and proud to launch the final version of Mobiscroll 5. This is no beta, it is version 5.0.0 with the event calendar, agenda, scheduler, date, time picker, calendar range, popup, grid layout, inputs, toggle, radio & checklist and various styling options.

Bugfixes and accessibility improvements

Compared to beta-6 we fixed a bunch of bugs and improved the accessibility across several components. We improved the drag to create feature by adding click to create out of the box, that simplifies a complex implementation.

Keyboard support

While it was mostly fixing bugs and critical issues, we added a couple of new features, like built-in delete for to the event calendar with the delete and backspace and keyboard support to the button API. You can now create custom buttons and assign keyboard shortcuts for better accessibility and productivity.

All Components

Fixed

  • Default to the Windows theme when auto theme is used on desktop windows machines as well, not just on mobile.

Agenda

New

  • We added the refresh method to refresh the view.

Fixed

  • We fixed a bug with monthly and yearly recurrence, where repeat count was incorrectly calculated.

Datepicker

New

  • We added the defaultSelection option to specify an initial selection, without setting the actual value.

Fixed

  • We fixed a bug with monthly and yearly recurrence, where repeat count was incorrectly calculated.
  • Circular wheels were not appearing as circular on the first show.
  • We added missing options for the Angular component: firstDay, weeks.
  • We fixed the onCancel event, which was triggered, incorrectly, on the set button as well.
  • We fixed an issue, where the initial value was not read from the input in case of the jQuery/Javascript component.
  • We fixed an error that was thrown when the time part selection was made prior to the date part selection in case of the time control.
  • We fixed an issue that closed the datepicker before the whole range was selected in desktop mode.
  • We fixed the selection counter on the datepicker, to show or hide the counter when dynamically changing the selectionCounter option.
  • In case of range selection don't change month when an outer day is clicked.
  • We fixed the ENTER key behavior in the case of the range selection, so it won't close the picker until the end date is also selected.

Eventcalendar

New

  • We modified the dragToCreate functionality to create a new event on click not just drag.
  • We added support for deleting active events with the delete and backspace buttons.
  • We added active state to the event labels and it can be navigated using the keyboard.
  • We added the refresh method to refresh the view.

Fixed

  • We fixed a bug with monthly and yearly recurrence, where repeat count was incorrectly calculated.
  • We fixed the rtl mode event interactions (drag/resize/create) which were not displaying and updating correctly.
  • We fixed the position of the drag/resize/create events when the week numbers were displayed on the calendar.
  • We fixed an issue with the iOS theme, causing the scrollbar to appear inside the event popover, even if the list was short.

Popup

New

  • We added support for specifying key codes for custom popup buttons.

Scheduler

New

  • We modified the dragToCreate functionality to create a new event on click not just drag.
  • We added support for deleting active events with the delete and backspace buttons.
  • We added the refresh method to refresh the view.

Fixed

  • We fixed a bug with monthly and yearly recurrence, where repeat count was incorrectly calculated.
  • We fixed the rtl mode event interactions (drag/resize/create) which were not displaying and updating correctly.
  • We fixed multiple day events mixed up hover/active styles.
  • We fixed a content flashing issue after drag & drop, when a daily schedule was displayed together with a weekly calendar.
  • We fixed the schedule event rendering to prevent overlaps in some cases.

Segmented

New

  • We improved on the accessibility of the segmented component by highlighting the focused item in all themes.

What's New

Preventing double booking and event overlap

We are introducing tools to help you configure time off in the event calendar and scheduler. Things like setting up work days, launch breaks, blocking weekends and full days is simple with the invalids. You can also use new lifecycle events for validation and prevent double booking or build any custom logic on top of drag & drop.

Update styling for iOS 14

With the recent launch of iOS14 and the event more recent launch of Big Sur we are updating the iOS theme to be consistent with the latest design language and refinements that Apple is shipping. The version includes updates for the overall modal and popup rendering, calendar and scrollers, while it also moves the look of the event calendar, agenda and scheduler forward. It’s not just heavier font-weights and bigger corner radiuses but we re-calibrated the colors, and applied new layouts in multiple places.

An improved range picker

We have launched the Range picker back with Beta 4, and since then we’ve refined various aspects of it. We went deep into different use-cases, debated and came up with a point of view on how we are handling date and time range selection on both mobile and desktop. This brought numerous improvements visually and in the way people can interact with it and overall we are happy about how it turned out. You’ll notice the labels... that’s pretty cool, eh?

New segmented component for iOS

Getting back to iOS, we have moved the segmented component into 2020. This means it finally received the makeover it missed on iOS 13 with drag interaction, zoom animation and everything else.

All Components

Fixed

  • We fixed the onInit lifecycle event that was not being triggered.

Agenda

New

  • We updated the styling of the iOS theme to match iOS 14.

Fixed

  • We fixed an issue where the onPageChange and onPageLoading event were fired twice when changing views, and once with wrong arguments.

Datepicker

New

  • We updated the styling of the range labels.
  • We improved on picker positioning in desktop layout.
  • We added setTempVal and getTempVal methods to help in adding custom logic and behavior to the selection experience. This is especially useful for 'hijacking' the selection before it is submitted, like adding a 'one-way' mode to the range picker.
  • We added an onTempChange lifecycle event that can be used to customize the value picking experience.
  • We are introducing localized helper text for the start and end labels (visible for range pickers). They serve as a placeholder for empty states and can be overridden through the rangeStartHelp and rangeEndHelp options.
  • We added clear buttons to the range start/end labels to make clearing one or both easy for users.

Fixed

  • We improved on the range highlight of the proposed selection visible when hovering.
  • We fixed the hover effect on hidden days for the windows theme.
  • When selecting the range on a calendar, the automatic switching from start to end selection will only happen once the range is selected. Afterwards, to refine the range the labels can be used to switch the active selection.
  • We added missing property definitions to the Datepicker component, that fixed the AOT builds in Angular 8.
  • We fixed the disabled buttons click event in angular, so they won't trigger when the buttons are disabled.
  • We fixed a bug in the minRange and maxRange options, so the selectable range is updated right away when they are changed dynamically.
  • Update the input floating labels when values are set.
  • When switching between the start and end date in the case of range selection, the calendar navigates to the already selected date.
  • We won't disable the set button in case of the range selection, when switching between start-end selection requires the closing of the picker. For example, when there are no labels shown and the picker has distinct start and end inputs.

Eventcalendar

New

  • We updated the styling of the iOS theme to match iOS 14.
  • We added support for blocked out dates that don’t allow interaction through drag & drop and drag to create.

Fixed

  • We disabled drag & drop for calendars without labels.
  • We fixed an issue where the onPageChange and onPageLoading event were fired twice when changing views, and once with wrong arguments.
  • We fixed the firstDay and lastDay of the onPageChange, onPageLoading and onPageLoaded events in case of month view, to take into account the visible outer days as well.

Forms

Fixed

  • We fixed the input, textarea and dropdown components to keep the existing css classes on the orginal html element in case of jQuery / Javascript.
  • We fixed the dropdown component, which was throwing and error in Angular 10.

Scheduler

New

  • We updated the styling of the iOS theme to match iOS 14.
  • We added support for blocked out dates that don’t allow interaction through drag & drop and drag to create.

Fixed

  • We fixed the drag & drop for all day events for jQuery and javascript, where extra copies of the dragged event were appearing.
  • We fixed the event time calculations for the drag & drop of recurring events.
  • We fixed the event and oldEvent arguments of the onEventUpdate and onEventUpdated events.
  • We fixed an issue where the onPageChange and onPageLoading event were fired twice when changing views, and once with wrong arguments.

Segmented

New

  • The iOS theme received the makeover consistent with and ready for iOS14. It consists of a brand new styling, drag interaction, and zoom animation.

What's New

Drag & drop

We are happy to launch drag & drop for the event calendar and scheduler components. You can use it to create new events, resize and move events. This has been a long-time coming and it's finally here. With granular control over the three separate features you can pick what you want to turn on & off.

Styling marked and colored days

We have standardized the day colors across all themes and evolved the API to support colored day backgrounds, highlights and support custom CSS classes for even more customization. Custom CSS classes were added to marked days for enabling the control of shapes on a mark to mark basis.

Automatic switching between mobile & desktop layout

We have enhanced the API of the touchUi option to support 'auto', making the switch between mobile and desktop layout automatic. Mobiscroll will detect if it is used on a touch- or non-touch-screen and will render the controls optimized for touch or pointer interaction accordingly.

All Components

New

  • We added support for auto theme and auto theme variant (light/dark) for custom themes as well.
  • We added a feature to automatically decide between mobile and desktop UI based on the platform, using the touchUi: 'auto' option.

Agenda

Fixed

  • We fixed a UI bug, that cut off the tail of some characters of the event text in the agenda in iOS theme.

Datepicker

New

  • We made it possible to specify a css class for calendar marks.
  • We made it possible to specify a css class for calendar day cells.
  • We expanded the colors option with the highlight and background properties.
  • We added keyboard navigation support for the Start/End labels in the case of range selection.
  • We improved on the date range selection experience. When the start/end labels are shown in the case of the calendar, the active label will cycle from start to end only for the first time. Then if you want to adjust the selected range, it won't start over the entire selection.

Fixed

  • We fixed a UI bug on the calendar control, that let the calendar days to be seen under the year and month selection during swiping in iOS theme.
  • We fixed the select counter on the calendar to show the correct number of selected days.
  • We fixed a bug, that prevented the use of the predefined header components (like the prev, next and today button) of the calendar, when used in custom header templates in angular.
  • We improved on the Calendar controls today button. In the case of single date selection, the today button will not only navigate to today's date, but will also select it.
  • We fixed the border radius of the range start and end labels when hovered in the case of the material theme.
  • We fixed a UI bug in the range highlight styling, that showed up when the selection was the start or end of the daylight saving period.
  • We fixed the input handling logic of the datepicker. When selecting a range and using two inputs, the inputs now become read only as they should.
  • We fixed a bug that prevented the picker to show up, when selecting range with two inputs in react strict mode.
  • We fixed a bug that caused an error when using the datepicker directive in angular.

Eventcalendar

New

  • We made it possible to specify a css class for calendar marks.
  • We made it possible to specify a css class for calendar day cells.
  • We expanded the colors option with the highlight and background properties.
  • We added the actionableEvents options to enable / disable the actionable styling (pointer cursor, hover and active states, ripple effect) of event list items.
  • Added support for updating, resizing and creating events using drag & drop.

Fixed

  • We fixed the width of the calendar labels that span across days, when the week numbers are also shown.
  • We fixed a UI bug, that caused the calendar multi-day labels to be a few pixels wider, when using the windows theme.
  • Display event start and end times inside the event popover for the Material theme as well.
  • Always display year and month picker as a popup instead embedding it in the calendar body.
  • Don't move the calendar view if a day from another month is clicked.

Scheduler

New

  • Added support for updating, resizing and creating events using drag & drop.

What's New

Range picker

We are happy to introduce the next step in the evolution of date and time range selection. Shipping as part of the standard date picker we are focusing more than ever on a couple of key usage scenarios and want to deliver the best tools for resource booking. This can be an appointment, a rental, a flight or a hotel room. Things like switching between single and range select or date & date-time are built in.

Agenda

Fixed

  • We fixed and issue where the month name in the header was not always in sync with the dynamic 'locale' change.

Datepicker

New

  • We added range select support. Now the datepicker can also be used for picking date and time ranges, in addition to single and multiple selection.

Fixed

  • We fixed the min/max validation when setting a value externally or the min/max options were updated dynamically.
  • We fixed an issue which prevented the dynamic update of the picker header in inline mode.
  • We fixed the dynamic change between desktop and mobile.
  • We fixed and issue where the month name in the header was not always in sync with the dynamic 'locale' change.
  • We fixed multiple month rendering in RTL mode.
  • We fixed multiple month rendering, when the number of months was passed through the responsive option.
  • We fixed an issue which caused the scroller wheel values to disappear when switching between mobile and desktop mode.

Eventcalendar

Fixed

  • We fixed and issue where the month name in the header was not always in sync with the dynamic 'locale' change.

Popup

Fixed

  • We fixed a bug which prevented the Space key to work in form inputs placed in popups.

Scheduler

Fixed

  • We fixed and issue where the month name in the header was not always in sync with the dynamic 'locale' change.

What's New

Date picker

We are excited to introduce the re-thought date picker component that makes working with dates and times easy and helps in crafting amazing experiences for web, mobile and desktop. The new date picker features single, multiple and soon to be added range selection for date and time. It merges the scroller, dropdown and calendar pickers from previous versions enabling easy switching between different selection modes, interaction models and UI controls.

Updated styling for iOS

The calendar, scroller, and picker components received a facelift to be better aligned with the new iOS 14 updates.

Event calendar, Scheduler and Agenda fixes

This release also comes with a bunch of stability fixes and improvements for the event calendar components.

Agenda

Fixed

  • We fixed the month names in the Arabic translation.
  • We fixed an issue with the weekly recurrence, where the first occurrence did not appear correctly.
  • We fixed the header title in case of single year view and multiple day view.
  • We fixed the order of the header arrows for the Windows theme.

Datepicker

New

  • We are launching a new calendar along with date & time selector under the Datepicker product line.
  • We added an updated iOS 14 styling for the calendar, picker and scroller components.

Fixed

  • We fixed the month names in the Arabic translation.

Eventcalendar

Fixed

  • We fixed the month names in the Arabic translation.
  • We fixed an issue with the weekly recurrence, where the first occurrence did not appear correctly.
  • We fixed the order of the header arrows for the Windows theme.

Popup

New

  • We improved on the positioning in bubble display mode. Now the popup can appear on the left or the right side of the anchor, not just above or below.

Fixed

  • We fixed the responsive option.

Scheduler

Fixed

  • We fixed the month names in the Arabic translation.
  • We fixed a bug that caused the vertical scrollbar to remain stuck in some cases.
  • We fixed an issue with the weekly recurrence, where the first occurrence did not appear correctly.
  • We fixed the order of the header arrows for the Windows theme.

What's New

Event customization

In the second beta release we focused on providing ways to customize the events in the Calendar, Scheduler and Agenda.

With two levels, content customization allows the custom display of event content while still providing the styling of event time and colors. Full customization gives complete control over the event display.

This feature integrates perfectly with the supported frameworks, accepting ng-template in Angular and render functions in React, allowing the usage of custom and third party components.

Customizing the header

We are shipping tools for customizing the header of the Calendar, Scheduler and Agenda. You can simply hide it, reorder the elements inside it, add custom components and enable new interactions.

To give you a couple of examples, you can now have integrated switching of views, event filtering, calendar groups, and so on.

More advanced popup

We added fullscreen support for the Popup component on mobile devices and adaptive styling for a seamless multi-screen experience.

The buttons received a color treatment as well, supporting color presets.

All Components

New

  • Created a type for the locale objects to help the addition of new languages.

Fixed

  • Made the angular builds compatible with Angular 4, 5 and 6, by removing incompatible typescript fatures.
  • We fixed the dynamic system theme (light or dark) detection for Angular.

Agenda

New

  • Added customization options to the agenda events. We added the renderEventContent and eventContentTemplate options to the already existing renderEvent and eventTemplate options to improve on the customizability. The new options will be helpful if you only want custom content and don't want to bother with the basic look of the events.
  • Added customization options to the agenda header. The renderHeader and headerTemplate options can be used to provide a custom header to the calendar. We also made public the basic building blocks of the default calendar header - the previous, next and today buttons along with the year/month navigation component - so they can be used in custom header implementations out of the box.

Eventcalendar

New

  • Added customization options to calendar labels. You can use the renderLabelContent and labelContentTemplate options to provide only the label content, if you don't need custom styling on the labels. You can use the renderLabel and labelTemplate options to fully customize the labels. In this case, you only get the positioning and everything else is up to you.
  • Added customization options to the popover events. We added the renderEventContent and eventContentTemplate options to the already existing renderEvent and eventTemplate options to improve on the customizability. The new options will be helpful if you only want custom content and don't want to bother with the basic look of the events.
  • Added customization options to the eventcalendar header. The renderHeader and headerTemplate options can be used to provide a custom header to the calendar. We also made public the basic building blocks of the default calendar header - the previous, next and today buttons along with the year/month navigation component - so they can be used in custom header implementations out of the box.

Fixed

  • We improved the sizing of the calendar for the Material theme.
  • Use the calendar SASS variables for calendar buttons and calendar popup colors as well.
  • We fixed the calculation of maximum displayed event labels to work correctly in Safari.
  • We fixed the label ordering inside calendar cells.

Popup

New

  • We added the fullScreen option which is a shortcut to the width and height options to make the popup as large as possible.
  • We added default values to the maxWidth and maxHeight settings to improve on the look on large screens.
  • We added the color and variant options to the buttons API. The popup buttons can be passed the primary, secondary, etc... colors and the flat, outline and standard button variants.

Fixed

  • We fixed the styling of bottom popups in iOS to be more consistent with the native experience.

Scheduler

New

  • Added customization options to scheduler events. You can use the the renderScheduleEventContent and scheduleEventContentTemplate options to provide only the event content, and don't want to bother with the styling. You can use the renderScheduleEvent and scheduleEventTemplate options to fully customize the events in the scheduler. In this case you will only get the positioning out of the box and you take care of everything else.
  • Added html support in the scheduler event titles.
  • Added customization options to the scheduler header. The renderHeader and headerTemplate options can be used to provide a custom header to the calendar. We also made public the basic building blocks of the default calendar header - the previous, next and today buttons along with the year/month navigation component - so they can be used in custom header implementations out of the box.

Fixed

  • We fixed the schedule weekdays today styling in week view mode. It was not highlighted correctly after navigating back to the current week.
  • We improved on the navigate method of the schedule view, now it navigates to the specified time not just the specific day.

What's New

Introducing Mobiscroll 5 Beta 1 - a complete rewrite and retooling that enables better extensibility and performance. We moved away from the wrapper approach for Angular & React, and so with the new architecture we can ship native components for those frameworks.

We are shipping Mobiscroll 5 in steps and the first beta features Event calendar, Popup, the brand new Scheduler, most of the Form elements - Button, Input, Dropdown, Textarea, Checkbox, Switch, Radio, Segmented & Notifications and Date & time picker with limited functionality.

Scheduler

It features a full-blown schedule view with daily and weekly grids, a scrollable 24 hour view optimized for mobile & desktop.

The scheduler can be used and combined with the calendar and agenda from the event calendar.

Event calendar

We have rebuilt the event calendar from the ground up, with more customization options, more advanced recurring events and an updated look & feel.

Dynamic global and component options

Thanks to the rewrite the component options became truly dynamic. Options like the locale, theme, theme variant and more can be updated on the fly. While keeping the component state the DOM will be updated only where necessary.

Besides the stand-alone component updates, options can be changed globally. You can now update options like theme for all initialized components rather than performing it one by one.

Angular and React components

Mobiscroll 5 ships native Angular and React components, for a perfect integration. We moved away from the previously applied wrapper approach.

This means DOM manipulation is delegated to the framework: Angular components are using Angular's renderer module, while React components use React's virtual DOM.

jQuery and Javascript components

While the usage of the jQuery and plain javascript components remains the same as in previous versions (except some API changes listed below), the approach behind is completely different.

The components are sharing a common core with the React components, and a bundled virtual DOM library manages the rendering. This way, just like in React and Angular, the components are fully dynamic, updating options on the fly will not re-render the whole component markup completely,as in previous versions, it will only update the DOM where it needs to be changed.

All Components

New

  • System variant (light or dark) detection is now dynamic: if the system theme changes, the components are updated accordingly without the need to reload the page.

Removed

  • We dropped support for AngularJS (1.x) and Angular 2. In case of Angular the minimum required version is 4.

Changed

  • We removed the global mobiscroll.settings object and added the setOptions function to set the global options for the components. The new setOptions function is dynamic, meaning that changing the global options runtime will update all initialized components.
  • We renamed the option method to setOptions for all components. Use it to dynamically update the options of a component.
  • We renamed the lang option to locale for localizing the components. Instead of a string now it accepts an object containing the localization settings. Localization objects can be imported like import { localeDe, localeHu } from '/path/to/mobiscroll'; in case of ES6, or accessed as mobiscroll.localeDe in case of ES5 usage.
  • We moved the getJson function to mobiscroll.util.http.getJson. In ES6 it can also be imported directly: import { getJson } from '/path/to/mobiscroll';.

Datetime

Removed

  • We removed the tap method.

Changed

  • The react component will render a mobiscroll input by default, instead of a standard html input. Use the inputOptions option to pass configuration to the rendered mobiscroll input, or have the global settings applied.
  • We renamed the animate option to animation to specify the show / hide animation of the picker.
  • We renamed the height option to itemHeight for setting the height of the wheel items.
  • We renamed the width option to wheelWidth for setting the exact width of the wheels.
  • We renamed the maxWidth option to maxWheelWidth for setting the maximum width of the wheels.
  • We renamed the minWidth option to minWheelWidth for setting the minimum width of the wheels.
  • We renamed the showOnTap option to showOnClick for the sake of simplicity and to make it more obvious.
  • We've broken up the steps option into stepHour, stepMinute and stepSecond.
  • We updated the format of the dateFormat and timeFormat options to avoid some common confusions we met. See the API docs for the new formatting tokens.
  • We renamed the onSet event to onChange and theonShow event to onOpen for more clarity. This was part of the lifecycle event cleanup we performed.
  • We renamed the show method to open and the hide method to close.

Eventcalendar

New

  • We added the selectedDate option for setting, changing the active date on the calendar.
  • We added the defaultSelectedDate option for specifying the initially selected date.
  • We added the showControls option to show or hide the calendar header controls like previous, next, today buttons along with the view range.
  • We added the renderEvent and eventTemplate options for custom event rendering that can be used in the agenda or popover event listing.
  • We added the renderAgenda and agendaTemplate options for a fully custom, external agenda rendering.

Removed

  • We removed the following options: anchor, animate, buttons, closeOnOverlayTap, display, focusOnClose, focusTrap, formatDuration, headerText, showOnFocus, showOnTap, yearChange.
  • We removed the following events: onBeforeClose, onBeforeShow, onClose, onPosition, onShow.
  • We removed the following methods: hide, isVisible, position, redraw, refresh, show, tap.

Changed

  • We improved our recurring event support. More complex recurrence rules can be passed through the recurring property of an event as an object or as a string in RRULE format. Currently daily, weekly, monthly and yearly repeats are supported.
  • We slightly changed the structure of event objects. Instead of text, title should be used, and instead of the d property use the recurring property to create recurring events.
  • We slightly changed the structure of the marked, label and color objects. To specify the date, use the date property, or the start and end properties for multiple days, and use the recurring property to specify multiple occurrences.
  • We changed the format of the dateFormat and timeFormat options to avoid some common confusions we met. See the API docs for the new formatting tokens.
  • As part of the the lifecycle event cleanup, we renamed the onEventSelect event to onEventClick, the onDayChange event to onCellClick and the onSetDate event to onSelectedDateChange.
  • We renamed the calendarHeight option to height and changed its scope to the full calendar with header and everything.
  • We renamed the calendarWidth option to width.
  • We moved the calendarScroll option into the view option under view.calendar.scroll.
  • We moved the eventBubble option into the view option under view.calendar.popover.
  • We moved the showEventCount option into the view option under view.calendar.count.
  • We moved the showOuterDays option into the view option under view.calendar.outerDays.
  • We moved the weeks option into the view option under view.calendar.size.
  • We moved the weekCounter option into the view option under view.calendar.weekNumbers.
  • We renamed the eventList property of the view option to agenda.

Forms

New

  • We added the label option to specify the label of the input.
  • We added the startIconSvg and endIconSvg options to pass svg markup as string for the input icons.
  • We added the position option to the Checkbox, Radio and Switch components to specify where it should be positioned. Can be 'start' or 'end'. This ultimately controls how the actual control is laid out, on the right or the left.

Changed

  • We removed the iconAlign option, and added the startIcon and endIcon options instead to specify the input icons.
  • We added the variant option to the button, which can be 'standard', 'flat', or 'outline'.

Popup

New

  • We added the width option to specify the width of the popup. Accepts any valid css value.
  • We added the height option to specify the height of the popup. Accepts any valid css value.
  • We added the maxWidth option to specify the max width of the popup. Accepts any valid css value.
  • We added the maxHeight option to specify the max height of the popup. Accepts any valid css value.

Removed

  • We removed the tap method.

Changed

  • We renamed the animate option to animation to specify the show / hide animation of the popup.
  • For the sake of clarity we renamed the showOnTap option to showOnClick and the onShow event to onOpen.
  • We renamed the show method to open and the hide method to close.

Scheduler

New

  • We added the brand new scheduler to the Event Calendar product line for displaying the events on a 24-hour grid. Can be enabled using the view option.

What's New

Bugfix release

This release contains accessibility fixes for the navigation and optionlist components, type fixes for the Angular date & time picker directives, and other smaller fixes.

Datetime

Fixed

  • We fixed types for the mbsc-date, mbsc-time and mbsc-datetime directives for the strictTemplates: true compiler option.

Forms

Fixed

  • We fixed an issue, where the css classes on Mobiscroll React Components were missing and didn't update correctly when using Internet Explorer 11.

Navigation

Fixed

  • We fixed the keyboard support for the navigation component.

Numpad

Fixed

  • We fixed the invalid option for the decimal numpad, which was throwing an error if there was no initial value.

Select

Fixed

  • We fixed an issue, where the text of the selected item disappeared when using custom remote filtering.

What's New

Bugfix release

All Components

Fixed

  • We fixed the scss deprecation warnings which appeared when used with the new Dart Sass.

Calendar

Fixed

  • We fixed a bug, that caused an infinite loop exception in Angular, when the calendar's input field was empty and editable. The exception was thrown right after the calendar was opened.
  • We fixed a typo in the Italian day name translation.

Cards

Fixed

  • We fixed an issue, where the themeVariant option used on the Card component was unwillingly passed to a div element, which resulted in a warning in React.

Datetime

Fixed

  • We fixed a typo in the Italian day name translation (#484).

Eventcalendar

Fixed

  • We fixed an issue, where the weekDays and yearChange options were not working if specified inside the responsive option.
  • We fixed a typo in the Italian day name translation.

Forms

Fixed

  • We fixed an issue with the Stepper component, where the plus button was not disabled when min was equal to max.

Numpad

Fixed

  • We improved on the type definitions of the option method. You can now pass options that are specific to the different presets like the decimal or the timespan numpad for example.

Select

Fixed

  • We fixed an issue where the Select was not properly destroyed if initialized on an input element with data option.
  • We fixed an issue where in desktop mode the first option was partly out of view in case of event row numbers. ( #480 )

What's New

Improved compatibility between v4 and v5

We fixed a number of css conflicts between v4 and v5 form elements, for better compatibility.

We also fixed a bunch of issues that piled up in the last couple of weeks.

All Components

Fixed

  • We fixed a bug, which caused an exception when a picker was closed programmatically right after open.

Calendar

Fixed

  • We improved the calendar previous and next button listeners to use currentTarget instead of this for Salesforce LWC compatibility.

Eventcalendar

New

  • We added the eventOrder option to customize the sort order of the events.

Fixed

  • We improved the calendar previous and next button listeners to use currentTarget instead of this for Salesforce LWC compatibility.
  • We improved the event ordering so that cross-day events not marked as all day will not appear on top.

Forms

Fixed

  • We fixed the source code of the collapsible to use an ES6 syntax which works with an Angular app without the need to transpile.
  • We fixed an issue with the rating control, where the stars were off in RTL mode on iOS Safari, if value was set programmatically later after initialization.
  • We fixed an issue where sometimes toast and snackbar notifications stopped appearing if they were coming in very quickly.
  • We fixed the slider component with 2 handles, which were stuck if both initial values were set to the maximum.
  • We improved compatibility with Mobiscroll v5, so the v4 form elements appear correctly if v5 styling is also loaded.

Listview

Fixed

  • We fixed an issue where the touchstart listener was attached to the document instead of the listview container, and it was not possible to stop the touch event propagation, e.g. if the listview is loaded inside a scrollview item, stopPropagation on the touchstart event is needed to prevent the scrollview from moving when a listview item is swiped.

Numpad

Fixed

  • We fixed an issue where times like 1:08 cannot be entered, since after entering the 0, buttons above 5 were disabled.

Range

Fixed

  • We improved the calendar previous and next button listeners to use currentTarget instead of this for Salesforce LWC compatibility.

What's New

Bunch of bugfixes

While we're working hard on version 5 - the next generation of the Mobiscroll components - we don't neglect the current stable version either.

This release comes with a handful of fixes that piled up since 4.10.6 for the Numpad, Calendar, Slider ... and in general all components.

All Components

Fixed

  • We fixed the responsive option to work correctly with the theme and themeVariant options.

Calendar

Fixed

  • We fixed a null pointer exception, which happened from time to time when the picker was closed.
  • We fixed a type definitions issue, that lets the colors and the marked option to take a start and an end date instead of just a single date.
  • We fixed an iOS theme button positioning issue in case of a full screen calendar, if more than two buttons were used for the picker.

Cards

Fixed

  • We fixed the cards accordion to work correctly inside a popup.

Eventcalendar

Fixed

  • We fixed a type definitions issue, that lets the colors and the marked option to take a start and an end date instead of just a single date.

Forms

Fixed

  • We fixed the multiple handle slider, which broke with the introduction of passive event listeners in v4.10.4.
  • We fixed the angular textarea component to update its initial rows when used with reactive forms.

Navigation

New

  • We added the optional animTime parameter to the navigate method for specifying the duration of the scroll animation.

Fixed

  • We fixed the layout propType in react to work without giving a warning when used with numbers.
  • Remove outline styling from focused navigation items in Angular/Ionic.
  • Never fire the onItemTap event on disabled items.

Numpad

Fixed

  • We fixed an issue in the decimal numpad, which caused '0' to appear in the input even though the selected value should have been empty.
  • We fixed a bug in the decimal numpad, that didn't let enter all the digits of a number when used in template mode and the initial value was zero.
  • We fixed an issue in the decimal numpad that caused the decimal point to be in the wrong place after the initial value was parsed when used in template mode.

Range

Fixed

  • We fixed a null pointer exception, which happened from time to time when the picker was closed.
  • We fixed a type definitions issue, that lets the colors and the marked option to take a start and an end date instead of just a single date.

Scrollview

New

  • We added the optional animTime parameter to the navigate method for specifying the duration of the scroll animation.

Fixed

  • We fixed the layout propType in react to work without giving a warning when used with numbers.

Select

Fixed

  • We fixed an issue which caused an exception if an option value contained more than one quotation marks (").
  • We fixed an error which occured in case of inline select with remote data.

What's New

Fix for Angular < 9

We fixed the production build for Angular versions < 9, which we broke with Angular 10 compatibilty fixes.

All Components

Fixed

  • We fixed the production build for Angular <=8, which we broke with the implementation of Angular 10 compatibility.

What's New

Support for Angular 10

Angular 10 final was shipped last week, and there were some breaking changes introduced. We needed to do some adjustment to our code in order to support Angular 10 and remain backwards compatible.

Various fixes

In the previous release we migrated to passive touch event listeners to avoid violation warnings and make the click events work properly in iOS 13.4 and above. With the refactoring we introduced some regression bugs, which got fixed.

All Components

New

  • We made the necessary type changes for compatibility with Angular 10.
  • We exposed the option types for all react components. This helps to extend our components in typescript by creating derived types.

Fixed

  • We fixed an issue which caused an error when used with React SSR (regression introduced in 4.10.4).
  • We added a fix to prevent the "Unable to preventDefault inside passive event listener invocation." error in case of all scroller based pickers (regression introduced in 4.10.4).

Calendar

Fixed

  • We fixed the calendar title to show the correct month name in case of week view, when the view contains the selected date.

Eventcalendar

Fixed

  • We fixed the calendar title to show the correct month name in case of week view, when the view contains the selected date.

Range

Fixed

  • We fixed the calendar title to show the correct month name in case of week view, when the view contains the selected date.

Scrollview

Fixed

  • We fixed a bug that resulted in an error if there were no items added to the scrollview.

What's New

Bugfixes for iOS, iPad OS 13

We fixed an annoying throttling bug that was introduced in iOS 13.4. Click events were not fired on consecutive taps for most of the components. To give you a couple of examples, things like quickly tapping on a checkbox, changing days in the calendar, typing values in the numpad, interacting with the listview became erratic. Also if you were using an inline scroller, like a select or date picker, it broke non-mobiscroll content that was virtually below the scrollable list.

iOS 13.4 not just broke the UX of interacting with the components it made usage hard and annoying. The cause was how iOS handles non-passive event listeners. We went ahead changed event listeners, like touchstart and touchmove to passive wherever possible. This way we also got rid of the console warnings about non-passive event listeners.

Freeform Numeric Keypad

We fixed the setVal bug in the numpad that prevented the passing of values. Loading up a form with an input and a numpad didn’t pass the value correctly.

Various fixes

Beside the above this release contains a bunch of smaller fixes we came across, including localization fixes, type definition issues, fixes to the Jalali calendar etc.

All Components

Fixed

  • We fixed a major click throttling issue with iOS 13, where not every click event was fired because of the use of non-passive touch event listeners.
  • We fixed a bug that prevented the dynamic change of the themeVariant option from dark to light.
  • We fixed the angular picker components to correctly pass the themeVariant (which can be light or dark) to the underlying mobiscroll inputs.
  • We got rid of violation warnings for not using passive touch event listeners.

Calendar

Fixed

  • We fixed a bug that prevented the onCellHoverIn and onCellHoverOut events to fire after a day was clicked.
  • We fixed a bug which caused a console error if all days on the calendar had at least a label.
  • We fixed the prev / next year navigation in case of the Jalali calendar system.
  • We fixed the invalid option to accept the object format for simple rules as well, like { d: '2020-06-15' } or { d: 'w0' }.
  • We updated the type definitions of the value prop in react. We added support for the null value, that should be used when the calendar needs to be cleared.
  • We fixed the multiple week selection, where limiting the number of selected weeks did not work correctly.
  • We fixed the month names in the Arabic translation.

Datetime

Fixed

  • We fixed the month names in the Arabic translation.

Eventcalendar

Fixed

  • We fixed a bug that prevented the onCellHoverIn and onCellHoverOut events to fire after a day was clicked.
  • We fixed a bug which caused a console error if all days on the calendar had at least a label.
  • We fixed the prev / next year navigation in case of the Jalali calendar system.
  • We fixed the invalid option to accept the object format for simple rules as well, like { d: '2020-06-15' } or { d: 'w0' }.
  • We fixed a bug where the onPageChange, onPageLoading and onPageLoaded events fired twice when only the event list view was visible.
  • We fixed the month names in the Arabic translation.

Navigation

Fixed

  • We fixed the responsive option, which caused an error when used with the navigation component.
  • We fixed a bug where an error was thrown if there were no navigation initially and the snap option was true.
  • We added an improvement to make sure the selected item remains in the viewport after resize.

Numpad

Fixed

  • We fixed the freeform numpad’s setVal method that lost the pass-through value and also broke the process of setting values internally.
  • We fixed a bug that added the decimal separator, when the initial value was an integer.

Range

Fixed

  • We fixed a bug that prevented the onCellHoverIn and onCellHoverOut events to fire after a day was clicked.
  • We fixed a bug which caused a console error if all days on the calendar had at least a label.
  • We fixed the prev / next year navigation in case of the Jalali calendar system.
  • We fixed the invalid option to accept the object format for simple rules as well, like { d: '2020-06-15' } or { d: 'w0' }.
  • We fixed the month names in the Arabic translation.

Scroller

Fixed

  • We fixed a bug where scroller wheels mixed up, if multiple scrollers were initialized with the same options object.

Select

Fixed

  • We added a missing input option for the Angular Select component.
  • We fixed a bug that prevented the initial value to show up in the input, when multiple selection and onPush changedetection strategy was used in Angular.
  • We fixed an issue with Angular, where single select mode was not working correctly with touchUi: false.

What's New

Bugfixes for iOS, iPad OS 13, Firefox, Ionic 5 and iOS9

We fixed two rendering issues that started showing up on the latest iOS and iPad OS 13 versions. Listview and Event Calendar, Calendar and Range components were impacted.

We fixed a serious issue that came up with the latest Ionic 5 version and Angular 9, were mobiscroll controls were not showing up on first tap for ion-inputs.

We fixed a popup issue on iOS 9.

We fixed the focus outline on elements that showed up on the latest Firefox version.

Various improvements

A new "background-less" label style was added to the calendar components. Showing just text without the background is possible now.

Besides that we added the $mbsc-calendar-mark sass variable for controlling the default color of the day markings.

The calendar cell hover events went through an improvement as well.

All Components

Fixed

  • We removed the dotted outline present at the top of popups and modal pickers in Firefox.
  • We fixed an issue that prevented the mobiscroll directives to pop up on the first tap when they were used on ion-input in Ionic 5 with Angular 9.

Calendar

New

  • Added mbsc-calendar-mark scss color variable allowing to set the default color of the marks.
  • We added a feature which allows presenting calendar labels as text only, without colored background, by specifying the background: 'none' property.

Fixed

  • We debounced the onCellHoverIn and onCellHoverOut to prevent firing on unintended hover, or during mousedrag.
  • We fixed a problem where recurring invalids for month days were not working correctly, when a month day was used which is not present in every month (29, 30, 31).
  • We fixed a rendering issue on iOS 13 WebView, where the month / year picker appeared without a background.

Eventcalendar

New

  • Added mbsc-calendar-mark scss color variable allowing to set the default color of the marks.

Fixed

  • We debounced the onCellHoverIn and onCellHoverOut to prevent firing on unintended hover, or during mousedrag.
  • We fixed a problem where recurring invalids for month days were not working correctly, when a month day was used which is not present in every month (29, 30, 31).
  • We fixed a rendering issue on iOS 13 WebView, where the month / year picker appeared without a background.

Forms

Fixed

  • We added a missing type definition for the Slider component in React.

Listview

Fixed

  • We fixed an issue where the listview was not rendered properly during scroll, inside a scrollable container other than the main window, on iPad OS 13.

Numpad

Fixed

  • We added proper keyboard support for freeform decimal entry (., +, and - keys).

Popup

Fixed

  • We fixed a positioning issue where the popup went off screen with the soft keyboard opened on iOS 9.

Range

New

  • Added mbsc-calendar-mark scss color variable allowing to set the default color of the marks.
  • We added a feature which allows presenting calendar labels as text only, without colored background, by specifying the background: 'none' property.

Fixed

  • We fixed an issue where the calendar jumped back to the current month in Angular when the mbsc-range-start and mbsc-range-end components were used with a custom set button.
  • We debounced the onCellHoverIn and onCellHoverOut to prevent firing on unintended hover, or during mousedrag.
  • We fixed a problem where recurring invalids for month days were not working correctly, when a month day was used which is not present in every month (29, 30, 31).
  • We fixed a rendering issue on iOS 13 WebView, where the month / year picker appeared without a background.

Rating

Fixed

  • We fixed a bug that prevented the onChange event to fire on the React Rating component.

Select

Fixed

  • We increased the filter input font size for the iOS theme to prevent automatic zoom-in on iPhone, when the filter input is focused.

What's New

Bug fixes

We fixed a couple of bugs along with an icon pack mixup. Because of a processing issue the wrong icons were used in some of the components.

All Components

Fixed

  • We fixed the icons, that got mixed up in version 4.10.1

Eventcalendar

Fixed

  • We fixed an issue where the previous and next navigation buttons were not disabled when the min or max boundaries were reached.
  • We fixed a memory leak that occured when using the event popover and changing the calendar settings dynamically at the same time.
  • We fixed an issue where the event popover was not dismissed when navigating the calendar programmatically.

What's New

Bug fixes

We fixed a couple of styling issues that got introduced along with the new Sass variables for styling.

All Components

Fixed

  • We fixed an SSR rendering issue, introduced in 4.10.0. ( #474 )

Cards

Fixed

  • We fixed the border color of cards in ios, material and windows themes, to be consistent with the previous versions.

Eventcalendar

Fixed

  • We fixed a rendering issue which happened on Chrome, when labels were displayed.

Forms

Fixed

  • We fixed the form background color in ios theme, to be consistent with previous versions.
  • We fixed the border color of textfields, to be consistent with previous versions.

Listview

Fixed

  • We fixed the background color of the listview items and headers, to be consisten with previous versions.

What's New

Advanced styling with Sass

With the new Sass variables we focused on making it super easy to customize the colors of the components. This can be done in two layers. First there are generic properties, like background color, text color and then there are theme specific overrides. Variables for each theme and theme variant can be fine-tuned. Don’t worry, the theme builder is still there and the custom themes in Sass are still possible. This is just a new layer of customization that developers deserve when working with Mobiscroll components.

Freeform entry for the numpad

Entering decimals was a bit limiting to say the least. The numpad always followed a template system. A template was defined and the user filled it out from right to left. That meant if someone didn’t want to enter a decimal value but the form allowed it, they still had to fill out the fractional places with zeroes. While it was possible to implement freeform entry, it required three blocks of code. We thought that is not fair so we are introducing two new settings, entryMode and maxScale to make this super easy.

New events for the calendar and numpad

Introducing the onCellHoverIn and onCellHoverOut events for the calendar based components. Need to display additional information when hovering days in the calendar? You can use the new hover events to show a pop-up with content that is useful for the user and remain in context.

A new onInput event is triggered when the value of the Numpad changes by user interaction. You can use this event to build something like auto-suggest or trigger any custom logic based on the entered value.

Accessibility improvements

We added tab navigation for the event calendar events androle="row" to improve accessibility.

All Components

New

  • Added new scss color variables to all components, allowing color customizations across themes and components.

Calendar

New

  • We added the onCellHoverIn and onCellHoverOut events, allowing to perform custom tasks when calendar days are hovered on desktop, e.g. showing a tooltip.

Fixed

  • We added the missing role="row" attributes on calendar rows for improved accessibility. ( #473 )

Eventcalendar

New

  • We added the onCellHoverIn and onCellHoverOut events, allowing to perform custom tasks when calendar days are hovered on desktop, e.g. showing a tooltip.

Fixed

  • We added the missing role="row" attributes on calendar rows for improved accessibility. ( #473 )
  • We made possible to navigate the event list using the Tab key for improved accessibility.

Measurements

New

  • We added the decimalSeparator setting to localize the decimal separator charachter.

Navigation

Fixed

  • We fixed an issue which caused the onItemTap event to fire twice if the navigation control was nested inside a Scrollview.

Number

New

  • We added the decimalSeparator setting to localize the decimal separator charachter.

Numpad

New

  • We added the onInput event, which runs every time the value is changed from the UI. This is useful to perform custom tasks when the user is typing the value, e.g. auto-suggest values for quick selection.
  • We added the possibility to enter decimal values freely without a pre-defined, fixed scale. This can be enabled through the entryMode setting that accepts template and freeform . The maximum length of the fractional part can be limited by the also newly introduced maxScale that defaults to 4.

Range

New

  • We added the onCellHoverIn and onCellHoverOut events, allowing to perform custom tasks when calendar days are hovered on desktop, e.g. showing a tooltip.

Fixed

  • We added the missing role="row" attributes on calendar rows for improved accessibility. ( #473 )

Select

Fixed

  • We fixed the position of the scrollbar in desktop mode and liquid layout (regression introduced in v4.9.1).

What's New

Bug fixes

This release contains a number of styling fixes for various components - including one that manifested in the latest Chrome release - and improves the listview behavior and styling for RTL languages.

All Components

Fixed

  • We fixed an issue with scroller pickers, where longer wheel values were cut off, even if there were enough space to display them. The issue was limited to the iOS theme in bubble and center mode.
  • We fixed the iOS theme 3D wheels styling to display in perspective in Edge and Firefox as well.

Forms

Fixed

  • We fixed an issue with the Angular button component, where the click event fired on icon click for disabled buttons.

Listview

Fixed

  • We fixed the hierarchical navigation direction and arrow positioning in RTL mode.
  • We fixed the list item border styling in RTL mode for the iOS theme.
  • We fixed the action menu styling where part of the menu was cut off in recent Chrome versions.

Optionlist

Fixed

  • We fixed a React warning that came up in projects where the React Router was used with the Navigation components.

What's New

Supporting Angular Ivy

Ivy is the next-generation compiler and rendering engine for Angular. This is kind of a big deal that comes with lots of great improvements but also a lot of problems. Starting with this release Mobiscroll is compatible with Ivy that is an opt-in preview for Angular 8 but will be enabled by default for Angular 9.

So with this, we are officially supporting Angular 9 👍

Dynamic theme variant change

With the latest OS releases, dark themes are officially supported on the major platforms. That means, more and more apps are starting to support both light and dark themes. Switching between the two was simple enough, but starting with this release we introduced the auto theme variant. That means whenever the theme on your system changes, Mobiscroll components adapt accordingly. No more sore eyes at night.

All Components

New

  • New: We are rolling out support for Angular Ivy and Angular 9 (#470).
  • New: We added the themeVariant setting which can be used to set light and dark variants of the selected theme and introduced auto to make switching dynamic based on system settings.

Fixed

  • We increased the width of alerts, confirms and prompts to accomomdate longer button texts.
  • We fixed the prompt input styling for Mobiscroll and Material themes.
  • We fixed a compile error that came up when using the strict typescript compiler option in Angular and Ionic.

What's New

Bug fixes

We fixed a number of issues realted to ionInputs in Ionic for React, an infinite loop caused by the resizing of the inline calendar, ghost clicks in iOS UIWebView and the auto-theme feature for iPadOS 13.

All Components

Fixed

  • We fixed an issue with IonInputs in react, that required a second tap to open the Mobiscroll components on iOS devices.
  • Fixed the readonly setting in the type definitions of Angular and React components.
  • We fixed the auto theme to work on iPad with iOS 13 as well.

Calendar

Fixed

  • We fixed an issue, where the responsive setting caused an infinite loop in inline mode, if the calendar did not fill the full width of the window. ( #472 )

Color

Fixed

  • We fixed the margin of the selected colors inside the color input in case of multiple selection for Mobiscroll and Material themes.

Forms

Fixed

  • We fixed a bug that prevented the initially set value to show on the Radio and Segmented components, when using the Reactive Forms in Angular. The problem occured when the Radio and Segmented items were rendered dynamically.
  • We fixed an animation bug which occured when closing the mbsc-collapsible.

Navigation

Fixed

  • Added missing type definitions for the React Router setup function.
  • We fixed the popup disappearing issue present in iOS 12.4 UIWebView.

Timespan

Fixed

  • We set a more suitable default width to avoid displaying ... on the scroll wheels.

What's New

Bug fixes

We fixed a number of issues that started showing up after the latest Google Chrome update. We also handled a number of edge cases, bugs and fixed swipe animations in iOS.

All Components

Fixed

  • Fixed a bug in angular, that produced an exception when the components were initially disabled with reactive forms.

Calendar

Fixed

  • We fixed a swipe animation bug (flickering) on month change on iOS that manifested in bubble mode.
  • We fixed the positioning of marks and labels in RTL mode in Chrome.

Eventcalendar

Fixed

  • We fixed an issue which caused infinite height increase on the calendar if there was a hidden calendar also in the page markup.
  • We fixed the positioning of marks and labels in RTL mode in Chrome.

Forms

Fixed

  • We added the missing predefined colors styling for Stepper and Slider components rendered outside of a Form.
  • We added the missing predefined colors styling for Checkbox component for the Windows theme.
  • Corrected the type definitions for the angular switch component's error setting.
  • We fixed a file input bug, where the input was duplicated on every reinitialization.
  • We fixed the step-label API of the Slider and Progress components in angular. Only JSON strings were working before where now arrays can be used as well.

Range

Fixed

  • We fixed the positioning of marks and labels in RTL mode in Chrome.

What's New

Bug fixes

In the previous release we introduced an unfortunate bug which caused the Angular AOT builds to fail.

All Components

Fixed

  • We fixed a major bug introduced in the previous version that caused Angular AOT builds to fail.

Forms

Fixed

  • We fixed an issue with the readonly property on form components, allowing dynamic binding of the property.

Select

Fixed

  • We fixed a bug which prevented the styling enhancement of the select element inside Mobiscroll Form.

What's New

Bug fixes

We added error styling to the checkbox, switch and radio button controls. Some of the components were updated to be consistent with the latest iOS13 look & feel.

We finally got rid of the rxjs-compat dependency in the Angular and Ionic version which means less dependencies less baggage.

We made the navigation component compatible with the new version 5 React Router.

And last but not least we added a number of styling and typography classes for laying out content more efficiently.

All Components

New

  • We got rid of the rxjs-compat package dependency in angular and ionic.
  • Added new showInput setting for all scroller and calendar based components. Using this setting, an mbsc-input - showing the selected value - can also be rendered when components are displayed in inline mode.

Fixed

  • Updated the type definitions of the option method in all components. The type of the arguments are now defined based on the type of the involved component settings.

Color

Fixed

  • We fixed a bug in the react component that caused the placeholder text not to show in the input.
  • Fixed a rendering issue for the color inputs with labels in React.

Eventcalendar

Fixed

  • Fixed a bug in angular, that caused all invalids, marked, colors or labels to disappear from the calendar when any of these settings were updated asynchronously.

Forms

New

  • We added the context setting to the Angular Form component. This setting is inherited by the form's child components and makes it easier to deal with Ionic modals stealing back the focus and scrolling when Mobiscroll components pop up.
  • We thickened the track bar of the progress and slider for the iOS theme to conform with the new iOS 13 design standards.
  • We added the error and errorMessage attributes to the switch, checkbox and radio components in Angular. Using them will render the components with invalid styling and will show the validation message.

Fixed

  • We corrected the floating label animation for outline inputs with Mobiscroll and Material themes.
  • We added the missing active styling for switch, slider, checkbox and radio buttons for the Material theme.
  • We fixed the button hover styling for the Material dark theme.
  • We fixed the input-style attribute for Angular checkboxes, which was not taken into account.
  • We fixed the floating label on the mbsc-input component in Angular and Ionic, which was not active initially, when the input was focused on pageload.
  • We added the missing floating label styling to the slider and progress components with iOS theme.
  • We removed the segmented component's background color for box and outline input styling for the iOS theme.
  • We fixed a bug in the switch, progress and slider controls, that messed up their styling when their theme was changed dynamically.
  • We changed the text color for predefined buttons to white with iOS theme for better readability.
  • We fixed a small bug in the case of floating labels: when the input was focused, and the label was clicked, the input briefly lost the focus, causing the label to animate quickly up and down.
  • Double initialization of form controls mixed up the styles. We fixed that as well.

Image

Fixed

  • We fixed the mbsc-image Angular component to correctly display the component in inline as well.

Navigation

New

  • Added a new setupReactRouter function that enables the navigation component to work with React Router version 5.

Page

New

  • We added new typography utility classes for setting line height: mbsc-line-height-xs, mbsc-line-height-s, mbsc-line-height-m, mbsc-line-height-l, mbsc-line-height-xl.
  • We added new typography classes for heading, paragraph, list and link styles, which can be used outside of the Page component: mbsc-h1 ... mbsc-h6, mbsc-p, mbsc-a, mbsc-ul, mbsc-ol.

Range

Fixed

  • Corrected the input styling inside Mobiscroll forms when using the iOS theme. When there are multiple inputs inside the form group, the border of the range input won't expand to the edge.

Select

Fixed

  • Fixed an issue, when the select was used with 'inline' display inside of a Mobiscroll Form Group, the title of the Form Group was not styled properly.

What's New

Bug fixes

We fixed a number of styling bugs caused by the introduction of the standalone form controls.

Recently detected eventcalendar issues in specific use cases were also fixed with this release.

All Components

New

  • We added the mbsc-align-justify utility class for justified text align styling.

Eventcalendar

Fixed

  • We fixed a bug, which caused the eventlist to show only the events of the current day in agenda view, when the list was scrolled.
  • We fixed the navigate method to scroll correctly to the specified date in agenda view.

Forms

New

  • We added support for commonly used HTML attributes for the mbsc-textarea component in Angular. The following attributes are supported and passed through to the native input: minlength, maxlength, autocomplete, autocapitalize, autocorrect, spellcheck, autofocus, required, wrap.

Fixed

  • Removed unnecessary box-shadow for Toast and Prompt components.
  • Fixed a rendering issue for the icons on inputs with no labels for the iOS theme.
  • Corrected the styling of the outline, flat and disabled buttons for the Material theme.
  • Removed backgound and border from iOS themed non-text form controls outside of mobiscroll forms.

Navigation

Fixed

  • We fixed a bug where the "Show more" menu was not shown correctly on touch devices, just flashed up for a short time.

Select

Fixed

  • We fixed the filter input styling which broke in the previous release, with the introduction of the standalone form controls.

What's New

Plug & play form components

Working with the various form elements is easier than ever. Because of the plug and play nature of Mobiscroll this is a welcome feature that enables the usage of form components without the need to wrap them inside an actual form. You can now easily mix it with your existing styling.

  • Are you using bootstrap and would like to surgically insert a Mobiscroll switch into your form? You can do that now.
  • Looking to add a single slider to a page where there is no form? You can do that now.
  • Building a mobiscroll form and would like to add an element that has a different styling? You can do that as well.

All Components

Fixed

  • Fixed an issue that broke Angular 8 AOT builds.
  • We fixed a bug that broke the compilation process in Angular when using the ES6 modules.
  • We fixed the styling of the arrow in bubble display mode for the Windows theme.

Datetime

Fixed

  • We fixed a bug in the editable input field that occurred when the value was deleted manually. Today's date was written back instead of leaving it empty.

Eventcalendar

New

  • We added the getJson utility function to the event calendar component.

Fixed

  • An issue got fixed that happened on month change. If both the first and second day of the month was invalidated, an error was thrown and calendar navigation broke.
  • We fixed a rendering issue for the all-day text that happened for certain languages.
  • We fixed the event listing for Brazilian timezones that happened during DST months.

Forms

New

  • Form controls are now working individually, without the need to wrap them inside a Mobiscroll Form component.
  • Added support for disabling 'mbsc-input’ the reactive way not just through the disabled attribute.

Fixed

  • Fixed the autofill underline input styling in the iOS theme.
  • Removed text capitalization of the segmented control text in the iOS and Material themes.

Listview

New

  • We added the getJson utility function to the listview component.

Scrollview

Fixed

  • We fixed a bug where the input elements placed inside a scrollview were not focusable on touch devices.
  • We fixed the Typescript definitions for the scrollview options to allow number type for the layout setting.

Select

Fixed

  • We fixed autocomplete/filtering when used with Pinyin keyboard on iOS.

What's New

Bug fixes

We fixed various bugs, improved readability and contrast in some places and added support to commonly used HTML attributes that are passed through to the native input.

We also added styling support for file inputs.

Forms

New

  • We added support for commonly used HTML attributes for the mbsc-input component. The following attributes are supported and passed through to the native input: min, max, minlength, maxlength, autocomplete, autocapitalize, autocorrect, spellcheck, autofocus, step, pattern, required, accept, multiple.
  • Added support for input type="file". File inputs will be consistently styled with other form elements.

Fixed

  • Made the color of the stepper, snackbar text lighter to improve contrast for certain themes.
  • We fixed the background color for the segmented component in pressed state within the iOS theme.
  • We fixed a bug where the segmented components items appeared incorrectly in Angular when Bootstrap was also loaded.
  • Stacked label position was fixed in case of outline inputs with Mobiscroll theme.

Listview

Fixed

  • Fixed a bug with the hierarchical listview. Destroy resulted in an error if the listview was displaying a sublevel.

Numpad

Fixed

  • We fixed the min and max settings to be rounded accordingly to the scale setting.

Popup

Fixed

  • We fixed a bug that prevented inline event handlers to fire in Mobiscroll for Angular.

Range

Fixed

  • Fixed the range color that was rendered incorrectly within custom material themes.

Scrollview

Fixed

  • Fixed flex layout in IE10 and IE11.

Select

Fixed

  • Fixed floating and stacked label styling in Mobiscroll for React.

What's New

Bug fixes

We fixed the collapsible controls in Angular. This applies to collapsible cards and form groups.

Scrolling was fixed for the event calendar agenda view.

The responsive setting was not working for the popup component.

All Components

Fixed

  • Fixed a bug in Angular, that prevented the correct value to be set to the model, when the settings of the component were changed at the same time.

Cards

Fixed

  • The collapsible binding now makes the card components collapsible in angular.

Color

Fixed

  • Styling fixes for the Windows theme.
  • Stacked and floating labels were not working correctly with the iOS theme.
  • Moving the slider has thrown an error when the initial color value on the input was not between the defined colors.

Eventcalendar

Fixed

  • In agenda view, if scrollable event list was enabled, scroll was not working - the event list was constantly re-rendered on scroll.
  • The default inline display mode was not applied initially on the angular component.

Forms

Fixed

  • In Angular, the FormGroup component collapsible behavior was not working. The Accordion component was also affected.

Listview

Fixed

  • The actionable setting was missing from type definitions.
  • The instance parameter was missing from the onStageChange event handler type definitions.
  • The select, deselect, hideLoading and showLoading methods were missing from type definitions.

Popup

Fixed

  • responsive setting did not work for the Popup component.

Select

Fixed

  • In Angular, the select directive showed up empty when it was used with option elements instead of data array.

What's New

Bug fixes

We introduced a bug in 4.7.0 Angular version: event handlers passed inside the options object were not triggered (only event handlers passed inline).

All Components

Fixed

  • Angular event listeners that were passed in the options object were not triggered.
  • In Angular, if a component's value and options were changed at the same time, the value was not updated correctly.

Eventcalendar

Fixed

  • If month was changed from the month or year picker, the first date of the month was not selected.

Forms

Fixed

  • The onChange event of the Slider was not working in React.

Listview

Fixed

  • The option method was missing from the instance type definitions.

Timer

Fixed

  • Small styling fixes for the iOS theme desktop mode.

Timespan

Fixed

  • Small styling fixes for the iOS theme desktop mode.

What's New

Introducing Sass

We are introducing Sass for Mobiscroll. This means that we have migrated from Less to Sass and make it super easy to customize the look and feel of the UI. Besides the SCSS files we do provide CSS files, which means that this release is backwards compatible but comes with superpowers.

Dynamic themes

Along with the move to Sass we are adding dynamic themes. From now on you can create themes directly in your app with the help of Sass Mixins. Just define, pass the parameters and include them in your app.

Custom themes for NPM users

More and more people are installing Mobiscroll with NPM. This makes things convenient, the only disadvantage was that custom themes could not be easily included. Now they can be with the help of dynamic themes using Sass Mixins.

Besides these updates, the release comes with various smaller fixes and improvements. See the full list below:

All Components

New

  • Styling was rewritten from Less to Sass, and the scss files are included in the packages as well, making possible to modify the theme colors programmatically, without using the theme builder.

Fixed

  • Improved on angular bundle sizes.
  • A bunch of type definition issues.

Forms

Fixed

  • Fixed the Input's floating label styling in Angular, when used with Reactive Forms.
  • In React, fixed a bug that killed the Switch components animation when the value was changed programmatically.
  • Corrected the inset binding of the MbscFormGroup component in angular, to change when a false value is passed to it.

Listview

Fixed

  • Corrected a bug in react, that triggered an add animation for each listview item on any data operation like add or remove.

Numpad

Fixed

  • responsive setting did not work.

Optionlist

Fixed

  • Data attributes for list items are now passed down to the rendered element.

What's New

Bug fixes

We fixed a major issue of the Form text fields (text fields were not editable), which occured inside WkWebView on devices with iOS 12.2 (Cordova with WkWebView plugin, and Ionic 3/4, where WkWebView is the default).

The release also contains other minor fixes and improvements

All Components

Fixed

  • mobiscroll.platform was missing from typescript definitions.

Datetime

Fixed

  • Values before min and after max values were not always shown with disabled styling.

Eventcalendar

New

  • Pass the event object as well to the formatDuration function. ( #466 )

Fixed

  • Don't display "all day" for multi-day events on the first and last days, unless allDay property is explicitly set. ( #464 )

Forms

New

  • Added the mobiscroll.notification.dismiss() function which will close the active toast or snackbar message.

Fixed

  • Remove uneccesary shadow from toast and snackbar messages (Material theme).
  • Remove background from form group title and button gruoups inside popup (iOS theme).
  • Remove max-width from the stacked and floating labels (iOS theme).
  • Button shadow was cut off inside button groups (Material theme).
  • Input editing did not work on iOS 12.2, inside WkWebView.

Scroller

Fixed

  • Typescript definition fix for width setting, which can be array as well, not just number.

What's New

Bug fixes and small improvements

We added support for using picker controls on IonInput in Ionic React.

We optimized our resize observer to run outside of Angular, allowing the app to stabilize.

We added the new showOverlay setting which allows hiding the overlay for modal controls, without using custom css styling.

All Components

New

  • We made it possible to display pickers and popups without overlay, using the showOverlay setting.

Fixed

  • Inline scrollers did not work correctly in MS Edge/IE, causing the whole page to scroll.
  • React components can be used with IonInput in Ionic 4 React.
  • Run the resize observer outside of the Angular zone.

Changed

  • We disabled touchpad scroll for calendar views by default (can be enabled using the mousewheel setting).

Eventcalendar

Fixed

  • Double border styling fix inside the event popover listing, for the iOS theme.

Navigation

Fixed

  • Badge styling fixed for text-only navigation control.

What's New

Bug fixes

This is a general bugfix release, addressing issues like wrong event argument in the onEventSelect on calendar label click, French translation fixes, calendar keyboard navigation fix in RTL mode, fixes for React typescript definitions, and other improvements.

All Components

Fixed

  • On iPhone, when showing a toast or snackbar right after closing a modal popup caused the page content to scroll back to the top.
  • The styling of Angular components was wrong after changing theme dynamically.
  • Angularjs model was not set when the keyboard was used to type the value.
  • Added missing i18n property to the type defintions, which enables adding custom language modules.
  • Exported component interfaces to enable the usage of react useRef hooks.
  • Type definition improvements.
  • French translation for Sunday was incorrect (only in form inputs). ( #460 )

Calendar

Fixed

  • Using keyboard navigation left and right arrows worked in the reverse direction in RTL mode.
  • We fixed a bug where IE11 threw an exception on day selection if the calendar view was refreshed.

Cards

Fixed

  • Added missing type definitions for html attributes.

Datetime

Fixed

  • Added missing exports for Date and Time components in react type definitions.

Eventcalendar

Fixed

  • onEventSelect event argument returned wrong event on calendar label tap, if both labels and event list was used.
  • Using keyboard navigation left and right arrows worked in the reverse direction in RTL mode.
  • We fixed a bug where IE11 threw an exception on day selection if the calendar view was refreshed.
  • In Ionic 1 the onEventSelect was not fired if an event was clicked inside the popover.

Listview

Fixed

  • The onItemTap event was fired on the touchend event on touch devices, as a consequence, the click event firing afterwards was causing problems in certain use cases, for example immediately closing a popup opened from the onItemTap event handler.

Range

Fixed

  • Using keyboard navigation left and right arrows worked in the reverse direction in RTL mode.
  • We fixed a bug where IE11 threw an exception on day selection if the calendar view was refreshed.

Select

Fixed

  • When the Select was opened on iPhone, the content was scrolling and flickering, but only if the select element was wrapped inside a label, and the page content was scrollable.

Timer

Fixed

  • Wheel labels were not updated when language was changed dynamically.

Timespan

Fixed

  • Wheel labels were not updated when language was changed dynamically.

What's New

Improved event listing

A lot of people like the event calendar with agenda below, but we kept hearing the same questions. Is it possible to keep the calendar fixed at the top of the page and have the event list scrolling below? Happy to announce that it is supported out of the box. That means you can have a week-view with the weekly to-do listed below and clicking on the days the list will take you to the daily events.

Use marked days and colored days at the same time

The calendar, event calendar and range components support marked and colored days at the same time. No more hacks and compromises to get things working.

React type definitions

Happy to introduce full typescript support for the React components. As typescript is becoming a more common choice for React developers this is a very welcome addition.

Dynamic option bindings in Angular

For an angular developer this isn’t anything new. Basically if an option changes, it should automagically propagate to the component. While it was supported for some of the Mobiscroll options, this was not working for all of them up until now.

Improved desktop listview

The listview is one of those components that was mobile first. Everything started with gestures, sliding, swipe-away, but with more and more people using it on both mobile and desktop, shortcomings started popping up. With this latest release we are making the usage on desktop better by introducing hover effects, click styling and selected states. Both single select & multi-select is supported. So if you’re using the listview for a master-detail view, having the list item selected while loading all the details in a second-pane, you are in luck.

Better load on demand

Besides the desktop improvements we are introducing the onListEnd event that is triggered when someone scrolls to the end of the list. Why is this useful? Well, it makes implementing a “load on demand” logic super-simple. In addition to that you can call the showLoading and hideLoading methods to toggle a loading animation while fetching the data.

All Components

New

  • We implemented dynamic options binding across all settings in the Angular version.
  • Added inputStyle and labelStyle props to react form components: Slider, Progress, Rating, Stepper and Switch. With this you’ll be able to keep consistency across inputs and all these other components too.
  • We added input-style and label-style support to all Angular components.
  • Typescript definitions landed in the React version of products.

Fixed

  • We fixed the Dutch localization, where some of the day names did not start with capital letters.

Calendar

New

  • You can now finally use the marked setting along with colored days, they are not mutually exclusive anymore.

Cards

Fixed

  • We fixed a bug where reinitializing or dynamically updating an option duplicated the collapsible chevron.

Eventcalendar

New

  • You can now finally use the marked setting along with colored days, they are not mutually exclusive anymore.
  • We added support for the pop-over event listing across week and month views. With this we also refactored the code making the file-size a little bit smaller.
  • You can now use the formatDuration function to change the text that is used for the event duration.
  • We are rolling out fixed calendar views with scrollable event listing. No more scrolling the whole page and messy workarounds. ( #452 )

Fixed

  • We fixed a bug that was showing incorrect event duration for all-day events.
  • We fixed a bug that occurred with multiple labels loaded dynamically.
  • Links inside event texts weren’t triggered, we fixed that.

Forms

Fixed

  • We fixed the snackbar control that blocked mouse interactions for elements rendered right next to it.
  • We fixed the Angular version rating control since it didn’t work well with fractional values.

Listview

New

  • onListEnd event was added and is triggered when someone scrolls to the end of the list view. Use this to implement load on demand, show a loading animation and so on.
  • We added a loading animation that you can show/hide with the following methods: showLoading and hideLoading. The icon inside the loading content can be specified with the loadingIcon setting and it can be anything from the included icon package.
  • Hover styling for list items was added making it more desktop-friendly.
  • Native support for item selection was added. This means no more home-baked selected listview item logic.
  • We added the animateAddRemove setting to turn animations on/off for adding and removing list items. Useful for turning it off on batch operations.

Fixed

  • We fixed a bug in the dynamic update logic of the context setting. This is needed for the listview to be used correctly within Ionic Framework 4.

Numpad

New

  • We added support for [mbsc-options] to be used with directives. This was only supported within the components before.

Fixed

  • We added the missing preset setting to the MbscNumpadOptions type definitions.
  • We exported the preset specific settings (MbscNumpadDateOption, MbscNumpadDecimalOptions...) that were missing in the Angular version.
  • We fixed a bug with the thousandsSeparator that messed up values in some cases: 0.0,005 was printed instead of 0.0005.

Range

New

  • You can now finally use the marked setting along with colored days, they are not mutually exclusive anymore.

Select

Fixed

  • Reduce filter input margin for Material theme.

What's New

Bug fixes

This is a general bugfix release that addresses issues with Ionic 4 plus adds a couple small improvements for ease of use.

All Components

Fixed

  • We fixed an bug that caused trouble across all pickers linked to ion-input components in Ionic 4. Controls didn't open on first input tap.

Calendar

New

  • We improved the Navigate method to support ISO strings and moment.js objects.
  • We added a new updateEvent method that makes updating events easier. You won't need to remove and re-add events, everything is handled in the background.

Fixed

  • We fixed an issue where the wrong date was selected if min or max was set and dateFormat did not contain the year (#456).

Listview

Fixed

  • A bug got fixed that caused an exception if the remove method was called for an already removed element. The same error occurred in the Angular implementation of the hierarchical listview, when the host component got destroyed.

What's New

Bug fixes

While 4.5.1 fixed some issues we broke the Calendar month swipe functionality in center and bubble mode. See the full list below.

All Components

New

  • Individually control input and label style on a component basis in Angular and React.

Fixed

  • If modal picker was opened from a 3rd party modal dialog (Ionic, Bootstrap) the fight over keeping the focus caused errors. We stepped in to keep the peace.

Calendar

Fixed

  • We fixed a nasty little bug that we caused with 4.5.1. Month swipe did not work on initial show in center and bubble display mode.

Forms

Fixed

  • Updating ngModel checkbox value will update the UI accordingly.

What's New

Bug fixes

This is a general bugfix release and it includes fixes for the Calendar based components, Numpad, Color, Select, Forms and Navigation.

All Components

Fixed

  • Passing arrow functions to React components now update the components as needed.
  • We added missing type definitions for the layout setting.

Calendar

Fixed

  • redraw method messed up the calendar layout in RTL mode.
  • Wrong date was shown after changing number of weeks dynamically.

Color

Fixed

  • We fixed color presets in React.

Eventcalendar

Fixed

  • A bug got fixed in the redraw method that messed up the calendar layout in RTL mode.
  • Bug fixed that showed a wrong date after changing the view dynamically.
  • Quick consecutive arrow taps failed if event listing was used. Bug got fixed.
  • We fixed the more event label that was not always correctly displayed.

Changed

  • If popover is set to false, it completely disables the popover, even for more events label.

Forms

Fixed

  • We fixed the textarea label alignment for the iOS theme.
  • We fixed sticky floating labels that were not behaving on Chrome auto-fill.

Listview

Fixed

  • The remove method was fixed for hierarchical lists.

Navigation

Fixed

  • Badges are now supported for dynamically added navigation items in angular.

Numpad

Fixed

  • We added missing type definitions for formatValue and parseValue.

Range

Fixed

  • redraw method messed up the calendar layout in RTL mode.
  • showSelector can now hide the range start/end tabs for every configuration. This is useful when start and endare handled by two separate inputs.

Select

Fixed

  • The mbsc-select directive will work on mbsc-dropdown form elements.
  • Scroll arrow wheels were fixed. No more hiding values in Mobiscroll theme.

What's New

Calendar systems

We’ve always supported the Gregorian calendar, but after adding different culture and localization settings need for other systems started popping up. Happy to introduce the Hijri and Jalali calendar system that is supported by all date components: Calendar, Range, Date & Time and Event calendar.

Event labels

We are very excited to introduce a brand new way to display event data! Labels, multiple labels per day and multi-day labels are all supported. You can use the same API to capture and store the events and enable the label rendering with the labels property inside the view: { calendar: { labels: true } } object. This was maybe the most requested feature for the Event Calendar and now it’s here.

Event labels can be clicked and selected while the appropriate events are triggered from which all sorts of things can be done.

Improvements and plugging leaks

We are shipping several improvements and fixes. Making steps towards supporting tree-shaking and improving the usage of development packages on the way. We’ve also fixed a couple of memory leaks that were causing trouble in Angular JS and Ionic 1 apps.

All Components

New

  • We've improved the usage of development modules within Angular. The components and directives are bundled into separate NgModules so that you can load only what's needed. Steps are made towards full tree-shaking support.

Fixed

  • Various memory leaks were fixed in the Angular JS implementation.

Calendar

New

  • Jalali and Hijri calendar systems were introduced besides the already supported Gregorian calendar. The new calendarSystem setting is where you can set gregorian, jalali or hijri.
  • Year, month and day suffixes were added for Korean and Chinese languages.
  • We added support for multiple labels. It is now possible to use the Calendar and display multiple labels instead of just one.

Fixed

  • Weekly repeat still failed in Safari for Sunday in Brasília Time (BRT) timezone. It got fixed.

Cards

Fixed

  • We improved spacing in the card title. This was especially a problem when an image followed the title.

Datetime

New

  • Jalali and Hijri calendar systems were introduced besides the already supported Gregorian calendar. The new calendarSystem setting is where you can set gregorian, jalali or hijri.

Fixed

  • Weekly repeat still failed in Safari for Sunday in Brasília Time (BRT) timezone. It got fixed.

Eventcalendar

New

  • We are introducing a new way to list events. Events as labels is here with multiple day events and multiple labels per day.
  • Jalali and Hijri calendar systems were introduced besides the already supported Gregorian calendar. The new calendarSystem setting is where you can set gregorian, jalali or hijri.

Fixed

  • We fixed the getEvents method. It did not work correctly if a date was passed (regression introduced in v4.4.3).
  • Weekly repeat still failed in Safari for Sunday in Brasília Time (BRT) timezone. It got fixed.

Forms

Fixed

  • We fixed a bug where form components didn't lose their styling after className prop changes in React.
  • We have improved the spacing of buttons inside button groups.

Image

Fixed

  • We fixed a nasty memory leak in Angular JS. Dynamically generated items kept building up and cleaned up.

Numpad

Fixed

  • We added a number of inline settings for numpad presets that were missing in the Angular and React implementation.

Range

New

  • Jalali and Hijri calendar systems were introduced besides the already supported Gregorian calendar. The new calendarSystem setting is where you can set gregorian, jalali or hijri.
  • We added support for multiple labels. You can now display multiple labels inside the Range picker.

Fixed

  • Weekly repeat still failed in Safari for Sunday in Brasília Time (BRT) timezone. It got fixed.

Scrollview

Fixed

  • Dynamically adding and removing items won't break the scrolling in react.

Select

Fixed

  • Fixed a typo in the type definitions which further improves usage.
  • Another Angular JS memory leak fix. Select options generated with ng-repeat were problematic.

Treelist

Fixed

  • Another leak was plugged for Angular JS. Dynamically generated items won't cause any more trouble.

What's New

Bugfixes and improvements

We cleaned up the type definitions a little bit. It turned out that there were event handlers missing. We also fixed a nasty timezone issue that showed itself in Brasília Time (BRT).

Combining the Grid Layout with Forms sounds great. It makes building responsive forms super easy, like multiple columns on large screens, a single column on small screens. This all worked well, but there were issues with spacing and things didn’t look as good as they could. So pulling and cutting a little bit here and there made things prettier.

We enabled 3D scrolling for iOS theme on newer Android devices.

See the complete list of changes below:

All Components

Fixed

  • When using the Date & Time, Calendar, Range, Event Calendar components in Brasília Time (BRT) timezone, weekly repeating (w0 ... w6) failed for various settings (invalid, marked, labels, colors, events) in months where daylight saving starts. Timezones are tricky...
  • When using multiple buttons in popups, alignment was off. It did not wrap in multiple lines and text was cut off. This issue was present for Mobiscroll and Material themes.
  • AOT builds in angular and ionic was throwing an exception when using the forRoot configuration.

Changed

  • 3D wheel rendering for the iOS theme was turned off of Android for performance reasons. After revisiting the topic we decided only turn it off under Android version 8. Use the scroll3d setting to manually override it.

Calendar

Fixed

  • Type definition for onSetDate were missing and we fixed that.

Color

Fixed

  • Type definitions for onItemTap and onPreviewItemTap events were also missing.

Eventcalendar

Fixed

  • Added missing property to the onDayChange event argument.
  • Added missing type definitions for eventText, eventsText, labelsShort, onSetDate.

Forms

Fixed

  • Floating labels were not animated if a jQuery triggered a change event on the field.
  • Fixed the styling when additional elements were between the label and the input.
  • Fixed iOS theme input border in autofill field.
  • Form components won't re-render when there's no change of inputs.
  • The mobiscroll inputs lost their styling in react when their valid state changed.
  • Better spacing of form inputs if placed inside a responsive grid layout.

Range

Fixed

  • In Brasília Time (BRT) timezone the range selection highlight was incorrect in months where daylight saving starts (#454).
  • Added missing type definition for onSetDate.

Scrollview

Fixed

  • Don't trigger touchend event when the content is scrolled vertically, it might cause exceptions in event handlers attached outside of the scrollview.

Select

Fixed

  • The select failed with an exception, if remote data was used with groups and filtering. We fixed that.
  • Type definitions for the onFilter event were added.

What's New

Bug fixes

A much requested fix arrives, which allows opening picker controls from a popup, without the popup being closed.

We improved the styling of inputs which were auto-filled by the browser. Also, in Chrome, the floating labels did not always notice that the browser auto-filled the text field, so they appeared wrongly over the value.

Nested collapsible controls were not working correctly - toggling the parent collapsible also toggled all collapsible containers inside.

See the complete list of changes below:

All Components

Fixed

  • Remove high z-index from inline picker controls.
  • Remove touch-action: none styling from html / body elements in case of modal popups to prevent forced reflow on document - the styling was moved inside the modal markup.

Calendar

Fixed

  • Calendar tab styling fixes in inline mode, inside Mobiscroll Page.
  • changeTab method should not hide the calendar if tabs are not present.
  • Don't focus invalid dates when clicked.

Cards

Fixed

  • Nested collapsible elements didn't work correctly inside collapsible cards - child collapsibles were also toggled with the parent collapsible.

Eventcalendar

Fixed

  • Event list styling fixes inside the event popover.
  • Selected day was not updated when only event list was displayed. Needed, when views are changed dynamically.

Forms

Fixed

  • Allow additional css classes to use on the MbscFormGroup, MbscFormGroupTitle, MbscFormGroupContent and MbscAccordion components.
  • Nested collapsible elements didn't work correctly - child collapsibles were also toggled with the parent collapsible.
  • ENTER key should close the prompt notification when the input is focused.

Listview

Fixed

  • Ghost click fix for UIWebView on iOS - hierarchical listview navigated 2 levels at once because of the ghost click.
  • Floating labels did not render correctly on autofill fields.
  • Autofill input field styling was improved.
  • For Checkbox, Radio, Switch, Stepper, Progress, Slider and Rating components inputStyle and labelStyle props was not handled correctly in React.

Navigation

Fixed

  • RTL mode scroll to center worked incorrectly on iOS Safari.
  • React NavItems can be used with inline conditions without throwing an error.
  • Switching from hamburger navigation to tab or bottom navigation using the responsive setting did not work.
  • Update badges on refresh method call as well.

Page

Fixed

  • Muted button styling changed from color to opacity.

Popup

Fixed

  • Components can be opened from a popup without the popup being closed.

Range

Fixed

  • defaultValue: null did not work correctly, today's date was selected for start and end dates.

Select

Fixed

  • Error was thrown if any of the values contained the " character.

Treelist

Fixed

  • Variable level treelist was not working correctly when the treelist was used with data (not generated from markup).

What's New

Bug fixes

Some nasty bugs started creeping up on us, so we fixed them. If you had issues with the Calendar rendering incorrectly in your Ionic app you want to upgrade to this release.

We also released the new form fields and labels in 4.4, but of course after getting adoption some bugs started to pop up. We got those fixed as well. Other fixes we shipped are listed below.

All Components

Fixed

  • Allow Enter and Space keydown events to propagate up from modal popups.

Calendar

New

  • Calendar layout is automatically recalculated on size or visibility changes, even if there's no resize event.

Fixed

  • firstDay parameter was wrong inside the onPageLoading and onPageLoaded events on initial load, if < code > min was also set and minimum date was inside the initially loaded month.

Eventcalendar

Fixed

  • firstDay parameter was wrong inside the onPageLoading and onPageLoaded events on initial load, if min was also set and minimum date was inside the initially loaded month. This also caused the initial event list to be inside the wrong date range.

Forms

Fixed

  • Styling fixes for box and outline styles for checkbox, radio, switch, slider, progress and stepper controls (iOS theme).
  • Added missing inset property to the MbscFormGroup propTypes in React.
  • There was a bug in React which caused an exception on every text update in the Textarea component.
  • Border radius added for box and outline inputs inside a form group inset on iOS theme.
  • The Angular Input, Textarea, Dropdown and Rating component can be made readonly with the readonly attribute.
  • Don't display border for iOS themed form group title, if input style is box or outline.

Gridlayout

Fixed

  • Grid container needed border-box box sizing to appear correcty outside an mbsc-page too.

Listview

Fixed

  • Allow focus on form controls inside listview items.

Navigation

Fixed

  • Scroll to center worked incorrectly in RTL mode (in case of tab navigation).

Page

Fixed

  • Added missing exportAs property for the angular component. Now template variables can be set to the page component explicitly.

Scroller

Fixed

  • The direction argument of the validate function was incorrect in case of wheel item tap.

Scrollview

New

  • Scrollview layout is automatically recalculated on size or visibility changes, even if there's no resize event.

Fixed

  • Don't activate snap if layout is fixed and itemWidth is specified, because it won't allow to completely scroll to the end.

Select

Fixed

  • Incorrect button positioning in center mode for filtered select.
  • The input setting, that helps to customize the look, is now added to type definitions and documented.
  • Dynamic data update failed sometimes when group wheels were present.
  • Popup won't close after resize, if used with responsive setting, showOnFocus enabled and inside Mobiscroll Form.

What's New

New inputs

Happy to introduce the long-awaited floating labels. Besides that we are adding stacked and inline labels to every theme. The inputs received a makeover too with standard, box and outline rendering. This should give you enough flexibility to create the forms you desire.

Improved navigation component

It become easier than ever to use our navigation component in Angular, Ionic Framework and React. We made a bunch of improvements to make the code prettier and save you some time. We also made it responsive. Going forward you will be able to build navigation that renders tabs on desktop and a hamburger pop-over on mobile.

New style modifiers

We added a couple of new classes for styling. Text size modifiers, and a class to lighten the text color was added to provide you with tools for more varied designs. Unordered and ordered lists received small improvements too.

All Components

New

  • New typography CSS classes were introduced. Text size modifiers, light color modifiers, ordered and unordered list styles were added.

Fixed

  • A small but nasty bug was fixed where the responsive setting caused an infinite loop in inline mode for non full-width components.
  • We removed internally used lifecycle hooks from react components, that will be deprecated in upcoming react versions.

Forms

New

  • New label styles were introduced across all themes. Controlled by the labelStyle setting you can now render inline, stacked and floating labels.
  • New input variations were introduced across all themes. With the inputStyle setting you can now render underline, box or outline inputs. These settings translate to select elements as well.
  • Proper styling was added for React select elements with the little arrow and everything.

Fixed

  • The disabled cursor was fixed for switch elements.

Changed

  • The react MbscFormGroup, MbscFormGroupTitle and MbscFormGroupContent components were renamed to FormGroup, FormGroupTitle and FormGroupContent. The old naming is deprecated and will be removed in a future release.

Listview

Fixed

  • A rendering bug was fixed for RTL hierarchical listviews with icons.

Navigation

New

  • We improved the Navigation component usage for Angular and Ionic Framework by adding support for the RouterLink directive that automatically selects the active route.
  • We also improved usage in React. The NavItems now support the same props as the Link component and become selected when the path matches their to prop.
  • Responsive breakpoints ware introduced for controlling and configuring various settings based on screen sizes. You can now make the components fully responsive with the new responsive setting.

Fixed

  • We fixed a bug that caused a React exception on re-rendering whenever another component changed that resided before it in the DOM tree.

Page

Fixed

  • A bug got fixed that caused issues when using the page component with the navigation component in react.

Popup

Fixed

  • We added a bunch of missing settings to the type definitions. Typescript developers rejoice!

Range

Fixed

  • We fixed a bug where the date range picker lost the time-part after programmatically setting a value with setVal or by getting updated from the model.

Scrollview

New

  • Responsive breakpoints ware introduced for controlling and configuring various settings based on screen sizes. You can now make the components fully responsive with the new responsive setting.

Fixed

  • Corrected a typo in the Scrollview components that prevented Proptypes validation.
  • We fixed a bug that caused a React exception on re-rendering whenever another component changed that resided before it in the DOM tree.

Select

Fixed

  • We fixed a bug that broke keyboard navigation and selection for multiple select, filter select and non-touch UI mode.
  • We fixed a bug that prevented the usage of custom React components within the Select. You can now use the select on custom inputs or components.

What's New

All Components

Fixed

  • In some cases onBeforeShow was fired multiple times, if handler returned false.
  • Disabling a picker control will also disable all associated input fields as well.

Cards

Fixed

  • Remove fixed height from collapsible on animation end, otherwise layout will be incorrect after resize / orientationchange.

Eventcalendar

Fixed

  • onEventSelect handler received the wrong date as argument in case of event listing.

Forms

Fixed

  • Remove fixed height from collapsible on animation end, otherwise layout will be incorrect after resize / orientationchange.
  • Toggle switch did not work correctly if tapped directly on switch handle (regression introduced in 4.3.1).

Treelist

Fixed

  • Variable depth treelist was not working correctly - there was an error when a new hierarchy level was about to appear (regression introduced in 4.3.0).

What's New

All Components

Fixed

  • Angularjs navigation, optionlist and scrollview directives won't throw an exception after initialization.
  • In case of picker controls update the selected value, if a setting is changed that might affect the value (e.g. min, max, dateFormat, lang, etc.).
  • Desktop styling fixes: border radius for Material and Mobiscroll themes in top/bottom mode.

Calendar

Fixed

  • In case of vertical scroll calculate correctly whether short or long month names should be displayed in the header.
  • Don't navigate the calendar view if time is changed on the scroll wheels.

Color

Fixed

  • Desktop mode styling fixes in top and bottom display.
  • Don't wrap longer placeholder text in multiple lines.

Eventcalendar

Fixed

  • Use the all-day text translations inside event popover as well, not only in the event list.
  • Event popover border radius was not clipping content in Safari.

Forms

New

  • Displaying a tooltip with the full label text when hovering on a form elements label.

Listview

Fixed

  • Removed items remained in memory due to a retaining reference, causing memory leaks.

Range

Fixed

  • The mobiscroll react range component will pass down the type prop to the default generated input.
  • Center align for start / end labels in desktop styling.

Select

Fixed

  • The mbsc-select directive won't generate an additional input element when it's used on ion-inputs in ionic 4
  • Multiple select group wheel styling fixes in touchUi mode.
  • Don't trigger the onSet during scroll in tap selection mode.

What's New

New Component: Grid Layout

This is probably our biggest release since 4.0. We are introducing a new component: Mobiscroll Grid Layout. It is our full-featured responsive grid system for building flexible layouts.

Desktop components

We are launching support for desktop and pointer interaction for all of our mobile components. Scroller components and everything that was previously only available with touch interaction supports actual scrollbars and full interaction with a cursor.

Responsive breakpoints

If this wouldn’t be enough we are also introducing responsive breakpoints. You can now pass diffreent settings for diffreent screens, which means it is super easy now to make components show up and behave differently depending where they are being loaded. This works hand in hand with the new desktop support. You can now easily configure a touch UI on mobile and have pointer interaction desktop with a different display mode.

New languages

Oh and let’s welcome the new Thai and Ukrainian translations pushing up the supported languages to 37.

All Components

New

  • Enable manual editing of Angular inputs when showOnFocus and showOnTap is false.
  • Desktop mode and pointer interaction can now be enabled by setting the touchUi option to false. This simple setting involves a lot of behind the scenes heavy lifting including desktop rendering, positioning and enabling interaction with scrollbars instead of relying on touch UI.
  • Responsive breakpoints are introduced for controlling and configuring various settings based on screen sizes. You can now make the components fully responsive with the new responsive setting.

Fixed

  • Bubble positioning was fixed for IE11.
  • Using directives in Ionic on ion-input components will behave correctly after data selection.

Calendar

Fixed

  • Improved usability by increasing the tappable area around prev/next arrow buttons.
  • The default positioning the multiple month view was changed to be more relevant depending on the use-case and defaults, min and max ranges.

Cards

New

  • Make your cards collapsible with the collapsible feature.
  • Collapsible cards can be rendered in an mbsc-accordion container to enable accordion behavior.

Color

Fixed

  • When used in Ionic framework, the color will will be passed to ion-inputs when selected.

Eventcalendar

Fixed

  • The event bubble styling was improved for better readability.
  • Event bubble positioning was fixed for RTL rendering.
  • When used in React, the component will be updated on prop change.

Forms

New

  • Make form groups and panel collapsible with the new collapsible feature.
  • Let form groups act as an accordion by wrapping them in the new accordion component.
  • A new Form Group component was added for React and Angular versions.
  • The text area can now be programmatically resized through the Javascript and jQuery APIs.

Fixed

  • New rows attribute was added to the mbsc-textarea component to control the maximum number of rows.
  • The text area will automatically resize itself based on the model and value changes in React and Angular version.

Gridlayout

New

  • Brand new responsive grid system was added for create flexible layouts.
  • Responsive CSS classes to cover the 12 columns from extra small to extra large screens.

Languages

New

  • Thai translation was added.
  • Ukrainian translation was added.

Listview

Fixed

  • Sort handles will now be removed when dynamically changing the sortable setting.
  • Click events will fire correctly when using the list view on touch devices.
  • Add and remove animations were speeded up for a more fluid user experience.

Numpad

Fixed

  • Decimal value will now be correctly parsed for the dot ('.') thousand separator.
  • The decimal preset will accept null as default instead of 0 in Angular.

Range

New

  • New RangeStart and RangeEnd components were added for React that can be used inside the Range component for greater extensibility.

Fixed

  • Double border rendering issue was fixed for the iOS theme
  • The default positioning the multiple month view was changed to be more relevant depending on the use-case and defaults, min and max ranges.

Select

Fixed

  • Missing filter property was added to the MbscSelectOptions type.

Treelist

Fixed

  • The selected value coming from the Angular JS model will be correctly set when the list is generated using ng-repeat.
  • Wheel labels will be correctly rendered regardless of how the data is being set.

Widget

New

  • The component was renamed to popup to better describe what it is serving. While the old initialization is still working, it is now deprecated and will be removed in a future version.
  • mbsc-no-padding CSS class can now be applied inside the component to remove the default padding.

Fixed

  • Dynamically generated form inputs will now be focusable inside the popup.
  • Error will not be thrown on close if the DOM changed (siblings or parent no longer present).

What's New

All Components

Fixed

  • jQuery and vanilla js typescript definitions were importing a module from a wrong location.

Calendar

Fixed

  • Type of the controls setting updated to array in angular.
  • Display the month name of the selected date in calendar header on initial show in case of week view, instead of the first day of the visible week.
  • Calendar scroll was off by a few pixels after multiple month changes, if the calendar width was fractional.

Cards

Fixed

  • The predefined image styles (avatar, thumbnail, fluid) did not apply if the card wasn't inside of an mbsc-page component.

Eventcalendar

Fixed

  • Added missing view setting for eventcalendar inline settings.
  • eventBubble setting did not work when set to false.
  • Event listing threw error if ISO 8601 date strings were passed to event start/end dates.

Languages

Fixed

  • eventText and eventsText translations were missing from most of the language files.

Listview

Fixed

  • Sometimes first stage was loaded to soon when swipe direction was changed (from right to left or from left to right).

Navigation

Fixed

  • onItemTap event was triggered twice if an item was tapped inside the bubble popup (on touch devices).

Range

Fixed

  • Type of the controls setting updated to array in angular.
  • Fixed exception in angular when rangepicker was opened and closed without focusing any element.

Select

Fixed

  • data setting type updated in react and angular to enable the use of remote data sources.
  • Make filtering work with numbers as well.
  • onFilter event was not triggered when the filter input clear button was pressed which caused problems on custom filter implementations.

What's New

All Components

Fixed

  • Form elements did not work inside modal popups - Widget, Select with autocomplete (regression introduced in 4.2.2 by solving ghost click issues in Ionic).

What's New

All Components

Fixed

  • Injected service modifiers changed to public to avoid AOT builds runtime exceptions.
  • In Ionic 1/2/3 popup closed immediately if opened from external button click (using ng-click or click).

Calendar

Fixed

  • Vertical scroll did not work correctly with the iOS theme.
  • Colors, events, labels and marked inline setting types updated to better reflect type support.

Datetime

Fixed

  • Invalid time ranges did not work, since support for ISO 8601 date strings was introduced (4.2.0).
  • Date part was missing in returned ISO 8601 string in case of the compact date & time picker.

Eventcalendar

Fixed

  • Inline data setting type updated to better reflect type support.

Forms

Fixed

  • Updating programmatically a select's value did not work correctly with jQuery.
  • Toast with colors didn't have opacity with iOS, Material and Mobiscroll themes.
  • In case of initially long value, the textarea was scrolled to the bottom and navigating with arrow keys did not work.

Range

Fixed

  • Added missing properties for start and end components, so that Angular AOT build won't fail.
  • Angular start and end components initial model value is shown in the inputs.

What's New

We fixed the date parsing bugs which were introduced with the new data support from version 4.2.0.

Calendar

Fixed

  • Invalids with start and end dates did not work correctly.
  • Date parsing fixes - exact dates were handled as days of week due to an incorrect regex.
  • Call stopPropagation on month slide, to prevent side effects, like side menu opening.

Datetime

Fixed

  • Invalids with start and end dates did not work correctly.
  • Date parsing fixes - exact dates were handled as days of week due to an incorrect regex.

Eventcalendar

Fixed

  • Date parsing fixes - exact dates were handled as days of week due to an incorrect regex.
  • Call stopPropagation on month slide, to prevent side effects, like side menu opening.

Range

Fixed

  • Invalids with start and end dates did not work correctly.
  • Date parsing fixes - exact dates were handled as days of week due to an incorrect regex.
  • Call stopPropagation on month slide, to prevent side effects, like side menu opening.

What's New

Support for ISO 8601 and moment.js objects were added to the datetime based components. You can now work with the two new data types besides javascript date objects.

Typescript definitions landed for the jQuery and plain JS components.

We also added color support to the snackbar and toast.

All Components

New

  • Reusable empty view styling with title and description was added.
  • invalid and valid settings are updated automatically in angular, when bound to an array.
  • Added typescript definitions for jQuery and vanilla js controls.

Fixed

  • Angular components won't throw an error when changing disabled state.
  • The encoded accent characters were fixed in localization strings.

Calendar

New

  • colors, labels and marked settings are updated automatically in angular, when bound to an array.
  • Support for ISO 8601 date strings and moment.js objects to pass and retreive dates.

Color

Fixed

  • Colors weren't updated dynamically through the data setting.

Datetime

New

  • Support for ISO 8601 date strings and moment.js objects to pass and retreive dates.

Eventcalendar

New

  • colors, labels and marked settings are updated automatically in angular, when bound to an array.
  • Support for ISO 8601 date strings and moment.js objects to pass and retreive dates.

Fixed

  • Added missing onEventSelect event emitter and settings to the MbscEventcalendarOptions interface.

Forms

New

  • Color presets added to Snackbar and Toast.
  • Icon property added to Snackbar button.

Fixed

  • Disabled outline button styling was fixed for the Mobiscroll Dark theme.

Listview

Fixed

  • There was a styling bug if both sort handle and image was present.
  • onSort and onSortChange event parameters were not passed correctly.
  • There was an unnecessary top border of the first group header with the iOS theme.
  • Listview items can be added dynamically when using hierarchical structures in Angular.
  • The background color of the listview (behind the list items) has been updated.

Navigation

Fixed

  • ng-click was not fired on navigation items when used with Ionic 1.
  • Click event was not correctly firing inside hamburger menu popup and "show more" popup.

Range

New

  • Support for ISO 8601 date strings and moment.js objects to pass and retreive dates.

Scrollview

Fixed

  • Click event was not correctly firing on elements inside scrollview items.

What's New

All Components

Fixed

  • Angular npm package metadata was not compatible with Angular version < 5, when using AOT builds.

Eventcalendar

Fixed

  • "All-day" and "No events" captions localization was not working.
  • Event listing was not working in trial version with Angular.

Range

Fixed

  • startInput and endInput settings were not working in Angular if used on mbsc-input or ion-input components.

What's New

All Components

New

  • Provide es6 module format as well for the angular npm packages.

Fixed

  • Windows theme styling fixes.
  • React components look for input elements to initialize on when children are passed.

Changed

  • Moved npm package dependencies to peer dependencies.

Calendar

Fixed

  • Selected styling was not applied in multiple selection mode with the Bootstrap theme.
  • Weekday names were incorrectly aligned in multiple month view and week numbers displayed.
  • Various styling updates for iOS including hover state.

Eventcalendar

New

  • Built in event listing for monthly, weekly, daily and custom date ranges.
  • Improved styling for larger screens.

Changed

  • Event popover styling improvements.
  • Various styling updates for iOS including hover state.

Forms

Fixed

  • Carret was not movable on Android Chrome inside an input field.
  • Textarea label width was incorrect with the iOS theme.

Image

Fixed

  • Initialization failed on empty data / empty list.

Numpad

Fixed

  • Placeholders won't be overwritten with empty strings.

Range

Fixed

  • In scroller mode date range validation was incorrect: if the selected start date was after end date, end date was incorrectly modified to the day before start date.

Scrollview

Fixed

  • Scrolling did not work on iOS9.

Select

Fixed

  • Remote filtering did not work correctly, only the first filtering request was sent (regression introduced in 4.0.0).

What's New

All Components

New

  • Improvements to avoid flash of unstyled content (FOUC).
  • Windows theme updated to Windows / Windows Phone 10 styling (#407).

Fixed

  • Added missing cssClass setting to angular components and directives.
  • Disabled draggable state of avatar image and added option to turn it off.
  • Removed @type annotations from comments for ngc + tsickle compatibility.

Calendar

Fixed

  • Added missing onPageLoaded, onPageLoading and onPageChange events to the angular and react component.
  • Clicking on empty day resulted in error when using the showOuterDays: false setting.
  • Showing week numbers messed up the calendar layout.
  • Don't dim days from different months in case of week view.
  • Counter did not work in multiple selection mode.
  • Stopping swipe navigation and disabling prev/next buttons did not work correctly in case of week view.

Changed

  • Days from other months are hidden by default when scroll is vertical.

Cards

Fixed

  • onClick handler can be passed to react components inside card.
  • Listview corners were not rounded inside card on Safari/macOS.

Color

Fixed

  • undefined value was added to the values array with setVal in multiple selection mode.
  • In refine mode the color slider became unstyled during hide animation.

Eventcalendar

Fixed

  • Added missing allDay event property definition in angular directive

Forms

New

  • React form components added.
  • Prompt input value is selected by default on show (if any).
  • Angular segmented component multiselection works with arrays too.

Fixed

  • Click / tap on switch handle should toggle the switch (regression introduced in 4.0.0-beta3).
  • Dropdown destroy was incorrect.
  • Multiple slider handle support added to angularjs.
  • Stepper and segmented control border styling fix with Material theme on macOS Safari.

Listview

Fixed

  • swipeleft and swiperight settings names corrected in angular component.

Navigation

Fixed

  • Badges show up and update automatically on angular navigation items. ( #443 )
  • prev and next method toggle parameter wasn't true by default.

Range

Fixed

  • Auto-correction for min and max ranges should not set dates out of min and max boundaries.

Scroller

New

  • Added wheel index to event args inside the onChange event.

Fixed

  • Added missing setting definitions for parseValue and formatValue in angular and react

Select

Fixed

  • Filtering did not work after async data update.
  • getVal method returned null if selected value was 0.
  • null can also be passed initially for the data setting in angular and react components.
  • In ionic, the mbsc-data attribute won't crash the select initially, when the model value is not the first data item.

Timer

Fixed

  • Scroller went crazy when running stopwatch in Angular and AngularJS.

What's New

All Components

Fixed

  • Added missing type definitions for the parseDate and formatDate util functions in the mobiscroll namespace.
  • Automatically prevent "Maximum call stack size exceeded" error when pickers are opened from a Bootstrap modal dialog.
  • iOS theme 3D scroller wheels were messed up, if wheel was scrolled with trackpad until min or max values.
  • Bootstrap 4 compatibility fixes.

Calendar

New

  • Added proper keyboard navigation for better accessibility.
  • Added onPageChange, onPageLoading, onPageLoaded events to substitute onMonthChange, onMonthLoading and onMonthLoaded, because the naming was not suitable in case of week view. Also, instead of just year and month parameters (which is insufficient in case of week views), the events receive a date object, representing the first day of the view. The old events are still triggered as well, but are considered as deprecated.

Fixed

  • option method resulted in error when called on an inline calendar.
  • If icons were used without text within the labels setting, they were displayed in a wrong color with the Mobiscroll and Material themes.
  • calendarText setting. The dateText is used instead of it.

Changed

  • the calendar-date-time tab configuration is not supported anymore.

Eventcalendar

New

  • Be able to mark an event as an all-day event.

Fixed

  • Added missing [options] binding for the Angular component.

Forms

New

  • Color swatches for radio, switch, checkbox, slider, stepper, and segmented components.
  • Added rating component.

Fixed

  • Styles of the outline buttons was not correct with iOS, Material and Windows themes.
  • Incorrect styling of inset form groups of iOS theme, when used with Angular.
  • Updated value shown in angular dropdown when changed programmatically without ngModel

Changed

  • Radio buttons and checkbox appearance in windows theme.

Image

Fixed

  • The mbsc-image directive generates an input element by default.

Languages

Fixed

  • German toText translation.
  • Dutch clearText translation.

Listview

Fixed

  • Added hierarchical support for listview in angular.

Scrollview

Fixed

  • With filtering enabled, setVal was not working correctly for 0 or empty string value.
  • onItemTap event was not fired.

Select

New

  • Automatically focus filter input on show.

Fixed

  • With filtering enabled, setVal was not working correctly for 0 or empty string value.
  • Dynamic data update did not work when used inside Mobiscroll Form (React only).

Treelist

Fixed

  • The mbsc-treelist directive generates an input element by default.

What's New

All Components

New

  • Placeholder setting is supported for all Angular components, which can be used to pass a placeholder text to the generated inputs.
  • Cards component was added that can be used to render variable content, pictures, video, text in a consistent way.

Calendar

New

  • Support for colored days has been introduced. The colors setting accepts specific dates, ranges and recurring days.

Fixed

  • calendarHeight setting was not working, the issue has been resolved.
  • Month change was not working correctly for multiple month views in liquid layout (top, bottom, inline).
  • Positioning was fixed for calendars with dynamic tabs.
  • Changing weeks with arrow controls was not working correctly for week view.

Changed

  • The events setting has been renamed to labels. Use labels to display any type of text in the calendar day cell.

Cards

New

  • New component was added to provide an easy way to render card layouts and collections with variable content. Use cards to display content composed of different elements, sizes and actions. Use it along along with the other components, like the List view or Scroll view to provide a rich user experience.

Color

Changed

  • The enhance setting defaults to true in the Angular component. Colors will be shown in the input instead of their hexadecimal values.

Eventcalendar

New

  • Support for marked days was added. Use the marked setting to display colored dots in day cells to provide additional information to the user without the need to select the day.
  • Support for colored days has been introduced. The colors setting accepts specific dates, ranges and recurring days.

Fixed

  • Normalizing event order. Data is returned in the same order for event bubbles, inside the onDayChange event argument, and for the getEvents method. Full day events are always at the top, which are followed by daily events in a chronological order.

Changed

  • The events setting has been renamed to labels. Use labels to display any type of text in the calendar day cell.
  • Days containing events will have a single dot in the day cell. For showing multiple dots, use the marked data

Forms

New

  • Media styling was added. Use the new CSS classes to render inline, full-width, thumbnail and avatar images along with videos.

Navigation

New

  • Two new events were added for the Hamburger menu. onMenuShow and onMenuHide events will be triggered on interaction.

Fixed

  • Tab styling is correctly applied when Material theme is used, regardless of display mode.
  • Ionic click event was not fired on nav-item click.

Range

New

  • Support for colored days has been introduced. The colors setting accepts specific dates, ranges and recurring days.

Fixed

  • Selected days styling fixed for multiple month view.

Changed

  • The events setting has been renamed to labels. Use labels to display any type of text in the calendar day cell.

Select

Fixed

  • Be able to override the formatValue function for custom formatting. Use it to customize the text that is shown in the underlying input.
  • Dropdown styling is applied correctly in case of the Angular component

Timer

Fixed

  • The initial value of the timer was not displayed in countdown mode.

What's New

Calendar

New

  • Week view support has been added with the option of displaying and navigating the calendar on a weekly, bi-weekly … basis. Specify the number with the weeks option.

Changed

  • The calendar view has been completely overhauled. A major refactoring has been performed including code and markup simplification.

Core

New

  • Angular components for all Mobiscroll controls were added. Use the components instead of directives to generate Mobiscroll form elements like inputs, selects.
  • Scrollview component was added for creating scrollable layouts.
  • Navigation component was providing quick solutions for three navigation patterns: tabs, bottom navigation and hamburger menu or drawer navigation.
  • New color schemes were added for providing means to create variated UI designs. Primary, secondary, success, danger, warning, info, light and dark are the new schemes that can be used with notes and buttons at the moment.

Removed

  • Breaking Change Knockout integration is not maintained anymore. Please use the plain Javascript version instead.
  • Breaking Change ASP.NET MVC server controls are not maintained anymore. Please use a different version of Mobiscroll.
  • Breaking Change Buttons will be rendered in the order they are specified in the buttons setting. This change is applicable to all components where custom buttons are being used.

Eventcalendar

New

  • A new option has been introduced to disable event listings in a pop-up bubble. Turn it off with the eventBubble bool setting.
  • Week view has been added for compact event calendar views. Specify the number with the weeks option.

Changed

  • The calendar view has been completely overhauled. A major refactoring has been performed including code and markup simplification.

Forms

New

  • Note styling was added for providing inline feedback to users, supporting multiple color schemes.
  • Buttons received a makeover with support for outline buttons and they now support multiple color schemes.

Fixed

  • Progress and slider label positioning was fixed for the iOS theme.

Changed

  • Breaking Change Slider and Progress modules are now included in the Form module. Make sure to include mobiscroll-form instead of separately using mobiscroll-slider and mobiscroll-progress as before.

Menustrip

Removed

  • Breaking Change Menustip is not maintained as a stand-alone component. Functionality has been broken out into three focused components. Use the Scrollview, Navigation and Optionlist instead.

Navigation

New

  • The component has functionality that has been broken out of the Menustrip. It provides quick and easy solutions to three common navigation patterns: tabs, bottom navigation and the hamburger menu (use the last one with responsibility).

Optionlist

New

  • The component has been created with the goal of making single and multiple value selection easy in a horizontally scrollable list of icons, labels and their combination. The functionality was available in the Menustrip, which was migrated and the API was simplified.

Range

New

  • Marked day support has been added. Little colored dots can show up in the Range picker that was only possible in the Calendar and Event Calendar components.
  • Week view has been added for supporting compact range picker instances. Specify the number with the weeks option.

Changed

  • The calendar view has been completely overhauled. A major refactoring has been performed including code and markup simplification.

Rating

Removed

  • Breaking ChangeRating and grading scroller component is not maintained anymore. Use the Image or Scroller components instead.

Scrollview

New

  • New component was added to help in creating scrollable layouts. Horizontal scrolling is supported at the moment.

Themes

Removed

  • Breaking Change jQuery Mobile theme is not maintained anymore. Mobiscroll for jQuery is fully compatible with jQuery Mobile, use any other available theme.
  • Breaking Change Android Holo theme is not maintained anymore. Mobiscroll is supporting Android 4.1+, use any other theme available.

Changed

  • Breaking Change wp theme has been renamed to windows. Going forward use windows for the light theme and windows-dark for the dark version.
  • iOS theme has been improved in several places, including hover effects.

What's New

Calendar

Fixed

  • In bubble display mode arrow was positioned incorrectly with Bootstrap theme in multiple month view.

Core

New

  • Support for iPhone X safe regions.

Forms

Fixed

  • Prompt dialog promise resolves with null instead of empty string, if Cancel pressed.
  • Validation styling fixes for the iOS theme.

Menustrip

Fixed

  • Fixed navigate method in Angular to work with id attributes of the mbsc-menustrip-items.
  • In agnular the menustrip will automatically update the UI without the need to call a manual refresh when items are loaded dynamically.

Numpad

Fixed

  • Suffix rendering issue on iOS 11.

Range

Fixed

  • Start/end labels were displayed incorrectly in RTL mode with the iOS theme.

Rating

Fixed

  • Last star was cut off on iOS theme 3D wheels.

Select

Fixed

  • getVal only returned group if a separate group wheel was present, did not work in case of group headers.
  • onFilter event was not firing with custom filter when the last character was cleared form the filter input.

What's New

Forms

Fixed

  • option method call broke the Switch functionality.

Integrations

Fixed

  • React Range component startInput and endInput propTypes corrected.
  • Completely hide select element if used with angular for improved compatibility with Ionic 1.
  • Disable tap handling when used with Ionic 1 for improved compatibility. ( #414 )

Themes

Fixed

  • Half-pixel borders not rendering correctly on Chrome on high resolution screens.

Widget

Fixed

  • Text was aligned left, even in RTL mode.

What's New

Calendar

Fixed

  • Date scroller was not hidden in the calendar with bootstrap theme.
  • Clear button threw error if pressed after month navigation. ( #432 )

Core

Fixed

  • Scroller wheels were rendered incorrectly on Samsung Galaxy S5 Mini, WebView only.

Forms

Fixed

  • Switch was not updating if changed using slide gesture, not tap (bug introduced in v3.2.3).

Integrations

New

  • Mobiscroll for Angular final version
  • Added types to all Angular directive and component options

Languages

New

  • Arabic, Bulgarian, Croatian, Finnish, Greek, Hindi, Korean, Serbian and Vietnamese translations.

Fixed

  • backText was not correct in Chinese.

Listview

Fixed

  • add method supports adding list dividers as well. ( #404 )
  • navigate method did not work with id when used with Angular. ( #433 )

Range

Fixed

  • defaultValue setting did not work with integrations (Angular, AngularJS, React, Knockout).

Select

Fixed

  • Value was not set correctly if initialized on a native empty html select element, and data was passed through settings.
  • Initial value was not working correctly with remote data.

What's New

Core

Fixed

  • Correctly disable hover styling on touchcreens inside a popup.

Forms

Fixed

  • Disable focus trap and focus on show for toasts and snackbars.
  • setVal method worked incorrectly for range slider in some cases.

Integrations

Fixed

  • Initial value for angular slider directive is set correctly.
  • Angular stepper wrapper element changed to div to prevent extra clicks on input.
  • iOS inset border stling for form components, when used with Angular.
  • React PropTypes are now loaded as external dependency to suppress deprecation warning.

Range

Fixed

  • Material theme styling issue of the selected range in full screen mode.
  • In time-only mode, if autoCorrect is off, set end time to next day, if it's before start.

What's New

Calendar

Fixed

  • First date was not selectable, if the specified minDate time was not 00:00 and time selection was not enabled on calendar.
  • Fast tapping on month change arrows, than selecting a month from the month selector before the animation finished, messed up the month sliding. ( #427 )

Core

Fixed

  • Enable showOnFocus by default on iOS and Android for better compatibility with Ionic's ion-input.
  • Server side rendering compatibility. ( #430 )

Integrations

Fixed

  • Value won't disappear from ion-input after set.
  • Ionic input focus and hasvalue styling applied properly on material theme
  • Angular Dirty and Touched statuses are updated properly when using FormControls

Numpad

Fixed

  • Focusing on backspace button with Tab key made the backspace button stuck - numbers entered afterwards were deleted immediatly.

Select

Fixed

  • Element won't disappear when the input setting provided is the same as the initialized

What's New

Integrations

New

  • Introducing the Angular 2/4 beta integration.

Fixed

  • angularjs mobiscroll-listview directive was not working inside ng-repeat.

What's New

Color

Fixed

  • getVal method returned an array in single select mode after using the setVal mehtod.

Core

Fixed

  • Page scroll was sometimes locked in bubble mode, even if the popup was not entirely in the viewport.

Forms

New

  • Alert, confirm and prompt popups, snackbar and toast notifications.

Fixed

  • Error styling was missing with the iOS theme.

Integrations

New

  • Automatically destroy instances in Angular on scope destroy.

Fixed

  • MVC controls can be initialized asynchronously.
  • MVC controls date settings are generated without formatting string.
  • Added missing instance binding to Knockout Listview.

Menustrip

New

  • threshold setting to define the minimum required movement in pixels to start scrolling.
  • tapHighlight setting to turn off/on item highlight on tap.

Fixed

  • Bottom menustrip style fix for Mobiscroll Dark theme.

Numpad

Fixed

  • Decimal numpad's getVal method returned string instead of number, if thousands separator was used, or decimal separator was other than '.'.

Select

Fixed

  • refresh method only worked if the new data was passed as a parameter. ( #424 )

Timespan

Fixed

  • Steps were not working correctly. ( #423 )

What's New

Calendar

Fixed

  • dateWheels setting is taken into account to define the order of year and month in the calendar header.

Color

Fixed

  • Improved jQuery Mobile compatibility on input styling.
  • Phantom selection remains after refine.
  • In multiple selection mode selected colors remained selected after cancel.

Core

New

  • Introducing ES6 modules.
  • If destroy method was called on an open popup, the DOM was not cleared up properly.

Fixed

  • Fallback to 2D scroll with iOS theme in IE10 and IE11.

Forms

New

  • Hover styling and proper mouse cursor styling for segmented and stepper controls for a better desktop experience.
  • Block (mbsc-btn-group-block) and justified (mbsc-btn-group-justified) button groups.

Fixed

  • Display pointer cursor on desktop for the toggle password icon.
  • Description text color, switch color contrast improvements ( #417 )

Integrations

New

  • Added missing instance binding to Knockout forms.

Fixed

  • Added setting to React Listview for data keys.

Listview

Fixed

  • Remove scroll event listener from window on destroy only if it was attached.
  • navigate method failed with error for items added dynamically on top level.
  • Don't consider list item visible, if it's partially out of view, when using the navigate method.

Menustrip

New

  • Simplify generated markup by using flexbox layout.
  • Hover styling for a better desktop experience.

Fixed

  • Navigation fixes in RTL mode.

Page

New

  • A component for basic page styling (background, typography, spacing for top/bottom menustrips).

Range

Fixed

  • Keep already selected time information for start and end dates.
  • Invalid times were set for the range, even if the wheels were scrolled to valid values.

Scroller

Fixed

  • selected argument of the onItemTap event was always false.

Select

New

  • data option now accepts an object where remote data source settings can be defined.
  • New filter option. If true a filter input will be shown above the wheels. Typing in the input will filter the wheel values.

Fixed

  • Inline multiple select did not always update the select value correctly on selection.

Timer

Fixed

  • Button icons were not showing for the Windows Phone theme.

Widget

Fixed

  • cancel button displayed the closeText instead of cancelText.
  • Radio button rendering glitch if the positioning of the widget contained fractional pixel values.
  • Re-position correctly after resize or orientation change if widget contains content with responsive width styling.

What's New

Color

New

  • onItemTap event which is triggered when a color is tapped/clicked. ( #415 )
  • onPreviewItemTap event which is triggered when a color preview is tapped/clicked.

Fixed

  • onSet method was not triggered in inline mode
  • Slider track was not cleared when a color was unselected.
  • Color preview borders in inline mode was not displayed correctly.

Core

Fixed

  • Update the tap method accept DOM element or selector as well.
  • Animation performance issues with Material theme in older versions of Chrome.

Datetime

Fixed

  • Correct time display for RTL languages.

Eventcalendar

Fixed

  • Destroy event list scroller instance to prevent memory leaks.
  • The direction parameter of the remove method was not working.
  • Remove click event listener on destroy to prevent memory leaks.

Forms

Fixed

  • Change event fired twice on Android 4.x devices. ( #376 )

Integrations

New

  • Added data binding for knockout select component.
  • Measurement directive was missing from angular integration.
  • Measurement binding was missing from knockout integration.

Fixed

  • Scroller wheels class updated to 3.x structure in ASP.NET MVC.
  • Multiple image components in angular, that are in the same scope won't reinitialize each other.
  • Image component fixed to reload the items when ngRepeat removes items from DOM.
  • React inline select animation fixed.

Measurements

Fixed

  • Correct numeric display for RTL languages.

Menustrip

Fixed

  • Remove Material ripple animation div elements on destroy/re-init/refresh.

Number

Fixed

  • Correct numeric display for RTL languages.

Numpad

Fixed

  • allowLeadingZero setting did not work correctly if custom button had multiple digit values, e.g. with a value of '30' 3 was entered, but 0 was not.
  • Correct numeric display for RTL languages.

Select

Fixed

  • Remove change event handler on destroy to prevent memory leaks.
  • Remove dummy input on destroy.
  • Add strict boolean check when checking disabled values, otherwise if a value is equal to a built in prototype methods or properties, like 'constructor', it will be considered invalid.

Widget

Fixed

  • If buttons not specified from settings, default to ['ok'] instead of ['set', 'cancel'].

What's New

Calendar

New

  • Improved styling for multiple month view.
  • Mouse hover and cursor effects for desktop.

Fixed

  • After orientation change wrong month was displayed, if min or max month was in view.
  • Better disabled day styling.

Color

New

  • Brand new colorpicker component.

Core

Fixed

  • Improved mousewheel / touchpad support for desktop. ( #360 )

Datetime

New

  • No default values for min and max.

Forms

New

  • Increase label width for iOS theme.
  • rows attribute on textarea is used to determine the max displayed rows.

Fixed

  • Border radius fix for Material theme stepper ( #405 )
  • Cannot moved the slider handles, when the handles was pulled to the max value.

Languages

Fixed

  • backText and undoText was not correct in some languages.
  • Updated am/pm texts.

Listview

Fixed

  • undo function call arguments changed to be consistent with the action function.

Numpad

New

  • Holding tap on delete button will continuously delete the entries ( #324 )
  • Negative value support for decimal preset ( #309 )

Fixed

  • allowLeadingZero setting did not affect custom buttons.

Range

New

  • Mouse hover effects for desktop.

Fixed

  • RTL styling fix for iOS and Material themes.

Widget

Fixed

  • Content with background overlapped border radius (iOS theme).

What's New

Core

Fixed

  • Animation performance issues with iOS and Material themes in center mode.

Datetime

Fixed

  • If date was rendered on one wheel, it worked incorrectly in timezones with negative offset.

Forms

Fixed

  • Slider worked incorrectly if page was zoomed in and/or horizontally scrolled.
  • Slider option method was not working correctly.
  • Change direction of progress, slider and switch in RTL mode ( #393 )

Integrations

Fixed

  • React select updates the value when the options are updated.
  • React widget won't hide when it has controlled input inside it.
  • React measurement undefined mixin warning fixed.
  • React slider input warnings fixed.

Listview

Fixed

  • Dynamically added group headers did not work as fixed headers. ( #402 )

Menustrip

Fixed

  • Snap worked incorrectly if menustrip was not visible during initialization, even after calling refresh ( #395 )

Numpad

Fixed

  • When the keys were tapped fast, not every tap was recorded.

Range

Fixed

  • With empty toText and fromText the range buttons were not rendered correctly with the iOS theme.

Select

New

  • Center row highlight is not shown when group options and multiple select is enabled.

Fixed

  • Don't validate on component initialization, if initial select value is invalid.

Widget

Fixed

  • Form fields were not working inside widget in inline mode.
  • Positioning error if widget contained other modal Mobiscroll components.

What's New

Calendar

Fixed

  • Incorrect rendering if week numbers displayed.
  • In multiple selection mode error was thrown if defaultValue specified and the input field had an initial value.
  • If option method was called on inline calendar, scrollview instances were not properly destroyed.
  • Trigger onSet event in inline mode, when day selected.

Core

New

  • Improved popup positioning using fixed position and forcing bottom toolbar to show on iPhone.

Fixed

  • In RTL mode iOS button order was the same as in LTR.

Datetime

New

  • Be able to display date and time on one wheel.

Forms

New

  • option method was not working correctly.
  • Styling for form groups: mbsc-form-group, mbsc-form-group-title and mbsc-form-group-inset classes.

Fixed

  • Labels are fully left aligned, if icon is present (Material theme).
  • RTL mode rendering issues.

Integrations

New

  • React Form Label component with validation property.

Fixed

  • React rating style option naming collision fixed.
  • React Listview component properly updates items.
  • React Select component accepts select element as child.
  • React Stepper component won't multiply elements on dynamic settings update.

Listview

Fixed

  • option method was not working correctly.

Menustrip

Fixed

  • option method was not working correctly.
  • Height was not rendered correctly after reinitializing the component.
  • If swipe was allowed to one direction only, but a stage was defined on the other direction as well, on quick swipe the stage was activated.

Numpad

Fixed

  • 'undefined' appeared on the numpad display when the leftKey or rightKey did not have a value field defined.

Rating

Fixed

  • Grading style fixes if box-sizing is set to border-box for all elements.

Themes

New

  • 3D scroll effect for scroller components with iOS theme.
  • iOS Dark theme.

What's New

Core

New

  • Built in support for UMD (Universal Module Definition) loading. ( #323 )

Fixed

  • Incorrect dimension calculations and positioning when pop animation is used with jQuery 3.x.

Integrations

Fixed

  • React case sensitive props changed. ( #386 )
  • React undefined variable when using module loaders.

What's New

Core

New

  • Pop animation speed up.
  • Set pop animation as default for center display mode.

Fixed

  • Forget automatic settings when using the option method.
  • Trigger onSet event in inline mode as well.

Integrations

New

  • React integration added.

Numpad

Fixed

  • Trigger change event on input when value changed in inline mode. ( #384 )

Scroller

Fixed

  • Wrong number of wheels displayed if wheels were changed dynamically with the option method.

Select

Fixed

  • Group wheel styling fix for the iOS theme.

What's New

Calendar

Fixed

  • Limiting multiple selection was not working. ( #369 )
  • Time and date wheels rendering error in IE11 rtl mode.

Datetime

Fixed

  • 24H time cannot be set with timeFormat setting only. ( #381 )
  • Styling fixes for the Windows Phone Light theme.

Languages

New

  • Hebrew translation (thanks to Amir Barzilay).

Measurements

Fixed

  • step setting only worked on the fraction wheel.
  • Unit names not showing correctly after setting options runtime. ( #377 )

Menustrip

Fixed

  • Tap highlight rendering issue, when a small itemWidth was defined.

Number

Fixed

  • step setting only worked on the fraction wheel.

Range

Fixed

  • Set button remained disabled, even after correction. ( #380 )
  • End time could not be set on the time wheels. ( #378 )

Select

Fixed

  • In multiple group select mode, selected style was present on unselected items as well.
  • In multiple group select mode, the multiple select wheel was incorrectly styled with the iOS theme.
  • In multiple selection mode the value of the html select was not correctly set. ( #382 )

What's New

Calendar

Removed

  • swipe option is removed.
  • liveSwipe option is removed.
  • quickNav option is removed.
  • selectedValues option is removed, use the defaultValue option instead.
  • markedDisplay option is removed, only one marked styling is available.
  • markedText option is removed, use the events option to display text instead of marks.

Changed

  • Use setOnDayTap instead of closeOnSelect.
  • Use outerMonthChange instead of divergentDayChange.
  • Use select: 'multiple' instead of multiSelect: true.
  • Use yearChange instead of navigation.
  • Use showOuterDays instead of showDivergentDays.
  • Use calendarScroll instead of swipeDirection.

Color

Removed

  • colorpicker() initialization not working anymore, use color() instead.

Core

New

  • jQuery is no longer a dependency. If jQuery is loaded, it still can be used as a jQuery plugin.

Removed

  • IE<10, Android<4.0 is not supported any more.
  • Deprecated setValue, getValue, setValues, getValues methods were removed.
  • tap option is removed.
  • mode option is removed, use the showScrollArrows option instead.
  • setDefaults utility function is removed, declare global settings directly in the mobiscroll.settings object.

Changed

  • Event arguments are passed as an event object instead of parameter list to the handler function.
  • Use display: 'center' instead of display: 'modal'.
  • Use closeOnOverlayTap instead of closeOnOverlay.
  • Use onBeforeClose instead of onClose.
  • Use onClose instead of onClosed.
  • Use onSet instead of onSelect.

Datetime

Removed

  • $.mobiscroll.formatDate and $.mobiscroll.datetime.formatDate removed, use mobiscroll.util.datetime.formatDate.
  • $.mobiscroll.parseDate and $.mobiscroll.datetime.parseDate removed, use mobiscroll.util.datetime.parseDate.

Changed

  • Use dateWheels instead of dateOrder
  • Use min instead of minDate.
  • Use max instead of maxDate.

Listview

Changed

  • Use striped instead of altRow.

Measurements

Changed

  • Use defaultUnit instead of defUnit.
  • Distance, Force, Mass, Speed and Temperature were merged into one single component, named Measurement.

Range

Removed

  • rangepicker() initialization not working anymore, use range() instead.

Changed

  • rangeTap option is removed, behavior is always on.

Scroller

New

  • Infinite and circular wheel support.

Changed

  • The keys and values properties of the wheel object are removed, pass an array of objects to the data property instead.
  • changeWheel method arguments changed.
  • Use width instead of fixedWidth.
  • Use onItemTap instead of onValueTap.

Select

Changed

  • Use select: 'multiple' instead of multiple: true.

Themes

Removed

  • android, ios-classic, sense-ui, sense, sense-dark themes were removed.
  • Deprecated theme names android-ics, android-ics light, android-holo light, wp light, ios7 were removed.

Changed

  • CSS class names changed, see full list of changes here.

Timer

Changed

  • controls option removed, use the mode option instead.

Timespan

Changed

  • Use min instead of minTime.
  • Use max instead of maxTime.

What's New

Calendar

Fixed

  • Time and date wheels in rtl mode were displayed incorrectly in IE11.

Listview

Fixed

  • The option method was not working correctly.

Menustrip

Fixed

  • The option method was not working correctly.
  • Height was not rendered correctly after reinitializing the component.

Numpad

Fixed

  • Trigger change event on input when value changed in inline mode. ( #384 )
  • The string 'undefined' appeared on the numpad display when the leftKey or rightKey did not have a value field defined.

Select

Fixed

  • Multiple select values not correctly set to the html select element, if scroller was shown programmatically.

What's New

Calendar

New

  • onMonthLoading event which runs every time before a month markup is generated. ( #369 )
  • redraw method which renders markup without reloading the data. ( #369 )
  • Improve month change arrow functionality, especially in inline mode, preventing accidental month change while scrolling page content.

Fixed

  • Allow touch events from month view to propagate.
  • Don't hide event bubble popup on mouse drag, if event list was scrolled.
  • Selected day was not always correctly updated if date was changed on the date scroller.
  • Scroller wheels went crazy if Time tab was before Date tab.
  • Workaround added for daylight saving browser bugs.

Core

Fixed

  • When positioning, only check for focused element, if component is not inline.
  • When showing modal popup, disable form elements on page only on Android < 4.
  • If an element had focus before opening a popup, a flickering occured.
  • Styling was wrong for some controls, if box-sizing: border-box was globally applied (e.g. using with Bootstrap, Kendo, etc.).
  • position method error if called on a control not currently visible.

Forms

Fixed

  • Slider data-live attribute can't be switched off.
  • Slider/Progress changing settings with option method duplicated the markup.
  • Long text inside select overlapped the arrow icon.
  • Correct initial stepper value if out of range.
  • stepLabels accepted only string when it was initialized from setting.

Integrations

Fixed

  • $digest already in progress error when calling the clear method in Angular
  • mobiscroll-instance was not working with forms.

Languages

New

Listview

Fixed

  • Hierarchical navigation scrolled the view to the top of the item, even if the item was already in the view.
  • Auto-scroll during sort was not working correctly.
  • swipe: false was not working inside the itemGroup setting
  • Text and color support for actions. ( #317 )

Measurements

Fixed

  • If defaultValue was set, 0 could not be set using the setVal method.

Number

Fixed

  • If defaultValue was set, 0 could not be set using the setVal method.

Select

Fixed

  • When refreshing, if selected value is not present in the new data, update selected value.

Widget

Fixed

  • Original markup ended up in wrong place if widget was destroyed.

What's New

Calendar

New

  • Be able to limit number of selectable items when multiple select. ( #358 )
  • readonly option which does not allow calendar selection.

Fixed

  • Block navigation to disabled months if month loaded from quick navigation.
  • Separate weekdays header visually in multiple month view.
  • Fix scroll issue inside event list popup with jQuery Mobile theme.

Core

Fixed

  • clear method was working only if control was visible.
  • Tap improvements.

Datetime

Fixed

  • If day wheel not present, default to current date instead of 1st of month.

Integrations

Fixed

  • Non-numeric numpad issues with angular validation.
  • Form controls inherit the form theme and language by default.

Languages

New

Fixed

  • labelsShort translation fixes for de (thanks to Beat Grabe), es, fr, it, no, pt-BR. ( #367 )
  • backText and clearText translation in Spanish.

Listview

Fixed

  • Navigate method was not working correctly in context mode.
  • Pop in, pop out animation fix for newer Chrome versions.

Menustrip

New

  • onGestureStart, onGestureEnd, onMove, onAnimationStart, onAnimationEnd events added.

Numpad

New

  • decimalSeparator, thousandsSeparator settings for decimal preset.

Fixed

  • Use localized month names when formatting dates.

Select

New

  • Be able to limit number of selectable items when multiple select. ( #358 )

Widget

Fixed

  • Keep focused input in view on iOS.

What's New

Calendar

New

  • highlightNow setting for highlighting today's date.
  • changeTab method for changing tabs programmatically. ( #352 )

Fixed

  • setVal was not working with date strings. ( #333 )
  • Trigger onMonthLoaded when tapping on month or year list. ( #336 )
  • Prevent invalid days to overflow to next month. ( #338 )
  • day.control received incorrect value in the onSetDate event. ( #347 )

Core

New

  • onClose event is now renamed to onBeforeClose, onClose is deprecated and will be removed in the future. ( #298 )
  • onClosed event added, which is triggered after the popup is closed and the value is already set. ( #298 )
  • Be able to cancel show in the onBeforeShow event. ( #346 )
  • focusTrap setting added. ( #341 )

Fixed

  • Better support for Microsoft Edge browser.
  • Get rid of "Uncaught TypeError: Cannot read property 'offset' of undefined" errors.
  • Incorrect wheel value displayed if closed during scroll animation and opened right after.
  • Clickpick mode stucked wheel scroll. ( #335 )

Forms

New

  • Progress control.
  • Slider control.
  • Segmented control.
  • Stepper control.
  • Password visibility can be toggled.
  • Typography variations (extra-bold, bold, medium, light, thin, italic).

Fixed

  • Checkbox and switch disabled styling worked only if input element was before the label and description in the DOM.
  • Text fields autocomplete style improvement for Android Holo Light theme.
  • Cursor was not moved on tap inside textarea.

Integrations

Fixed

  • Event calendar event bubble shows up on first click in angular.
  • Angular widget assign value exception when ng-model input inside.

Languages

Fixed

  • Italian translation spelling fixes. ( #342 )
  • In case of multiple selection the order of the text and number might vary by language. ( #332 )

Listview

Fixed

  • Allow click events on html elements (unless the onItemTap event is used).
  • openAction and openStage methods sometimes caused an infinite loop on Android 4.1.

Measurements

Fixed

  • convert: false setting was not working. ( #344 )

Numpad

Fixed

  • Numpad appeared with large width in bubble and modal display on IE9.
  • Multiple leading zeroes are no longer displayed.

Themes

Fixed

  • Bootstrap bubble mode fix. ( #343 )
  • Jquery Mobile theme was not working correctly if scripts were bundled together with Require JS. ( #279 )

What's New

Core

Fixed

  • Prevent text size adjust on iPhone / iPod in landscape mode.
  • Increase popup min-width to accommodate Set / Cancel buttons for some languages.
  • Added pointer-events: auto on popup container to increase compatibility with other frameworks (e.g. when used inside Ionic popup).
  • Custom buttons with predefined handlers mixed up between instances, if instances were initialized with the same settings object. ( #316 )

Forms

Fixed

  • Multi-line text field initial height was not calculated.
  • If theme not supported, revert to Mobiscroll theme.
  • Prevent double input generation when used with Mobiscroll Select.

Integrations

New

  • Added support for angular filters when using listview group headers.

Fixed

  • Angular forms integration can receive init options.
  • Angular listview templating and animation.
  • Inline components inside angular listview render only once.
  • Angular datetime with maxlength attribute sets model without raising validation error. ( #299 )

Languages

New

  • Added Lithuanian translation. ( #322 )
  • Initialization failed on IE. ( #325 )

Fixed

  • Added selectedPluralText for plural form of 'selected' in some languages. ( #315 )
  • Added select, deselect, enable, disable methods. ( #329 )

Range

New

  • Improvements in range tap mode.
  • Set button disabled if start or end not selected.

Fixed

  • Start/end labels were not always cleared when value was cleared.
  • Remove opacity from selected days.

Select

Fixed

  • Multiple select scroll jumps. ( #320 )

Themes

Fixed

  • Display 3 rows on wheel in clickpick / mixed mode when using the Material theme.
  • Readonly wheel disappeared on tap when using the Windows Phone theme.

What's New

Calendar

New

  • Add dw-cal-day-marked css class to marked calendar days. ( #308 )

Fixed

  • Scroll was disabled if full screen calendar was larger than the screen.
  • Event bubble was hiding if scrolled with mouse drag.
  • Week number is always calculated for Monday. ( #302 )

Core

New

  • Allow changing the display mode and animation settings in the onBeforeShow event.
  • Font smoothing enabled.

Fixed

  • Correctly prevent clicks on underlying elements. ( #301 )
  • Focus trap is not needed in inline display mode.

Datetime

Fixed

  • timeWheels for dutch language was incorrect.
  • Change en-GB locale to use 24 hours format.

Forms

New

  • Mobiscroll form elements with integrations including text field, multi-line text field, select, checkbox, switch, radio button, button, and typography styles.

Languages

Fixed

  • Typo fix for French locale, 'Terminé' changed to 'Terminer'. ( #313 )

Listview

Fixed

  • Undo text updated for some languages.
  • Stage shortly blinked on swipe start if itemGroups were used.
  • On sort sorted item jumped 1px when entered in sort mode.
  • Prevent background flickering on hierarchical navigation.
  • Only inital listview icons were shown with angular, if expressions were used. ( #304 )

Menustrip

Fixed

  • Expressions inside items were not re-evaluated if used with angular. ( #310 )

Numpad

Fixed

  • Support for more key codes. ( #305 )

Scroller

New

  • Wheel item opacity is animated (when changing valid/invalid state)

Select

Fixed

  • Selected group was not updated if refresh method was called.

Themes

New

  • Windows Phone theme accent color and active button style updated.
  • Android Material theme added.

Widget

Fixed

  • Instead of cloning the widget content, use the DOM element directly to avoid possible id duplications.
  • Space character was not working inside form inputs.

What's New

Calendar

Fixed

  • Fix for re-positioning resize / orientationchange, if the widget had tabs and calendar was not visible.
  • It wasn't possible to change defaultValue dynamically ( #296 )

Core

New

  • Keep focus inside the widget in modal mode. ( #290 )

Languages

New

  • backText and undoText translations added to language files ( #292 )

Listview

Fixed

  • On iOS item was removed sometimes in the wrong direction, if swipe was quick.
  • Item animation flickered on delete and on delete undo.
  • Reveal on hover was buggy if used with stages.

Numpad

Fixed

  • Default timeFormat changed from 'HH:ii A' to 'hh:ii A'.
  • If not initialized on form field, getVal returned null, if the widget was visible.

Scroller

New

  • Set mouse pointer style to cursor over scroller wheel items.

Fixed

  • If not initialized on form field, getVal returned null, if the widget was visible.

Themes

Fixed

  • Windows Phone theme style fixed in clickpick mode.

What's New

Calendar

New

  • Mousewheel / touchpad support.
  • Add first day of week to language files.

Fixed

  • Calendar selected day styling fixes (for WP8.1 Denim).
  • Trigger onMonthChange event on quick navigation as well.
  • Week numbers were not loaded correctly when the date was changed with quickNav.
  • Clear month change animation queue on hide. ( #280 )

Core

New

  • Improved keyboard support on desktop. ( #272 )
  • showOnFocus setting default value changed to false.

Integrations

New

  • Integration support for Select component's data setting.

Fixed

  • AngularJS - mobiscroll-instance directive now parses the attribute value and uses it's assign property. ( #281 )
  • AngularJS - Properly initialize dynamically generated components inside ngRepeat. ( #282 )
  • AngularJS - Support for list dividers.

Listview

New

  • hover setting to reveal the list item actions on mouse pointer hover.
  • vibrate on sort start and sort end.

Menustrip

New

  • Mousewheel / touchpad support.
  • Selected tab is scrolled to center if variant B styling is applied.

Numpad

Fixed

  • Date defaultValue was not working. ( #273 )
  • Decimal suffix was not working if scale was 0. ( #274 )
  • Support for 'd' literal character in template. ( #275 )
  • Timespan parseValue fix.

Scroller

New

  • Integration plugins for Kendo UI, Ember JS, Backbone and ASP.NET MVC.
  • formatResult is deprecated and will be removed in the future. Use formatValue instead.
  • Support for $('myscroller').mobiscroll().scroller(settings); initizalization form.
  • Improved mousewheel scrolling.
  • Tapping selected item confirms selection. ( #277 )

Fixed

  • Ensure proper display with 1 row and clickpick buttons.

Select

New

  • Wheel items are loaded on demand. ( #255 )
  • In group mode group items can be clustered or continuous. In continuous mode all items available on the option scroll wheel. Group wheel value is updated based on item change. ( #256 )
  • multiple setting to enable multiple selection.

Fixed

  • In multiselect mode top and bottom items were not selectable if scrolling mode was clickpick or mixed.

Themes

New

  • Use theme: 'auto' to use OS theme.
  • Auto theme support for OS theme based custom themes.

Removed

  • accent option for WP theme is no longer supported. Use the Theme Builder instead.

Timespan

New

  • getVal and setVal methods are working with milliseconds.

Treelist

Fixed

  • Value was not correctly formatted if set programmatically and the scroller was not visible.

Widget

New

  • A component to display arbitrary markup inside a mobiscroll frame in modal/bubble/top/bottom/inline positions.

What's New

Calendar

Fixed

  • Calling the option method resulted in an error if the calendar was visible.
  • styling fixes in liquid modal mode for Android and Sense UI themes.

Listview

New

  • Updated arrow styling for Mobiscroll theme.

Fixed

  • List item border styling fixes for Sense Dark theme.
  • Newly added elements were not enhanced.
  • Remove enhancements on destroy.
  • Sort and hierarchical navigation was not working with some versions of App Framework.
  • Enhanced icon was not correctly positioned vertically.
  • Sort with autoscroll was not working correctly if context specified.

Menustrip

Fixed

  • Border color fix for Android theme in bottom mode.

Numpad

Fixed

  • Date parse was incorrect for date preset.

Select

Fixed

  • valueText event parameter had incorrect value (#270).

Temperature

Fixed

  • Check if sign wheel is needed, if units are not used.

What's New

Calendar

Fixed

  • Marked icon was not visible, if had color and text specified.

Datetime

New

  • steps setting instead of stepHour, stepMinute, stepSecond, also allows starting steps from 0. ( #263 )

Integrations

New

  • mobiscroll-data attribute added to angularjs listview integration for filter support. ( #264 )
  • mobiscroll-instance attribute added to angularjs directives for better accessibility. ( #266 )
  • Added menustrip helper to ASP.NET MVC integration.

Fixed

  • Kendo mobiscroll-color and mobiscroll-range bindings were not working. ( #268 )
  • Group select was not working with Angular, if generated with ng-repeat.

Listview

New

  • enhance setting to automatically add styling to list items.
  • rtl setting for right to left support.

Fixed

  • Listview fixed header was not removed on destroy, if context was specified.

Measurements

Fixed

  • Disable whole value, if all fractions are disabled.

Menustrip

Fixed

  • navigate, prev and next methods for programmatic navigation.

Number

Fixed

  • Disable whole value, if all fractions are disabled.

Scroller

Fixed

  • Detach keydown event handler from window on hide.

Themes

Fixed

  • Widget header disappeared if header text was empty.

What's New

Calendar

Fixed

  • Initially selected days were not highlighted with multiple selection enabled.

Core

Fixed

  • isVisible method returned the DOM element before the first show.
  • Tap was not working on Android 2.3
  • $.mobiscroll.activeInstance is tracked only for modal widgets (other than inline).

Integrations

Fixed

  • Inline calendar jumping between dates with Angular, Ember, Knockout and Kendo integration. ( #257 )
  • Listview rendering changed using backbone.js and underscore.js. Underscore.js v1.7.0 required.

Menustrip

New

  • refresh method to recalculate dimensions needed for scrolling (#261).
  • Accessibility improvements by adding aria attributes.

Fixed

  • App Framework compatibility fixes.

Numpad

Fixed

  • Decimal preset did not allow entering leading zeroes even if allowLeadingZero setting was true (#259).

Themes

New

  • Mobiscroll Dark theme.

Fixed

  • Inconsistent wheel item highlight on tap with Windows Phone theme.

Timespan

Fixed

  • Don't display 0 values in the input (#260).

What's New

Calendar

Fixed

  • setVal was not working correctly with multiple select if date objects had time (other than 00:00) (#258).

Image

Fixed

  • enhance setting did not work with App Framework.
  • labels setting did not work properly.

Plugins

Fixed

  • AutoTheme plugin: Did not load iOS Classic theme on iOS < 7.

Range

Fixed

  • Stopped working if onClose returned false.
  • defaultValue did not work correctly with empty array.

Themes

Fixed

  • Bubble arrow was dark for Android Holo Light.
  • Bubble arrow was dark for Windows Phone Light.

Treelist

Fixed

  • enhance setting did not work with App Framework.
  • labels setting did not work properly.

What's New

Calendar

New

  • Dynamic font size for liquid / full screen calendars.
  • Elastic scroll for year and month selector.
  • Month and year text is updated in the header when the month change animation starts.
  • swipeDirection setting to enable horizontal or vertical navigation (#251).

Removed

  • Old format for passing invalid values, marked days and events is no longer supported.

Color

New

  • Initialization changed to $('#color').mobiscroll().color(), $('#range').mobiscroll().colorpicker() is deprecated and will be removed in the future.

Core

New

  • API cleanup: setVal and getVal methods added to all components for setting and getting the selected value(s), instead of getValue, setValue, getValues, setValues, getDate, setDate (#236).
  • API cleanup: setArrayVal and getArrayVal methods for getting and setting the 'raw' wheel value array (for scroller components), or the 'raw' number array (for numpad components) (#236).
  • Disable page scroll with mousewheel in desktop browsers, when the popup is visible.
  • Support for predefined button handlers: set, cancel, clear, now, e.g. buttons: [ { text: 'Hide', handler: 'cancel' } ].
  • Support for custom button classes, use btnClass to specifiy the css class for all buttons, or set the cssClass property of the individual button, e.g. buttons: [ { text: 'Set', handler: 'set', cssClass: 'my-btn' } ] (#252).
  • Support for button icons, use the icon property of the individual button, e.g. buttons: [ { text: 'Set', icon: 'checkmark', handler: 'set' } ].
  • Show is called on tap instead of click for faster response.

Fixed

  • Remove animationend event after show, otherwise the popup reappeared after hide in older versions of Chrome.
  • Layout was messed up if a function was passed to the headerText setting, but only if it contained html strings.

Removed

  • Setting false for setText and cancelText in order to hide the Set and Cancel buttons is no longer supported. Use the buttons setting instead.

Datetime

Fixed

  • Fixed: On a year/month picker months with less than 31 days were unselectable if current day was 31st.

Removed

  • showNow setting is no longer supported. Use the buttons setting instead.
  • Old, object based wheel format is no longer supported.

Image

New

  • enhance setting to automatically add styling to the list.

Integrations

New

  • Angular: Support for ng-model directive.
  • Angular: mobiscroll-scroller directive for custom wheels.

Listview

New

  • actionWidth setting for specify the width of the action menu (#233).
  • openActions function which opens the actions of a list item programmatically (#247).
  • openStage function which opens a specified stage of a list item programmatically (#247).
  • Additional formats to specify stages: specify sepparate left and right stages, percentages are autogenerated if not specified.

Range

New

  • Initialization changed to $('#range').mobiscroll().range(), $('#range').mobiscroll().Range() is deprecated and will be removed in the future.
  • swipeDirection setting to enable horizontal or vertical navigation (#251).
  • Updated Mobiscroll theme.

Scroller

Removed

  • Old, object based wheel format is no longer supported.

Select

New

  • data setting for initializing the select component without using a html select, dataText, dataValue, dataGroup settings to define the data object text, value and group property names.

Themes

New

  • android-holo theme pixel sizes changed to em.
  • wp theme pixel sizes changed to em.
  • ios theme renamed to ios-classic.
  • ios7 theme renamed to ios, ios7 is still supported, but deprecated.
  • sense5 theme renamed to sense, sense5 is still supported, but deprecated.

What's New

Calendar

Fixed

  • mousemove and mouseup events were incorrectly detached on swipe end.

Core

Fixed

  • Popup was outlined on Chrome / OSX.

Integrations

Fixed

  • Incorrect null value support.

Listview

Fixed

  • Sort handle was generated for group headers.

Range

Fixed

  • Times were displayed before validation.

What's New

Calendar

Fixed

  • If tab was changed during wheel animation, wheel was visible while animated.
  • Show year suffix in calendar header as well.
  • Javascript error if quickNav setting was set to false.

Core

Fixed

  • Re-focusing on the input field after closing the widget caused problems in iOS8. Re-focusing is disabled until the problem is fixed.
  • Width/height calculations were incorrect during animation with Zepto and App Framework.
  • Positioning was incorrect if website was zoomed on mobile devices (#248).
  • Re-enable form fields when widget animation starts.
  • Don't add tap highlight to invalid wheel items.

Integrations

Fixed

  • Angular: ng-repeat support for Treelist and Image & Text component directives.

List

Fixed

  • Fix for parse and format, if number was passed to the setValue method.
  • Incorrect wheel values if there was no data-val attribute present with Zepto and App Framework.

What's New

Calendar

New

  • Accessibility enhancements (#242): read full date for every day, announce month and year on month navigation, read events and event duration.
  • Month and year selector.

Core

New

  • Allow null value for each component.
  • Show /hide animation improvements: background overlay will fade in and out, faster and smoother animations.

Fixed

  • enable/disable functions (#240).

Datetime

Fixed

  • Time validation fix (#244).

Measurements

New

  • scale setting which controls the decimal precision (#80).

Numpad

New

  • Date picker preset.
  • min and max settings.
  • invalid setting.
  • headerText setting.

Select

New

  • If the select is grouped and group setting is false, group labels will appear as list dividers.
  • If multiple selection is enabled, there is no empty space on the top and bottom of the wheel anymore, and value on the middle is not highlighted.

What's New

Calendar

New

  • In multiselect mode input will be filled with all the selected dates.

Fixed

  • Fixed: Event bubble is repositioned on orientationchange or resize.

Numpad

New

  • Keyboard support.
  • Custom button support.
  • Time picker preset.
  • returnAffix setting for decimal numpad.
  • mask setting for hiding the entered numbers (e.g. PIN code).
  • defaultValue setting for decimal, time and timespan presets.

Timespan

New

  • Allow clickpick and mixed modes.

What's New

Calendar

New

  • onSetDate receives a day object with date and control (where the selection occured: 'calendar', 'date', 'time' or undefined) properties.
  • navigate method to display a specific month on the calendar without setting the date.
  • weekDays option to control the format of week days in the calendar header. Can be full, short or min.

Fixed

  • Time was not set correctly if closeOnSelect was true.
  • In fullscreen mode calendar was not full width.

Listview

New

  • onNavStart and onNavEnd events on hierarchical navigation.
  • onItemTap event receives the event object as parameter.

Fixed

  • Native input and select elements inside list items were not working (#231).
  • Be able to display multiple rows in group headers.
  • 'ng-if' directive can be used inside li's with 'mbsc-' prefix

Numpad

New

  • A new control with numeric keys for filling numeric values.

Range

New

  • minRange and maxRange settings for minimum and maximum selectable range.
  • onSetDate receives a day object with date, control (where the selection occured: calendar, date, time or undefined), and active ('start' or 'end') properties (#222).
  • showStartEnd setting.

Scroller

New

  • focusOnClose setting.

Themes

New

  • Theme classes are prefixed with .mbsc- to make the classes less generic and avoid conflicts with other libraries.
  • iOS7 like checkmark icon for the iOS7 theme multiselection.
  • New wheel styles for jQuery Mobile and Bootstrap themes.

What's New

Integrations

New

  • Ember.js integration

Fixed

  • Angular integration: fixed support for itemGroups setting.
  • Angular integration: initial value was not set correctly for calendar and select components.
  • Angular integration: script errors when timer was running.

Languages

New

  • Russian translation.

Listview

New

  • Tap highlight occurs only if tap action is defined.
  • Improved styling for jQuery Mobile listviews.
  • Support for adding a list item containing sub list.

Measurements

New

  • Support for greater precision.

Number

New

  • Support for greater precision.

Fixed

  • Negative wheel values were incorrectly generated.

Range

Fixed

  • When rangeTap is true, set end date the same as start date on selection start.

Scroller

Fixed

  • Handle resize / orientationchange events per instance.

Select

New

  • Use font for displaying the multiselect checked icon.

What's New

Core

New

  • rtl setting for right to left support.

Datetime

New

  • Support for invalid ranges.

  • valid setting to override invalid dates.

Languages

New

  • Persian translation and support for jalali dates.

List

Fixed

  • Support for data-val="0" (#223).

Listview

New

  • Undo functionality.

  • itemGroups setting for defining different settings (actions, stages, tap) for different list items.

  • altRow setting for alternate line colors.

  • fixedHeader setting for fixed group headers.

Themes

New

  • Changed: android-ics renamed to android-holo.
  • Wp Changed: PNG images are replaced with font icons.

What's New

Core

New

  • preventFocus parameter for the show method.

  • Automatic liquid layout based on screen size.

Integrations

New

  • Support for hiearchical listview in Knockout, Angular and Backbone integration.

Rating

Fixed

  • Vertical alignment was incorrect with Windows Phone theme.

What's New

Calendar

New

  • Added: Support right to left languages with the rtl setting.

  • Added: Support for displaying icons on marked days.

Core

Fixed

  • Prevent virtual keyboard popup on some devices (#216).

  • Page scrolled to bottom in IE and FF on show (#214).

Datetime

New

  • Added: yearSuffix, monthSuffix, daySuffix settings for improved localization (#142).

Fixed

  • Hour, minute and second steps are calculated from minimum time, if specified (#204).

List

New

  • Added: placeholder setting for the generated input field.

Listview

New

  • Added: disabled property for stage or action setting.

  • Added: support for hierarchical lists.

Range

New

  • Added: autoCorrect setting to disable automatic date adjustment if end is earlier than start.

Rating

New

  • Added: Font icons are being used instead of images. Custom icons can be used with the iconFilled and iconEmpty settings.

  • Added: placeholder setting for the generated input field.

Select

New

  • Added: placeholder setting for the generated input field.

Fixed

  • 'Blank' values can be selected (#215).

What's New

Calendar

Fixed

  • Page was not scrollable from the calendar if in inline mode or calendar was larger than the screen.

  • If in inline mode, months swipe was broken if used with page transitions on some devices.

  • Month swipe worked incorrectly with min/max date set.

Core

Fixed

  • Tap on items did not work correctly on Android 2.3

  • Tap on overlay caused bleed-through on Android 2.3

  • Fallback to english locales if a language is not found (#210).

  • Animations are disabled on Android 2.3

Datetime

Fixed

  • parseDate and formatDate utility functions (#209).

  • minDate and maxDate incorrect behavior (#212).

Timer

Fixed

  • Display fixes for ios, ios7 and android-ics themes.

Treelist

Fixed

  • Wheels were not always hidden if tree had different levels (#211).

What's New

Calendar

Fixed

  • Keyboard navigation issues.

Core

New

  • Mobiscroll is focused on popup to make keyboard navigation easier (#150).

  • Using css flexible box model for wheel distribution. Falls back to table layout on devices without flex support (IE8 and IE9).

  • Improved Firefox compatibility.

  • layout setting, can be 'fixed' or 'liquid'.

  • multiline setting to wrap the wheel item content into multiple lines.

Languages

New

  • Romanian, Polish, Russian (UA) translations.

Listview

New

  • animation setting, if set to false no animation will occur. Default is true.

Measurements

Fixed

  • Value is constrained between min and max if set from input or with setValue method.

  • setValue did not work correctly if value was passed as an array (#188).

Range

New

  • Initial range is now today + 7 days.

Select

Fixed

  • getValue method was not working correctly in group mode (#202).

Themes

Fixed

  • Auto theme chooser did not detect iOS7 correctly (#207).

Treelist

Fixed

  • Readonly setting was not working correctly (#203).

What's New

Calendar

New

  • months setting now accepts 'auto' to automatically determine the number of months to display.

Fixed

  • closeOnSelect setting caused event bleedthrough on some iOS versions.

  • closeOnSelect now always disables divergentDayChange setting.

Core

New

  • activeInstance variable.

Fixed

  • If a default theme or language was set using setDefaults, theme and language settings were not loaded.

Listview

New

  • pixel units changed to em.

  • swipe setting accepts multiple values: true, false, 'left', 'right', or a function.

  • onSlideStart event.

  • List dividers are now supported by adding data-role="list-divider" attribute to one ore more list elements.

  • sortable setting can be true, false, or 'group'. If 'group', sort is allowed only inside the group defined by the list dividers.

  • actions setting to display a list of icons under the slided list item. If an icon is tapped, the corresponding action will be executed, otherwise the list item slides back.

Fixed

  • Incorrect this reference in action function if called after confirmation.

  • Icon slide issue when more than one listview was present on the page (#198).

Range

New

  • setActiveDate method.

Themes

Fixed

  • WP theme fix for clickpick buttons active style.

What's New

Calendar

Fixed

  • closeOnSelect setting didn't work correctly.

  • Orientationchange from landscape to portrait didn't work correctly if tabs were present.

Core

Fixed

  • setDefaults method didn't work.

  • null value is set if all options are disabled on a wheel (#196).

Datetime

New

  • amText and pmText localization settings.

Languages

New

  • en-UK locale settings.

Listview

Fixed

  • Icon and text was not visible with iconSlide setting if used with jQuery Mobile listview.

Range

New

  • getValue method can now return temporary start and end dates (if set button is not yet clicked).

Themes

Fixed

  • Incorrect border radius for active buttons in Android ICS theme (#195).

What's New

Core

Fixed

  • btn parameter was undefined in onClose if clear button was pressed (#181).

Integrations

Fixed

  • Angular: Directive for select preset now works for dynamically generated options.

Listview

New

  • handle setting - allows sort if touch started on the handle.

Fixed

  • Slide was not working in Android 4.0.x.

  • Confirm tap incorrectly fired onItemTap as well.

Range

Fixed

  • Range picker incorrect bubble positioning with start and end inputs present (#183).

  • setValue method was not working correctly (#189).

Themes

Fixed

  • z-index issue with jqm theme (#187).

Timespan

Fixed

  • minTime / maxTime worked incorrectly (#184).

What's New

Calendar

New

  • Holding month and year buttons changes month/year until released.

  • months setting to display multiple months.

Fixed

  • Changing tabs sometimes messed up the month slider.

Core

Fixed

  • Higher z-index to show over jQuery Mobile popups.

List

Fixed

  • In live mode values were not always filled in the input.

Listview

New

  • onSrelease-tageChange event.

  • onItemTap event.

  • onSlideEnd event.

  • slideIcon setting - icon and text can be positioned to move with the slided element.

  • quickSwipe setting - on quick swipe (less than 300ms and 50px of movement) the first srelease-tage's action is executed.

  • confirm option for srelease-tage actions.

  • move method.

Fixed

  • adding item didn't work correctly on empty list.

  • don't remove list item inline styles on sort end.

Range

New

  • rangeTap setting for faster range selection.

Select

New

  • showInput setting, if false hide the input

Themes

New

  • Plugin which decides the theme based on User Agent.

What's New

Calendar

New

  • data-day attribute for calendar days to allow styling of weekdays (#173).

Core

Fixed

  • setDefaults method now works.

  • Positioning works now correctly with horizontal scroll.

Listview

New

  • scroll window if element is dragged out of viewport.

  • Callback functions to add and remove methods.

Fixed

  • Placeholder was not placed in some cases.

Measurements

Fixed

  • Incorrect conversion with setValue method.

Rating

Fixed

  • parseValue fixed.

Themes

Fixed

  • WP theme calendar tab padding issues fixed.

What's New

Calendar

Fixed

  • Use deep copy when setting events.

Listview

New

  • sort setting for reordering lists with onSortStart, onSortStop, onSort, onChange, onUpdate events.

  • add and remove animations.

Themes

New

  • Bootstrap integration.

Timer

Fixed

  • Button icons were of with WP theme.

Timespan

Fixed

  • Labels were incorrectly shown with the iOS theme.

What's New

Calendar

New

  • Removed jqm specific behavior.

  • Divergent day change is disabled by default.

Fixed

  • Tab key focus works is enabled on visible month only.

  • Swipe was broken in Android stock browser after opening a native select or virtual keyboard.

Core

New

  • Attach event handlers with latency to improve compatibility with libraries like fastclick.js.

Fixed

  • Remove mobiscroll markup without timeout if no animation.

Listview

New

  • New listview component.

Range

New

  • Remove jqm specific behavior.

Fixed

  • Date and time was incorrectly set on scrollers when invoked from start or end input.

Themes

New

  • Calendar respects the swatch set by the jqmBody setting.

Fixed

  • Background fix for WP, iOS, iOS7 themes in clickpick/mixed mode.

What's New

Calendar

New

  • start/end times for multi day events.

  • when a day clicked from another month changes the month and show the event bubble.

  • 'counter' option to show number of selected items in header (if in multi-select mode).

  • live swipe ('liveSwipe' setting).

  • 'showDivergentDays' setting to show/hide days from previous and next months.

  • 'divergentDayChange' setting to enable/disable month change on divergent day selection.

  • week numbers are not sliding.

Core

New

  • 'context' setting (#143).

  • generic buttons.

  • 'minWidh', 'maxWidth' and 'fixedWidth' settings (#112).

  • default theme was updated.

Fixed

  • In bubble mode positioning sometimes ended up in endless scrolling.

  • If another mobiscroll element was under the overlay, it opened on tap.

  • No more blue highlight on wheel tap in Android 4.x.

  • Context got lost in some cases (#163).

Datetime

New

  • invalid time ranges (#94, #147).

Range

New

  • 'counter' setting to show number of selected items in header.

Select

New

  • 'counter' setting to show number of selected items in header.

Fixed

  • hiding the original select is not good for validation (#161).

Treelist

Fixed

  • animation was not working with setValue method.

What's New

Calendar

New

  • Changed: Improved performance on month change.

  • Changed: Refresh calls are postponed until the end of month change animation.

  • Added: closeOnSelect setting to hide the calendar when a day is selected.

Fixed

  • Fixed: Incorrect width calculation when tabs set to 'auto'.

  • Fixed: Event list was not clipped in Firefox Mobile when scrolled.

Core

New

  • Added: Hide set and cancel buttons if their value is false (#134).

  • Added: closeOnOverlay setting.

  • Added: Live mode. If 'Set' button is not present, the value and input is updated on every change.

Fixed

  • Fixed: Mobiscroll was shown again after close in IE with jQuery < 1.9.

  • Fixed: Destroy hides scroller without animation.

  • Fixed: Destroy is called on the element before init preventing re-initialization bugs.

  • Fixed: .mobiscroll('getInst') correctly returns the instance during initialization.

  • Fixed: Positioning fixes on resize/orientationchange/scroll.

  • Fixed: Was not working correctly with fastclick.js.

  • Fixed: Tap was not working in IE10 with touch events (#118).

  • Fixed: Clicking blank space selects last item (#159).

Languages

New

Range

New

  • Added: Show/hide on focus and tap is automatically bind to start and end inputs (if any).

Rating

Fixed

  • Fixed: If created from select, anchor was not correct for bubble positioning.

Themes

New

  • Added: iOS7 theme.

Timespan

New

  • Added: minTime and maxTime settings.

What's New

Calendar

New

  • Changed: Invalid and marked settings have now a different format. Old format is still working but it is considered deprecated and will be removed in the next major release. See documentation for details.

  • Added: events setting to pass any number of events. Events are shown in a context bubble. See documentation for details.

Fixed

  • Fixed: Calendar header buttons were not disabled on show, only after first month change.

Color

New

  • Added: defaultValue setting to specify default color.

Core

New

  • Changed: Mobiscroll value is automatically updated on input change, this way setValue method is working properly (#79).

  • Added: Utility object exposing some useful variables, currently vendor prefix and 3d support ($.mobiscroll.util.prefix and $.mobiscroll.util.has3d).

  • Added: onDestroy event.

Fixed

  • Fixed: Mixed mode was not working (#141).

Datetime

New

  • Changed: Invalid values have now a different format. Old format is still working but it is considered deprecated and will be removed in the next major release. See documentation for details.

  • Added: defaultValue setting to specify default date.

Fixed

  • Fixed: 'Now' button did not trigger the onChange event (#145).

List

New

  • Added: defaultValue setting.

Measurements

New

  • Added: defaultValue setting.

Range

New

  • Added: This is new component for daterange selection.

Rating

New

  • Added: defaultValue setting.

Themes

New

  • Added: Support for jQuery Mobile 1.4.0-alpha1.

Fixed

  • Fixed: Header was not hidden correctly in android-ics, android, jqm and sense-ui themes.

Timer

Fixed

  • Fixed: On destroy timer interval wasn't stopped.

Timespan

New

  • Added: defaultValue setting.

Fixed

  • Fixed: setValue was not working, if value was out of wheel range.

What's New

Calendar

Fixed

  • Fixed: Fixed swipe animation in Firefox / Android.

Core

Fixed

  • Fixed: Tap was not removed from element on destroy.

  • Fixed: Mouse scroll wheel now works with Zepto and jqMobi.

  • Fixed: Whitespace after buttons in Firefox.

  • Fixed: After hide scroller was shown again in IE.
  • Animation Fixed: Flickers on Firefox.

What's New

Calendar

New

  • Added: Accessibility features - keyboard shortcuts and WAI-ARIA attributes for calendar.

  • Changed: Improved month change animation.

Color

New

  • Added: Accessibility features - keyboard shortcuts and WAI-ARIA attributes.

Core

New

  • Added: Accessibility features - keyboard shortcuts and WAI-ARIA attributes (#48).

  • Added: Reposition scroller if scroll occurs (#106).

  • Added: showOnTap option.

  • Changed: Use on/off for attaching and detaching events instead of bind/unbind/delegate.

Fixed

  • Fixed: Mouse scroll wheel now works with Zepto and jqMobi.

  • Fixed: +/- buttons were shortly hidden during animation.

  • Fixed: Wheel was incorrectly labeled if empty string was passed.

Languages

Fixed

  • Fixed: dateOrder and dateFormat corrected for Hungarian language.

Rating

New

  • Added: Accessibility features - keyboard shortcuts and WAI-ARIA attributes.

Fixed

  • Fixed: Layout was broken in Firefox / Android with stars + text.

Select

New

  • Added: Accessibility features - keyboard shortcuts and WAI-ARIA attributes for multiselect mode.

Fixed

  • Fixed: Group label was incorrect.

Timer

New

  • Added: Accessibility features - keyboard shortcuts and WAI-ARIA attributes.

Fixed

  • Fixed: WP theme top padding removed.

What's New

Calendar

New

  • Changed: Performance improved when calendar is updated when moving the wheels on the scroller.

  • Added: Month and year can be changed sepparately in the header.

  • Added: Month and year order in calendar header is now controlled by the 'dateOrder' setting (#122).

  • Added: Tabs for calendar, date, and time controls. Displaying tabs can be automatical (if there is not enough space for all the controls), always on, or always off.

  • Added: Custom color for marked sign and event background.

  • Added: Different styling for marked days (colored bottom line).

Fixed

  • Fixed: "dayOfWeek: [0]" was not working for marked days.

  • Fixed: Date passed to the onDayChange event was not always correct.

Core

New

  • Changed: Refactored method calls resulting in smaller file size.

  • Changed: New wheel format using arrays instead of objects to maintain the order of items. Old wheel format is still supported, but deprecated. See documentation for details.

  • Changed: Cleaned up css.

  • Changed: position method is now public.

  • Changed: Remove setInterval which was running to get update the actual position of a moving wheel. Position is now dynamically calculated only when needed.

Fixed

  • Fixed: Firefox / IE display bug, wheel groups were shown under each other, even if there was enough space (#104).

  • Fixed: Form fields remained disabled in Firefox if page was reloaded before hiding mobiscroll (#126).

  • Fixed: Call stopPropagation on move event to make it work correctly with iScroll (or similar libraries) (#14).

  • Fixed: settings property is now correctly exposed (object reference is kept).
  • Fixed: Added "-webkit-backface-visibility: hidden;" to some elements to prevent animation glitches in webkit.

Languages

New

Select

Fixed

  • Fixed: In multiselect mode old checkmarks were not removed when setValue method was called (#129).

Temperature

Fixed

  • Fixed: "°K" changed to "K" on unit wheel (#124).

Themes

Fixed

  • Jqmobi Fixed: css function returned NaN for margin in outerWidth function.

What's New

Core

New

  • Changed: Transition is done by directly editing the property instead of the style attribute (#59).

Fixed

  • Fixed: wheel overlay was blinking during animation.

  • Fixed: wheel overlay sometimes did not cover the whole wheel (on Google Chrome and Android stock browser).

  • Fixed: showLabel setting now works for all themes.

What's New

Calendar

New

  • Changed: Month change on swipe is now improved and more fluid.

  • Added: Text can be added to marked days.

  • Added: weekCounter option to display week numbers ('year' or 'month').

  • Added: Liquid layout in inline mode.

  • Added: Fullscreen layout in modal mode.

  • Added: Custom width and height for calendar.

Core

New

  • Added: onPosition event.

Fixed

  • Fixed: Firefox for Android wheel content overflow (#87).

  • Fixed: Remove html parameter from onBeforeShow event (#111).

  • Fixed: Position mobiscroll on orientation change as well (resize is not always fired on iOS).
  • Zepto Fixed: Window width and height calculations (exclude scrollbar).
  • Jqmobi Fixed: Window width and height calculations (exclude scrollbar).

Languages

New

  • Added: zh-cn language pack.

Measurements

Fixed

  • Fixed: setValue method can be called with animation.

What's New

Core

Fixed

  • Fixed: Could not scroll if scroller was bigger than viewport.

What's New

Core

New

  • Added: onAnimStart event.

  • Added: onMarkupInserted event.

Fixed

  • Animation Fixed: In clickpick/mixed mode values were visible above +/- buttons during animation.
  • Fixed: Javascript error on cancel with jqm theme (#99).

What's New

Calendar

New

  • Added: Multiple day selection functionality.

  • Added: Week selection functionality.

  • Added: onMonthChange event.

Fixed

  • Fixed: During month change animation a day was incorrectly highlighted.

  • Fixed: Month change animation was laggy on iOS5.

Core

New

  • Added: onValueTap event.

Fixed

  • Fixed: Input value was not parsed if value was set after mobiscroll init (#88).

  • Fixed: Tap or click lock scroller in mixed mode (#89).

  • Fixed: Click on wheel arrows ddid not animate switch (#90).

Datetime

Fixed

  • Fixed: Month showed 0 - 11 on wheel using dateOrder 'mdyy' (#92).

Measurements

Fixed

  • Fixed: Fraction values are now correctly disabled for negative values as well.

Select

New

  • Added: Multiple selection functionality (#37).

What's New

Core

New

  • Changed: validation moved back to touchend instead of animation end.

  • Changed: setValue method now also accepts string or number, not array only (#79).

  • Added: tap option to fire button actions on tap instead of click. Default is true (#83).

Fixed

  • Fixed: tapping on buttons triggered form element focus underneath on Android.

  • Fixed: moving wheels were not stopped correctly on tap on Android > 4 (stock browser).

  • Fixed: initial value can be set now with setValue without filling the input (#77).

List

Fixed

  • Fixed: Wheel remained locked in some cases (#84).

What's New

Calendar

Fixed

  • Fixed: set option caused stack overflow (#74).

Core

New

  • Changed: Set and cancel events are now fired on tap instead of click (on touchscreen).

Fixed

  • Fixed: theme initialization moved before positioning, as it may affect the width/height of the popup.

Datetime

Fixed

  • Fixed: AM/PM wheel respects timeWheels order as well (#54).

List

Fixed

  • Fixed: Don't regenerate the list on every change, only if needed.

  • Fixed: setValue did not set the value correctly on hierarchical wheels.

Themes

New

  • Added: Windows Phone theme now has an 'accent' option to set the highlight color of the theme. Possible values: 'lime', 'green', 'emerald', 'teal', 'cyan', 'cobalt', 'indigo', 'violet', 'pink', 'magenta', 'crimson', 'red', 'orange', 'amber', 'yellow', 'brown', 'olive', 'steel', 'mauve', 'sienna'.

What's New

Core

New

  • Added: isVisible method (#60)

Fixed

  • Fixed: Multiple event firing (#45)
  • Fixed: jqMobi and Zepto error, if loaded multiple times (#72)

What's New

Core

New

  • Move event is attached only on demand (#71)

Fixed

  • Positioning fixes

  • Validation bugfix

Themes

Fixed

  • Windows Phone theme: font-size fix in clickpick mode

What's New

Core

Fixed

  • Positioning fixes

  • Firefox animation bug fixed by removing border-radius from the wheel

Datetime

Fixed

  • Expose datetime preset settings to the inst.settings property

Themes

New

  • Sense UI theme: border removed when positioned top or bottom

  • Android ICS theme: border removed when positioned top or bottom

What's New

Core

New

  • Changed: Use div-s instead of ul-s and li-s

  • Changed: Don't scroll the wheels if validate function returns false

  • Added: 'btn' parameter to the onClose event, 'set' or 'cancel' is passed depending on which button triggered the close

Fixed

  • Fixed: Also disable button elements when showing modal popup

Measurements

New

  • Added: if step > 1, fraction wheel is not generated

  • Added: fraction wheel is infinite

Rating

Fixed

  • Fixed: parseValue returned incorrect value

  • Fixed: value was incorrectly set if elements were generated from a select element

Themes

New

  • Added: 'jqmBorder' option to the jQueryMobile theme to change the swatch of the border

Fixed

  • Fixed: onCancel event was not fired if scroller was hidden by clicking on the overlay (#58)

What's New

Core

New

  • Added: time parameter to the changeWheel method, which means the animation time to scroll the new wheel to the selected value

Fixed

  • Fixed: missing ":" in core css (#46)

  • Fixed: Don't allow to move another wheel until touchend occurs on the currently scrolled wheel

What's New

Core

New

  • Changed: prevent collisions if core is loaded multiple times

  • Changed: validate and onChange event runs on scrolling animation end providing a more fluid user experience (#36)

  • Changed: user defined event handlers does not override preset event handlers

  • Added: onShow gets an additional valueText parameter

  • Added: onAnimStart event, which is fired at scrolling animation start, and receives the wheel index, animation time, and the mobiscroll instance as parameters

  • Added: shorthand form for presets: $('.selector').mobiscroll().date(). To add a shorthand for your own, just add the following line in your preset code: $.mobiscroll.presetShort('mypresetname')

  • Added: highlight selected entry on tap

Fixed

  • Fixed: don't do tap ahead, if moving wheel was stopped with a tap

  • Fixed: setValue method was not working correctly (#43)

  • Fixed: if close was canceled (onClose returned false), the value was still set

Datetime

Fixed

  • Fixed: closing release-tag for the short day name and short month name span was incorrectly added

List

New

  • Changed: make it work with late validation

Rating

Fixed

  • Fixed: stars were not aligned to middle in Firefox and IE

Select

New

  • Changed: make it work with late validation

Fixed

  • Fixed: onChange, onSelect, onCancel events received the disabled value, if the user scrolled to a disabled option, event though on the UI was not selectable (#40)

Themes

New

  • Changed: prevent collisions if themes are loaded multiple times

What's New

Core

New

  • Animation Added: Internet Explorer 10 support

  • Added: move the wheel to the selected value on tap

  • Added: selected values now have a 'dw-sel' css class

  • Added: support for Windows Phone 8

Fixed

  • Fixed: onClose received null as valueText parameter

  • Fixed: button flickering during animation on Chrome

  • Fixed: options were not correctly updated 'on the fly' (by using the 'option' method on an existing instance) - Issue 112 on Google Code

  • Fixed: wheel could not be stopped on the correct place if another wheel was scrolled before the animation finished

  • Fixed: +/- buttons didn't reappear in mixed mode, if a wheel was changed (e.g. with group select preset)

Datetime

New

  • Added: month and day names are wrapped in <span class="dw-mon"> and <span class="dw-day"> to allow more styling

Fixed

  • Fixed: If input had no value, default date/datetime was the time when the control was initialized, not when it was shown

List

New

  • Added: a new preset which transforms ul/ol html lists into a scroller

Select

Fixed

  • Fixed: setValue did not set correctly the second wheel, if optgroup was not the original

Themes

New

  • Added: Windows Phone theme

What's New

Core

New

  • Changed: changeWheel function can change more than one wheel at once

Fixed

  • Fixed: input change is triggered after the modal scroller is hidden (form controls are re-enabled)

  • Fixed: added a dw- prefix for animation css classes to prevent naming collision with other libraries

  • Fixed: the width calculation in positioning skips the width of hidden wheels

Datetime

Fixed

  • Fixed: Day names on wheels fixed (if long name contained 'D', both short and long names appeared)

Select

New

  • Added: 'rtl' (right to left) option, when set to true the groups wheel appears on the right

Themes

Fixed

  • Fixed: android-ics skin arrows moves the wheel in correct direction

What's New

Core

New

  • Added: new display properties, which controls where the scroller is positioned: 'modal', 'bubble', 'top', 'bottom'

  • Added: 'anchor' property to specify the anchor element for positioning, if 'display' is set to 'bubble'

  • Added: 'animate' property to specify predefined animations in 'modal' and 'bubble' modes, during the show/hide of the scroller: 'fade', 'flip', 'pop', 'swing', 'slidevertical', 'slidehorizontal', 'slidedown', 'slideup'

  • Added: 'scrollLock' setting to disable page scrolling in modal/bubble/docked display modes. Default is 'true'

  • Added: 'changeWheel' public method, which takes the wheelindex as argument, and regenerates that wheel based on the wheel object

  • Changed:'readonly' setting now takes an array too, with the boolean values for each wheel

Fixed

  • Fixed: In 'mixed' mode, if wheel was scrolled and stopped with a tap, +/- buttons remained hidden

Datetime

New

  • Added: 'showNow' and 'nowText' options, which renders an additional 'Now' button (if display is not inline)

Select

New

  • Added: 'group' and 'groupLabel' options to render two wheels based on optgroups

Themes

New

  • Changed: iOS theme is updated

What's New

Core

New

  • Added: Support for language files. Controlled from 'lang' option. Specify language related default settings and language files.

Fixed

  • Fixed: 'clickpick' mode worked the same way as 'mixed' in 2.0.2

  • Fixed: 'setValue' was not working correctly.

  • Fixed: Wheels were misaligned on Firefox with ios theme and datetime preset.

Datetime

Fixed

  • Fixed: Time was incorrectly parsed when missing year, month or day wheel.

  • Fixed: Default year value was not set, if outside of startYear and endYear.

What's New

Core

New

  • Added: animation time is now passed to the validation event (useful, if you want an action to happen only when the wheel stops moving)

  • Added: wheel containers have now numbered classes: 'dwwl0', 'dwwl1', 'dwwl2' etc. to allow different styling for each wheel

Fixed

  • Zepto Fixed: in 'mixed' mode clicking on the +/- buttons caused a short button blink

Datetime

Fixed

  • Fixed: 'shortYearCutoff' option was not working correctly. (With '+10' value if 2 digits years were used, 12 was converted to 1912 instead of 2012)

  • Fixed: if day was not present on the wheels (e.g. credit card expration), the date object defaulted to today's date, which resulted in incorrect value, if current month had more days as the selected month

  • Fixed: day names were incorrect, if initial validation changed the month from an invalid value to the nearest valid one

Select

New

  • Added: 'invalid' option to set certain values unselectable. This option takes precedence over the disabled options in the original html select element.

  • Added: 'label' option to set the label of the wheel. If not present, the label is taken from the original html select element's label, and falls back to the select element's name attribute, if the label doesn't exist

Fixed

  • Fixed: 'setValue' and 'getValue' methods overwrote the core methods and were unusable for other presets or custom scrollers

Themes

Fixed

  • Jquery mobile themeFixed: Button appearance with JQM 1.1.1

What's New

Fixed

  • Fixed: HTML5 min/max attributes propagated to other scrollers

  • Fixed: jQuery Mobile 1.0 compatibility (Issue 95)

  • Fixed: Using values like "1.0", "2.0", etc. on custom wheels caused incorrect behavior because they were converted to numbers and became 1, 2, etc.

  • Fixed: fast scrolling caused value loss, if validation changed another wheel value with animation

  • Fixed: when element was created for 3d testing: document.createElement(mod) - mod was undefined

  • Fixed: setValue and getValue was not working correctly with the select preset

  • Fixed: timeWheels option did not modify the order of the wheels

What's New

Fixed

  • Fixed: setValue / setDate methods did not animate the scroller if time was specified

  • Fixed: In some cases date validation scrolled the day wheel to empty value

  • Fixed: Datetime preset's setDate and getDate methods were using last created instance's resources

  • Fixed: Select options were reordered, if values were numbers

  • Fixed: When using option method to change options on the fly, preset and theme defaults overrode user settings

What's New

New

  • Added: invalid option for the datetime preset to set dates unselectable. There are three properties to specify dates, all can be used separate or combined. dates is be an array of dates to disable exact dates on the scroller. daysOfWeek is an array with values from 0 to 6, daysOfMonth is an array which accepts numbers (e.g. every month's 2nd day) or a string in 'x/y' format (e.g. 12/24 means every year's 24th 12 is disabled). A sample configuration: invalid: { dates: [new Date(2012,5,4), new Date(2012,5,13)], daysOfWeek: [0, 6], daysOfMonth: ['5/1', '12/24', '12/25'] }

  • Added: The select preset automatically disables elements on the scroller if they were disabled in the original html select element

Fixed

  • Fixed: In clickpick mode minus button had plus button behavior

  • Fixed: In inline mode getValue always returned the initial values

  • Fixed: min/max attributes were incorrectly parsed when using HTML5 time input

What's New

New

  • Changed: preset option no longer defaults to 'date',
  • it must be explicitly specified!

  • Changed: wheels option no defaults to empty array ([]) instead of null

  • Changed: valid scroller items now have the class "dw-v" instead of "valid"

  • Changed: in 2.0.0-rc1 days not in month were styled as disabled, like items out of the min/max range. From now on days not in month now have the class "dw-h" which, by default has a hidden style in css.

  • Added: headerText can accept a function, which must return a string

  • Added: Day of week can be displayed on the scrollers. Use 'D' (short names) or 'DD' (long names) in the dateOrder options. Sample dateOrder value: 'mmD ddy' will produce '05', 'Thu 03', '2012' on the day, month and year wheels.

  • Added: separator option used by the datetime preset to specify the separator between date and time parts. Default is ' '.

  • Added: readonly option, if true, the scroller appears, but cannot be scrolled. Useful if you want to display a nice clock.

  • Added: timeWheels option to show, hide, and format the time related wheels on the scroller. Default is 'hhiiA'. For the hour wheel use 'h', 'hh', 'H', 'HH', for minutes wheel 'i' or 'ii', for seconds wheel 's' or 'ss', for am/pm wheel 'A' or 'a'. E.g. for 24 hour time format with seconds and leading zeroes use 'HHiiss'.

  • Added: support for HTML5 date/datetime/datetime-local/month/time input types. If mobiscroll is attached to such an input, the format is forced to follow standards specifications. In the popup header the value is formatted according to the date and timeformat specified by the user.

Fixed

  • Fixed: Inline mode bug with jQuery Mobile, if it was not on the initial page

  • Fixed: Select preset was not working in inline mode

Removed

  • Removed: ampm option is now removed, see the new timeWheels option instead

  • Removed: seconds option is now removed, see the new timeWheels option instead

What's New

New

  • Changed: The visibility of year, month and day wheels is now controlled by dateOrder option, e.g. use 'mmyy' to display month and year wheels only

  • Added: display option, which can be 'inline' or 'modal' (default)

  • Added: headerText option to specify a custom string which appears in the popup header. If the string contains '{value}' substring, it is replaced with the formatted value of the scroller. If headerText is set to false, the header is hidden.

  • Added: onShow event
  • Added: delay option to specify the speed in milliseconds to change values in clickpick mode with tap & hold, default is 300
  • Added: Older, set theme option to 'jqm'

  • Added: 'select' preset to enhance a regular HTML select. The original select is hidden, and a dummy input is visible instead. The value of the select is maintained by the preset

  • Added: minDate and maxDate options to specify a range which can be selected. Works for datetime as well.

Fixed

  • Fixed: Android ICS Light skin fix (small +/- appeared above/under arrows)

  • Fixed: onSelect and onCancel events are now called after the popup is closed and all the form elements on the page are re-enabled, making possible to submit the form in these events.

  • Fixed: In custom events this refers to the original HTML DOM element instead of the settings object

Removed

  • Removed: beforeShow event is now removed

  • Removed: showValue option is now removed, use the headerText option instead

  • Removed: btnClass option is now removed, button style can be changed by adding css rules to the .dwb class

What's New

New

  • Added: showLabel option - show/hide labels on the top of the wheels, default is true
  • Added: showValue option - show/hide formatted value in the header of the popup, default is true

  • Added: Android ICS ('android-ics') and Android ICS Light ('android-ics light') skins

Fixed

  • Fixed: Tap & hold changes the value on a 300ms interval instead of 200ms (for slower devices)

  • Fixed: When using custom wheels, parseValue function defaults to first value on the wheel, if cannot parse the input value to a valid wheel value

What's New

Fixed

  • Fixed: Mouse scroll wheel works now with jQuery 1.7+

  • Fixed: Don't always parse input value on show, only if changed

  • Fixed: Time was incorrectly parsed, if there was no date

What's New

New

  • Added: animation on touchend/mouseup event

  • Added: full CSS3 support for Opera 11 and IE10

Fixed

  • Fixed: First selected value did not work correctly by default for custom scrollers

  • Fixed: Incorerect parsing of am/pm time for 12:xx AM

What's New

New

  • Added: if the onClose handler returns false, close is now prevented.

  • Added: onCancel event handler.
  • From now we are using .prop to set readonly/disabled states. This means thet jQuery >= 1.6 is required.

Fixed

  • Fixed: Destroy didn't set correctly the original readonly state of the input element.

  • Fixed: Input element is not set to readonly if showOnFocus is false

  • Fixed: Disabled state of form inputs was not correctly reset after hiding the scroller.

  • Fixed: Don't show scroller if disabled and show is called programmatically.

What's New

New

  • Added: mode option, with two possible values: 'scroller' and 'clickpick', where 'scroller' is the default behaviour, while 'clickpick' renders + and - buttons for each wheel (Android style).

  • Added: new and updated skins: Android, Sense UI, iOS. Set the theme option to 'android', 'sense-ui' and 'ios'
  • Support for jQuery Mobile 1.0beta1 is now removed (click event was not working). Upgrade to beta2 to use the latest version of MobiScroll.

  • 'Scroller' mode is still not working in Firefox Mobile and IE on WP7

  • When using 'Clickpick' mode, very fast taps causes page zoom on HTC Android.

Fixed

  • Fixed: setDate method incorrectly sets year, when seconds option is false

What's New

New

  • Added: Date format options for date wheels through the dateOrder option

Fixed

  • Fixed: Click bleedtrough and focus holding with JQM beta 1
  • Fixed: Missing hour 0 on timepicker

So what's next?

Follow every Mobiscroll UI release in your feed reader.

Get updates in RSS feed

Duplicate Session

You have signed in on a different machine. To keep everything in sync, you have been signed out of this session.

If you need to invite team members, manage seats and accounts you can do it from the licenses page.

Duplicate Session

We noticed you are logged in on a different machine and have closed your old session.

If you need to invite team members, manage seats and accounts you can do it from the licenses page.