📅 The latest version was released last month.
🌟 Featuring displaying labels by exact time and template for agenda day headers.
👍 This is release number 232 since 2011.
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
andonEventDoubleClick
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
andonEventDoubleClick
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 tofalse
. - 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
andresourceObj
properties to theonEventUpdate
lifecycle event arguments to easily access the source and destination resource objects. - We added the
resourceObj
property to theonEventCreate
,onEventCreated
,onEventDoubleClick
,onEventDragEnd
,onEventDragStart
,onEventHoverIn
,onEventHoverOut
,onEventRightClick
andonEventUpdated
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
andslotObj
properties to theonEventUpdate
lifecycle event arguments to easily access the source and destination resource and slot objects. - We added the
resourceObj
andslotObj
properties to theonEventCreate
,onEventCreated
,onEventDoubleClick
,onEventDragEnd
,onEventDragStart
,onEventHoverIn
,onEventHoverOut
,onEventRightClick
,onEventUpdated
,onResourceCollapse
andonResourceExpand
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 theesm5
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 anExpressionChangedAfterItHasBeenCheckedError
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) andresourceEmpty
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
ormonth
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
andmaxHeight
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
andresource
properties to theonEventUpdate
lifecycle event arguments to easily determine the source and destination resources. - We added the
background
andcssClass
properties to the resource data, making the customization of the resource columns easier. - We added the
bufferBefore
andbufferAfter
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
andrenderBufferAfter
functions (React/jQuery/Javascript),bufferBeforeTemplate
andbufferAfterTemplate
(Angular) andbufferBefore
andbufferAfter
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
andslot
properties to theonEventUpdate
lifecycle event arguments to easily determine the source and destination resources and slots. - We added the
background
andcssClass
properties to the resource data, making the customization of the resource rows easier. - We added the
bufferBefore
andbufferAfter
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
andrenderBufferAfter
functions (React/jQuery/Javascript),bufferBeforeTemplate
andbufferAfterTemplate
(Angular) andbufferBefore
andbufferAfter
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
andonCellRightClick
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 withundefined
, 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 thepackage.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 customagendaTemplate
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 ifBYSETPOS
was also specified.
Datepicker
FIXED
- We added added a publicly available type to the
controls
option, calledMbscDatepickerControl
. - We added the missing
month
property to theMbscDatepickerPageChangeEvent
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 themaxEventStack: '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 toresources
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 theresponsive
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
anddragBetweenSlots
options for fine grain control over the allowed drag & drop interactions. - We added the
overlap
anddragBetweenSlots
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
andrenderQuarterFooter
functions (React/jQuery/Javascript),quarterTemplate
andquarterFooterTemplate
(Angular) andquarter
andquarterFooter
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
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) andagendaEmpty
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 dragI`nTime 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
anddragBetweenResources
options for fine-tuning the allowed drag & drop interactions. - We added the
resize
,dragInTime
anddragBetweenResources
properties to the events to control the allowed drag & drop interactions on individual events. - We added the
eventResize
,eventDragInTime
andeventDragBetweenResources
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
anddragBetweenResources
options for fine-tuning the allowed drag & drop interactions. - We added the
resize
,dragInTime
anddragBetweenResources
properties to the events to control the allowed drag & drop interactions on individual events. - We added the
eventResize
,eventDragInTime
andeventDragBetweenResources
properties to the resources to control allowed drag & drop interactions on a resource basis. - We added the
renderHour
/renderHourFooter
andhourTemplate
/hourFooterTemplate
options for custom time content rendering in the timeline header and footer. - We added the
renderWeek
/renderWeekFooter
andweekTemplate
/weekFooterTemplate
options for custom week content rendering in the timeline header and footer. - We added the
renderMonth
/renderMonthFooter
andmonthTemplate
/monthFooterTemplate
options for custom month content rendering in the timeline header and footer. - We added the
renderYear
/renderYearFooter
andyearTemplate
/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 theupdatedEvent
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
andgetInvalids
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
andgetInvalids
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
andgetInvalids
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
andgetInvalids
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 withnull
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
anddayTemplate
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 theview
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
anddayTemplate
instead ofundefined
.
Timeline
NEW
- We added the
currentTimeIndicator
property to theview
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
andresourceFooterTemplate
options. - We added the
renderDayFooter
anddayFooterTemplate
options for rendering a custom footer below the timeline day cells. - We added the
renderSidebar
andsidebarTemplate
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
andsidebarHeaderTemplate
options. - We added templating support for the empty cell below the sidebar column through the
renderSidebarFooter
andsidebarFooterTemplate
options. - We added the
onResourceExpand
andonResourceCollapse
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
anddayTemplate
instead ofundefined
. - 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
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
orcomponentDidMound
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 tocolors
that can be used to customize the background of cells and time ranges. - We added the
cssClass
property to theinvalid
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 tocolors
that can be used to customize the background of cells and time ranges. - We added the
cssClass
property to theinvalid
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
andonLabelClick
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, therefDate
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 theonEventHoverIn
andonEventHoverOut
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
andpmText
options into account.
Select
FIXED
- We fixed the
selectMultiple
option, which was not working in Javascript/jQuery, when initialized on aselect
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
andpmText
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 andend
date.
Datepicker
FIXED
- We fixed an issue where the selected value was returned in UTC instead of the specified
dataTimezone
, when used with themomentTimezone
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 andend
date.
Scheduler
FIXED
- We fixed an issue where the
getEvents
method did not return events that didn't have andend
date.
Timeline
FIXED
- We fixed the
resource
property of theonCellClick
,onCellDoubleClick
andonCellRightClick
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 andend
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 theclickToCreate
ordragToCreate
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 andbutton
role for calendar days.
Eventcalendar
FIXED
- We improved on the accessibility of the calendar view by adding the
aria-selected
attribute andbutton
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 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
andmbsc-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
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 theonEventDragStart
andonEventDragEnd
events was not set. - We fixed an issue where the
onEventDragStart
andonEventDragEnd
events were incorrectly fired when an event was created with click or double click.
Scheduler
FIXED
- We fixed an issue where the
onEventDragStart
andonEventDragEnd
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 tofalse
, 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
andonEventDragEnd
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 theinvalid
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
andonEventDragEnd
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 theschedule
object under theview
option. - We added the
onEventDragStart
andonEventDragEnd
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
andonEventDragEnd
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
andlabels
properties to theMbscLabelClickEvent
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
anddisplayTimezone
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 supportingmoment-timezone
andluxon
.
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 theonPageLoading
andonPageLoaded
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
ora
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 theinputTyping
option tofalse
.
Eventcalendar
NEW
- We added the
originEvent
property to theonEventCreate
andonEventCreateFailed
lifecycle events when working with recurring events. - The
newEvent
andoldEventOccurrence
properties got added to theonEventUpdate
andonEventUpdateFailed
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 `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
andendDay
properties. Days outside of the thestart-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
andendDay
properties. Days outside of the thestart-end
range will be hidden. - We added support for week numbers in the header. Can be turned on using the
weekNumbers
property of theview
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
andmaxRange
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 theonEventCreated
andonEventUpdated
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 theonEventDelete
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 theonEventDelete
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
andendDay
was not explicitly set. - We changed the minimum length of an event to be the value of
dragTimeStep
during resize, which was hard-coded to 15 minutes. (#494) - We fixed an issue where the recurring exception date was not in the correct timezone when editing/deleting a recurring event.
Timeline
FIXED
- We fixed the
domEvent
property of theonEventDelete
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 changed the minimum length of an event to be the value of
dragTimeStep
during resize, which was hard-coded to 15 minutes. (#494) - We fixed an issue where the recurring exception date was not in the correct timezone when editing/deleting a recurring event.
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 eventdata
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 quick navigation label that was wrong for year selection. (#493)
- 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.
Eventcalendar
NEW
- We added print optimized styling for PDF export and printing.
- We added the
tooltip
property to the eventdata
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
andendDay
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 theview
option. - We added print optimized styling for PDF export and printing.
- We added the
tooltip
property to the eventdata
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
andendDay
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 theview
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 eventdata
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.
- We fixed the resource header template to make the click/tap events run correctly.
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 therenderItem
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
andresourceHeaderTemplate
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
andendDay
was changed dynamically, e.g. changing from week to work week. - We fixed the
firstDay
andlastDay
arguments of theonPageLoading
,onPageLoaded
andonPageChange
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
andendDay
was changed dynamically, e.g. changing from week to work week. - We fixed the
firstDay
andlastDay
arguments of theonPageLoading
,onPageLoaded
andonPageChange
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
andcalendarSize
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
andcalendar.size
under theview
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) andselectSize
(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 thefilterEmptyText
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
andonEventHoverOut
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
andonEventHoverOut
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
andtextColor
properties for thecolors
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 thecollapsed
property determining the collapsed state of the actual group. - We added the
title
andtextColor
properties to thecolors
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 theonEventCreated
andonEventUpdated
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
andmax
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
andmaxTime
options, that limit the time part of the selection in a recurring manner. Times beforeminTime
and times aftermaxTime
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
anddayTemplate
options for custom day cell rendering that can be used to customize the full content of the calendar cells. - We added the
renderDayContent
anddayContentTemplate
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
anddayTemplate
options for custom day cell rendering that can be used to customize the full content of the event calendar cells. - We added the
renderDayContent
anddayContentTemplate
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
anddayTemplate
options for custom day cell rendering that can be used to customize the headers of the scheduler time grid. - We added the
renderDayContent
anddayContentTemplate
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. ThefilterEmptyText
andfilterPlaceholderText
is localized.
Timeline
NEW
- We introduced event listing, that provides a summary for the timeline. Controlled thoguh the
eventList
property that is localted under theview
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
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
anddisplayTimezone
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 supportingmoment-timezone
andluxon
.
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
anddisplayTimezone
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 supportingmoment-timezone
andluxon
.
FIXED
- We fixed the
onCellDoubleClick
event, which only worked withclickToCreate
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
anddisplayTimezone
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 supportingmoment-timezone
andluxon
. - 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 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 thereturnFormat
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
andendDay
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
andmax
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
andshowOnClick
options explicitly set true. - We fixed an issue, that prevented the changing of
showOnFocus
andshowOnClick
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 theonPageChange
,onPageLoading
oronPageLoaded
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 withtimeWheels: '|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
andresourceTemplate
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
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
andyearChange
options were not working if specified inside theresponsive
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 tomax
.
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
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. Withstrict
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 iftrue
.
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. Withstrict
the event cannot intersect with any invalid range at all. - We added an improvement so when resources are not passed at all or
null
orundefined
is passed, theresource
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 iftrue
. - We added the
timeCellStep
andtimeLabelStep
properties to theview
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 theonEventClick
,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 theonEventClick
,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 theonEventClick
,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 thecolors
,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
andonEventRightClick
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 themarked
andcolored
options that was not working if labels were also used.
Eventcalendar
NEW
- We added the
onCellDoubleClick
,onCellRightClick
,onEventDoubleClick
andonEventRightClick
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
andonEventRightClick
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 theview
option was set tofalse
.
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
andrecurringExceptionRule
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
andrecurringExceptionRule
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 theview.schedule
option. - We updated the schedule
view
option with thestartDay
/endDay
properties for controlling the displayed days and with thestartTime
/endTime
properties for controlling the disaplayed hours of the grid. - We added support to specify exceptions for the recurring events with
recurringException
andrecurringExceptionRule
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 toboolean
instead ofstring
;
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 fromboolean
tostring
.
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
andonEventDeleted
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
andonEventDeleted
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
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 ofthis
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 ofthis
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 the0
, buttons above 5 were disabled.
Range
FIXED
- We improved the calendar previous and next button listeners to use
currentTarget
instead ofthis
for Salesforce LWC compatibility.
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 our touchmove listening logic, which resulted in error in certain conditions. (#481)
- 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 thereturnFormat
option and return the values in the specified format. - We added the missing export of the
MbscLocale
type, the type of thelocale
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.
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
andonCellHoverOut
events.
Eventcalendar
NEW
- We added the
action
argument to theonEventCreate
event, to determine if it was click or drag.
FIXED
- We added the missing
onCellHoverIn
andonCellHoverOut
events.
Scheduler
NEW
- We added the
action
argument to theonEventCreate
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
andonPageLoading
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
andgetTempVal
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
andrangeEndHelp
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
andmaxRange
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
andonPageLoading
event were fired twice when changing views, and once with wrong arguments. - We fixed the
firstDay
andlastDay
of theonPageChange
,onPageLoading
andonPageLoaded
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
andoldEvent
arguments of theonEventUpdate
andonEventUpdated
events. - We fixed an issue where the
onPageChange
andonPageLoading
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
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
andthemeVariant
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 themarked
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 themarked
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 thenavigate
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 themarked
option to take a start and an end date instead of just a single date.
Scrollview
NEW
- We added the optional
animTime
parameter to thenavigate
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
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
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 fromdark
tolight
. - 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
andonCellHoverOut
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
andonCellHoverOut
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
andonPageLoaded
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 wastrue
. - 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
andonCellHoverOut
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
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
andeventContentTemplate
options to the already existingrenderEvent
andeventTemplate
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
andheaderTemplate
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
andlabelContentTemplate
options to provide only the label content, if you don't need custom styling on the labels. You can use therenderLabel
andlabelTemplate
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
andeventContentTemplate
options to the already existingrenderEvent
andeventTemplate
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
andheaderTemplate
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
andmaxHeight
settings to improve on the look on large screens. - We added the
color
andvariant
options to the buttons API. The popup buttons can be passed theprimary
,secondary
, etc... colors and theflat
,outline
andstandard
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
andscheduleEventContentTemplate
options to provide only the event content, and don't want to bother with the styling. You can use therenderScheduleEvent
andscheduleEventTemplate
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
andheaderTemplate
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 thesetOptions
function to set the global options for the components. The newsetOptions
function is dynamic, meaning that changing the global options runtime will update all initialized components. - We renamed the
option
method tosetOptions
for all components. Use it to dynamically update the options of a component. - We renamed the
lang
option tolocale
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 asmobiscroll.localeDe
in case of ES5 usage. - We moved the
getJson
function tomobiscroll.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 toanimation
to specify the show / hide animation of the picker. - We renamed the
height
option toitemHeight
for setting the height of the wheel items. - We renamed the
width
option towheelWidth
for setting the exact width of the wheels. - We renamed the
maxWidth
option tomaxWheelWidth
for setting the maximum width of the wheels. - We renamed the
minWidth
option tominWheelWidth
for setting the minimum width of the wheels. - We renamed the
showOnTap
option toshowOnClick
for the sake of simplicity and to make it more obvious. - We've broken up the
steps
option intostepHour
,stepMinute
andstepSecond
. - We updated the format of the
dateFormat
andtimeFormat
options to avoid some common confusions we met. See the API docs for the new formatting tokens. - We renamed the
onSet
event toonChange
and theonShow
event toonOpen
for more clarity. This was part of the lifecycle event cleanup we performed. - We renamed the
show
method toopen
and thehide
method toclose
.
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
andeventTemplate
options for custom event rendering that can be used in the agenda or popover event listing. - We added the
renderAgenda
andagendaTemplate
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 thed
property use therecurring
property to create recurring events. - We slightly changed the structure of the
marked
,label
andcolor
objects. To specify the date, use thedate
property, or thestart
andend
properties for multiple days, and use therecurring
property to specify multiple occurrences. - We changed the format of the
dateFormat
andtimeFormat
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 toonEventClick
, theonDayChange
event toonCellClick
and theonSetDate
event toonSelectedDateChange
. - We renamed the
calendarHeight
option toheight
and changed its scope to the full calendar with header and everything. - We renamed the
calendarWidth
option towidth
. - We moved the
calendarScroll
option into theview
option underview.calendar.scroll
. - We moved the
eventBubble
option into theview
option underview.calendar.popover
. - We moved the
showEventCount
option into theview
option underview.calendar.count
. - We moved the
showOuterDays
option into theview
option underview.calendar.outerDays
. - We moved the
weeks
option into theview
option underview.calendar.size
. - We moved the
weekCounter
option into theview
option underview.calendar.weekNumbers
. - We renamed the
eventList
property of theview
option toagenda
.
Forms
NEW
- We added the
label
option to specify the label of the input. - We added the
startIconSvg
andendIconSvg
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 thestartIcon
andendIcon
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 toanimation
to specify the show / hide animation of the popup. - For the sake of clarity we renamed the
showOnTap
option toshowOnClick
and theonShow
event toonOpen
. - We renamed the
show
method toopen
and thehide
method toclose
.
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
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
andonCellHoverOut
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
andonCellHoverOut
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
andmbsc-range-end
components were used with a custom set button. - We debounced the
onCellHoverIn
andonCellHoverOut
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
ormax
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
andonCellHoverOut
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
andonCellHoverOut
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 acceptstemplate
andfreeform
. The maximum length of the fractional part can be limited by the also newly introducedmaxScale
that defaults to 4.
Range
NEW
- We added the
onCellHoverIn
andonCellHoverOut
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 introducedauto
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, anmbsc-input
- showing the selected value - can also be rendered when components are displayed ininline
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
anderrorMessage
attributes to theswitch
,checkbox
andradio
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
andslider
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
andmax
settings to be rounded accordingly to thescale
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 theonStageChange
event handler type definitions. - The
select
,deselect
,hideLoading
andshowLoading
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 theMbscFormGroup
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.
- French translation for Sunday was incorrect (only in form inputs). (#460)
- 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.
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 theonItemTap
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
andlabelStyle
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
andlabel-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 are rolling out fixed calendar views with scrollable event listing. No more scrolling the whole page and messy workarounds. (#452)
- 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.
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
andhideLoading
. The icon inside the loading content can be specified with theloadingIcon
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 theMbscNumpadOptions
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 of0.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
ormax
was set anddateFormat
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 tofalse
, it completely disables the popover, even formore 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
andparseValue
.
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 onmbsc-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 setgregorian
,jalali
orhijri
. - 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 setgregorian
,jalali
orhijri
.
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 setgregorian
,jalali
orhijri
.
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 setgregorian
,jalali
orhijri
. - 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
andonPreviewItemTap
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
andMbscAccordion
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
andlabelStyle
props was not handled correctly in React.
Navigation
FIXED
- RTL mode scroll to center worked incorrectly on iOS Safari.
- React
NavItem
s 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 theonPageLoading
andonPageLoaded
events on initial load, if < code > min code > was also set and minimum date was inside the initially loaded month.
Eventcalendar
FIXED
-
firstDay
parameter was wrong inside theonPageLoading
andonPageLoaded
events on initial load, ifmin
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 theMbscFormGroup
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 anmbsc-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 thevalidate
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
andMbscFormGroupContent
components were renamed toFormGroup
,FormGroupTitle
andFormGroupContent
. 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 theLink
component and become selected when the path matches theirto
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 onion-input
s 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
andshowOnTap
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
andRangeEnd
components were added for React that can be used inside theRange
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 theMbscSelectOptions
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 tofalse
. - Event listing threw error if ISO 8601 date strings were passed to event start/end dates.
Languages
FIXED
-
eventText
andeventsText
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
- 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
orclick
).
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
andvalid
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
andmarked
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
andmarked
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 theMbscEventcalendarOptions
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
andonSortChange
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
andendInput
settings were not working in Angular if used onmbsc-input
orion-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
andonPageChange
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 withsetVal
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
andswiperight
settings names corrected in angular component.
Navigation
FIXED
- Badges show up and update automatically on angular navigation items. (#443)
-
prev
andnext
methodtoggle
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
andformatValue
in angular and react
Select
FIXED
- Filtering did not work after async data update.
-
getVal
method returnednull
if selected value was0
. -
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 substituteonMonthChange
,onMonthLoading
andonMonthLoaded
, 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. ThedateText
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 for0
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 for0
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 tolabels
. 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 totrue
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 thegetEvents
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 tolabels
. 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
andonMenuHide
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 tolabels
. 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 thebuttons
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 includemobiscroll-form
instead of separately usingmobiscroll-slider
andmobiscroll-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 Change
Rating 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 towindows
. Going forward usewindows
for the light theme andwindows-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
andendInput
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'sion-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
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 theonItemTap
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 thecloseText
instead ofcancelText
. - 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
andundoText
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
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
orrightKey
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
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
- Change direction of progress, slider and switch in RTL mode (#393)
- Slider worked incorrectly if page was zoomed in and/or horizontally scrolled.
- Slider
option
method was not working correctly.
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
andfromText
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.