|
|
相关文章推荐
|
痴情的板凳 · 丰田4月18日发2款新车！SUV比汉兰达大P ...· 4 周前 · |
|
|
酷酷的红金鱼 · 【全球购国际官方店】【保税仓直发】【正品保证 ...· 1 月前 · |
|
|
力能扛鼎的豌豆 · 海安與東台，兩個沿海千億縣的“進”與“退”· 2 月前 · |
|
|
温暖的乒乓球 · 为什么历史上南方政权很难撼动北方政权呢？_手 ...· 3 月前 · |
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.
FIXED
COUNT
option was not working if
BYSETPOS
was also specified.
Datepicker
FIXED
controls
option, called
MbscDatepickerControl
.
month
property to the
MbscDatepickerPageChangeEvent
type.
Eventcalendar
FIXED
Forms
FIXED
Timeline
FIXED
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.
dateFormatFull
locale option, which is used by screen readers to read out full dates. This improves accessibility for localized instances.
FIXED
Agenda
Datepicker
FIXED
Extraneous non-props attributes
warning for the Vue component when locale options were set.
Eventcalendar
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
dateFormatLong
option among other missing localization options.
Popup
Scheduler
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.
minEventWidth
option to specify the minimum event width in case of the Scheduler view. The value will be used when the
maxEventStack: 'auto'
option is enabled.
FIXED
@cell-double-click
event, which was not working in Vue.
Select
renderItem
arguments.
Timeline
fixed
property to
resources
enabling sticky rows that remain fixed at the top of the calendar.
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
@cell-double-click
event, which was not working in Vue.
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.
FIXED
setOptions
method which caused an error in Nuxt when used with Vue server side rendering.
Datepicker
FIXED
touchUi
option was set using the
responsive
option.
Eventcalendar
FIXED
eventOverlap
option which was not working correctly during event drag or resize, by also detecting overlap with itself.
Forms
FIXED
Timeline
FIXED
navigateToEvent
method was not always navigating to the correct resource row, when custom navigation was used in the header.
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.
defaultValue
was set for the range picker in React.
Eventcalendar
FIXED
labels: 'all'
view option, which broke in the previous release.
Timeline
FIXED
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.
FIXED
getVal
method which was returning the default date, even when there was nothing selected yet (jQuery and Javascript versions).
Scheduler
FIXED
Select
FIXED
Timeline
FIXED
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.
FIXED
Datepicker
FIXED
aria-label
attribute, if used without a label.
Eventcalendar
dragInTime
option.
eventOverlap
option for fine grain control over the allowed drag & drop interactions.
Scheduler
dragInTime
option.
eventOverlap
option for fine grain control over the allowed drag & drop interactions.
Select
FIXED
aria-label
attribute, if used without a label.
Timeline
dragInTime
option.
eventOverlap
and
dragBetweenSlots
options for fine grain control over the allowed drag & drop interactions.
overlap
and
dragBetweenSlots
properties to the events to control the allowed drag & drop interactions on individual events.
eventDragBetweenSlots
property to the resources and slots to control allowed drag & drop interactions on a resource and slot basis.
renderQuarter
and
renderQuarterFooter
functions (React/jQuery/Javascript),
quarterTemplate
and
quarterFooterTemplate
(Angular) and
quarter
and
quarterFooter
slots (Vue).
virtualScroll
property to the timeline view options to enable or disable the virtual scroll.
FIXED
FIXED
Eventcalendar
FIXED
navigate
method which was throwing an error when trying to navigate to hidden dates on a week view.
onEventDragEnd
event was not firing if only external drag was enabled on the calendar.
Forms
FIXED
Scheduler
FIXED
onEventDragEnd
event was not firing if only external drag was enabled on the calendar.
Select
FIXED
Timeline
FIXED
resolutionVertical
property of the view option was not taken into account in Vue.
onEventDragEnd
event was not firing if only external drag was enabled on the calendar.
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.
FIXED
Agenda
renderAgendaEmpty
function (React/jQuery/Javascript),
agendaEmptyTemplate
(Angular) and
agendaEmpty
slot (Vue).
FIXED
Datepicker
FIXED
false
.
calendarType
,
calendarScroll
,
pages
,
showOuterDays
,
showWeekNumbers
.
Dropcontainer
Dropcontainer
component that can be used to drop events dragged out from an event calendar.
Eventcalendar
dragInTime
option for fine grain control over the allowed drag & drop interactions.
resize
and dragI`nTime properties to the events to control the allowed drag & drop interactions on individual events.
externalDrag
option that enables events to be dragged out from the calendar and dropped onto another calendar or any dropcontainer.
Forms
FIXED
disabled
option of the Angular checkbox component to accept boolean values instead of strings.
Popup
FIXED
false
.
Scheduler
dragInTime
and
dragBetweenResources
options for fine-tuning the allowed drag & drop interactions.
resize
,
dragInTime
and
dragBetweenResources
properties to the events to control the allowed drag & drop interactions on individual events.
eventResize
,
eventDragInTime
and
eventDragBetweenResources
properties to the resources to control allowed drag & drop interactions on a resource basis.
externalDrag
option that enables events to be dragged out from the scheduler and dropped onto another instance or any dropcontainer.
Select
FIXED
filter
option which was not working in Vue.
v-model
value binding for Vue.
Timeline
dragInTime
and
dragBetweenResources
options for fine-tuning the allowed drag & drop interactions.
resize
,
dragInTime
and
dragBetweenResources
properties to the events to control the allowed drag & drop interactions on individual events.
eventResize
,
eventDragInTime
and
eventDragBetweenResources
properties to the resources to control allowed drag & drop interactions on a resource basis.
renderHour
/
renderHourFooter
and
hourTemplate
/
hourFooterTemplate
options for custom time content rendering in the timeline header and footer.
renderWeek
/
renderWeekFooter
and
weekTemplate
/
weekFooterTemplate
options for custom week content rendering in the timeline header and footer.
renderMonth
/
renderMonthFooter
and
monthTemplate
/
monthFooterTemplate
options for custom month content rendering in the timeline header and footer.
renderYear
/
renderYearFooter
and
yearTemplate
/
yearFooterTemplate
options for custom year content rendering in the timeline header and footer.
externalDrag
option that enables events to be dragged out from the timeline and dropped onto another instance or any dropcontainer.
FIXED
updateRecurringEvent
to don't mutate the
updatedEvent
input parameter.
Timeline
FIXED
FIXED
Datepicker
FIXED
dayNamesMin
input option to the Angular component.
Forms
FIXED
Scheduler
FIXED
Select
FIXED
Timeline
FIXED
FIXED
Timeline
FIXED
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.
dataTimezone
option.
FIXED
Eventcalendar
dataTimezone
option.
FIXED
Scheduler
dataTimezone
option.
FIXED
Timeline
dataTimezone
option.
FIXED
FIXED
Timeline
FIXED
FIXED
getEvents
and
getInvalids
methods, which did not handle all-day data correctly.
Datepicker
FIXED
Eventcalendar
FIXED
getEvents
and
getInvalids
methods, which did not handle all-day data correctly.
Forms
FIXED
Scheduler
FIXED
getEvents
and
getInvalids
methods, which did not handle all-day data correctly.
Timeline
FIXED
getEvents
and
getInvalids
methods, which did not handle all-day data correctly.
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.
FIXED
Timeline
resolutionVertical
view option.
FIXED
Agenda
FIXED
Datepicker
FIXED
Popup
FIXED
Print module
FIXED
Scheduler
FIXED
renderScheduleEventContent
option to make it work with jsx content in React.
Timeline
FIXED
renderScheduleEventContent
option to make it work with jsx content in React.
FIXED
Eventcalendar
FIXED
Timeline
FIXED
navigateToEvent
method, which only worked when called for the first time on the displayed view.
FIXED
Eventcalendar
FIXED
onEventUpdateFailed
was triggered on event tap, when the event jumped back after dragged over an invalid range.
Forms
FIXED
Scheduler
FIXED
onEventUpdateFailed
was triggered on event tap, when the event jumped back after dragged over an invalid range.
Timeline
FIXED
onEventUpdateFailed
was triggered on event tap, when the event jumped back after dragged over an invalid range.
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.
FIXED
setVal
method, that was throwing an exception when called with
null
in case of range selection.
Eventcalendar
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
renderDay
and
dayTemplate
did not receive the events for the day, if labels were not displayed on the calendar view.
Forms
FIXED
Scheduler
currentTimeIndicator
property to the
view
option that controls whether the current time indicator of the scheduler is visible or not.
eventCreation
property to the base resource object, which can be used to enable/disable event creation on specific resources.
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
renderDay
and
dayTemplate
instead of
undefined
.
Timeline
currentTimeIndicator
property to the
view
option that controls whether the current time indicator of the timeline is visible or not.
eventCreation
property to the base resource object, which can be used to enable/disable event creation on specific resources.
.mbsc-timeline-row
class. E.g. increasing or decreasing the row height.
.mbsc-timeline-parent
class. E.g. increasing or decreasing the row height specifically for parent resources.
.mbsc-timeline-row-gutter
class. E.g. completely removing the extra space below the events.
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.
renderResourceFooter
and
resourceFooterTemplate
options.
renderDayFooter
and
dayFooterTemplate
options for rendering a custom footer below the timeline day cells.
renderSidebar
and
sidebarTemplate
options for rendering a custom sidebar at the opposite end (to the resource) of the timeline.
renderSidebarHeader
and
sidebarHeaderTemplate
options.
renderSidebarFooter
and
sidebarFooterTemplate
options.
onResourceExpand
and
onResourceCollapse
lifecycle events, triggered when a parent resource is expanded or collapsed.
FIXED
renderDay
and
dayTemplate
instead of
undefined
.
exclusiveEndDates
turned off.
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.
Datepicker
FIXED
minRange
option.
Timeline
FIXED
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.
FIXED
Timeline
FIXED
FIXED
Eventcalendar
FIXED
Forms
FIXED
Scheduler
FIXED
Timeline
FIXED
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.
FIXED
responsive
option to work with React SSR (server side rendering).
Agenda
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
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
useEffect
or
componentDidMound
in React.
Scheduler
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.
cssClass
property to
colors
that can be used to customize the background of cells and time ranges.
cssClass
property to the
invalid
object for passing custom CSS classes on case by case basis for customizing the background and label.
FIXED
dayContentTemplate
in Angular.
Select
FIXED
Timeline
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.
cssClass
property to
colors
that can be used to customize the background of cells and time ranges.
cssClass
property to the
invalid
object for passing custom CSS classes on case by case basis for customizing the background and label.
dayTemplate
options for custom day content rendering in the timeline header.
FIXED
FIXED
showOnFocus
option was enabled.
Eventcalendar
FIXED
Print module
FIXED
Scheduler
FIXED
exclusiveEndDates
input option to the Angular component.
Eventcalendar
FIXED
Forms
FIXED
Popup
FIXED
Scheduler
FIXED
Timeline
FIXED
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.
navigateToEvent
method which can be used to move the view to the specified event.
Datepicker
FIXED
Eventcalendar
navigateToEvent
method which can be used to move the view to the specified event.
FIXED
updateRecurringEvent
util function to don't override the start date of the original recurring event.
Print module
FIXED
Scheduler
navigateToEvent
method which can be used to move the view to the specified event.
FIXED
startDay
was different than the first weekday specified by the locale options.
Select
FIXED
invalid
option to the Angular component.
Timeline
navigateToEvent
method which can be used to move the view to the specified event.
FIXED
FIXED
Calendar integrations
FIXED
Eventcalendar
FIXED
displayTimezone
compared to the browser's local timezone.
onEventClick
and
onLabelClick
events were not fired in Safari with Angular, if the event text was clicked.
Scheduler
FIXED
displayTimezone
compared to the browser's local timezone.
Timeline
FIXED
displayTimezone
compared to the browser's local timezone.
FIXED
updateReccurringEvent
util function to handle the new recurring features.
Datepicker
FIXED
onActiveDateChange
event. The instance parameter was missing from the type definition, which gave an error when using typescript.
minRange
was more than one day.
Eventcalendar
FIXED
MbscCalendarColor
type.
Popup
FIXED
Scheduler
FIXED
view
option.
Select
FIXED
showInput
option to the angular select component.
Timeline
FIXED
FIXED
Datepicker
FIXED
Eventcalendar
FIXED
Scheduler
FIXED
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.
Agenda
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
refDate
option to the Datepicker component. When using the calendar control with multiple weeks or months, the
refDate
sets the starting point, from which the navigation occurs.
FIXED
Eventcalendar
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.
FIXED
domEvent
property which was not correct inside the
onEventHoverIn
and
onEventHoverOut
events happening from the event popover in Angular.
Popup
aria-modal
attribute to the popup component for better semantics in accessibility.
Scheduler
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.
FIXED
Select
FIXED
Timeline
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.
FIXED
FIXED
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
exclusiveEndDates
option was on.
exclusiveEndDates
option turned on.
exclusiveEndDates
option was not taken into account when the invalid and valid options were processed.
Eventcalendar
FIXED
onCellClick
event was wrongly fired, and displayed the event popover, when selecting a year from the header navigation popup.
MbscRecurrenceRule
typescript type.
Forms
FIXED
className
option into account.
Scheduler
FIXED
amText
and
pmText
options into account.
Select
FIXED
selectMultiple
option, which was not working in Javascript/jQuery, when initialized on a
select
element.
Timeline
FIXED
amText
and
pmText
options into account.
FIXED
getEvents
method did not return events that didn't have and
end
date.
Datepicker
FIXED
dataTimezone
, when used with the
momentTimezone
plugin.
Eventcalendar
FIXED
getEvents
method did not return events that didn't have and
end
date.
Scheduler
FIXED
getEvents
method did not return events that didn't have and
end
date.
Timeline
FIXED
resource
property of the
onCellClick
,
onCellDoubleClick
and
onCellRightClick
events in Angular.
getEvents
method did not return events that didn't have and
end
date.
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.
FIXED
scopes
option for the Google calendar integration, which was not taken into account after the migration to the new auth service.
clientId
specified.
Datepicker
FIXED
Eventcalendar
eventDelete
option that can be used to enable or disable event deletion independently of the
clickToCreate
or
dragToCreate
options.
updateRecurringEvent
helper function for editing recurring events. The function returns the updated event and the new event based on the configuration.
FIXED
Timeline
FIXED
FIXED
Calendar integrations
FIXED
Datepicker
FIXED
aria-selected
attribute and
button
role for calendar days.
Eventcalendar
FIXED
aria-selected
attribute and
button
role for calendar days.
Scheduler
FIXED
Segmented
FIXED
Timeline
FIXED
FIXED
mbsc-date
,
mbsc-time
and
mbsc-datetime
directives for the `strictTemplates: true` compiler option.
Forms
FIXED
Navigation
FIXED
Numpad
FIXED
invalid
option for the decimal numpad, which was throwing an error if there was no initial value.
Select
FIXED
FIXED
Datepicker
FIXED
Eventcalendar
FIXED
event
argument of the
onEventDragStart
and
onEventDragEnd
events was not set.
onEventDragStart
and
onEventDragEnd
events were incorrectly fired when an event was created with click or double click.
Scheduler
FIXED
onEventDragStart
and
onEventDragEnd
events were incorrectly fired when an event was created with click or double click.
Select
FIXED
dropdown
option, which was supposed to hide the dropdown arrow icon on the input, when set to
false
, but it was not working.
Timeline
FIXED
onEventDragStart
and
onEventDragEnd
events were incorrectly fired when an event was created with click or double click.
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.
FIXED
Datepicker
valid
option, that can be used instead of the
invalid
option to set valid dates, times, ranges instead of invalidating values.
FIXED
MbscPopupDisplay
option, which was not reachable before. This is necessary if the display is set dynamically.
aria-hidden
attribute on the calendar months that are out of view.
'preset-range'
selection mode.
Eventcalendar
onEventDragStart
and
onEventDragEnd
lifecycle events which are triggered when an event is being dragged. This applies to both on-calendar events and external (to-be-created) events.
FIXED
Scheduler
timezones
property of the
schedule
object under the
view
option.
onEventDragStart
and
onEventDragEnd
lifecycle events which are triggered when an event is being dragged. This applies to both on-calendar events and external (to-be-created) events.
FIXED
Timeline
onEventDragStart
and
onEventDragEnd
lifecycle events which are triggered when an event is being dragged. This applies to both on-calendar events and external (to-be-created) events.
FIXED
FIXED
apiKey
option.
Datepicker
FIXED
Eventcalendar
FIXED
Select
FIXED
Timeline
FIXED
FIXED
reflect-metadata
package was also used in the project.
Agenda
FIXED
selectedDate
was used in controlled mode in React.
Datepicker
FIXED
ionChange
event as well.
Eventcalendar
FIXED
label
and
labels
properties to the
MbscLabelClickEvent
interface.
Forms
FIXED
Scheduler
FIXED
onCellClick
event, which was incorrect on the day of daylight saving start or end.
Timeline
FIXED
onCellClick
event, which was incorrect on the day of daylight saving start or end.
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.
FIXED
'20210214T1000'
as well, not just
'2021-02-14T10:00'
).
Datepicker
dataTimezone
and
displayTimezone
options enable you to store the value in one timezone, and then display it in another. We use external libraries to handle the timezone information, currently supporting
moment-timezone
and
luxon
.
FIXED
Eventcalendar
FIXED
lastDay
argument of the
onPageLoading
and
onPageLoaded
events, which was not correct in case of the year view.
Forms
FIXED
Scheduler
FIXED
Select
FIXED
Timeline
FIXED
FIXED
Eventcalendar
FIXED
Forms
FIXED
span
or
a
elements in jQuery/Javascript.
Scheduler
FIXED
Select
FIXED
Timeline
FIXED
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.
inputTyping
option that can be used to allow typing into the input field in desktop mode even if the date picker is shown. This is on by default and can be turned off by setting the
inputTyping
option to
false
.
Eventcalendar
originEvent
property to the
onEventCreate
and
onEventCreateFailed
lifecycle events when working with recurring events.
newEvent
and
oldEventOccurrence
properties got added to the
onEventUpdate
and
onEventUpdateFailed
lifecycle events that can come in handy when working with recurring events.
mbsc-readonly-event
css class to the fixed events so that custom styling can be applied to these read-only events if necessary.
FIXED
Forms
FIXED
aria-disabled
attribute on disabled buttons.
Scheduler
mbsc-readonly-event
css class to the fixed events so that custom styling can be applied to these read-only events if necessary.
startDay
and
endDay
properties. Days outside of the the
start-end
range will be hidden.
FIXED
Timeline
mbsc-readonly-event
css class to the fixed events so that custom styling can be applied to these read-only events if necessary.
startDay
and
endDay
properties. Days outside of the the
start-end
range will be hidden.
weekNumbers
property of the
view
option.
FIXED
FIXED
Datepicker
FIXED
minRange
and
maxRange
options to take into account the time differences when daylight savings change.
Scheduler
FIXED
Timeline
FIXED
FIXED
Select
FIXED
FIXED
Datepicker
FIXED
Eventcalendar
FIXED
target
was not set correctly inside the
onEventCreated
and
onEventUpdated
events, when custom label rendering was used.
updateEvent
method in jQuery and plain javascript.
Scheduler
FIXED
Timeline
FIXED
FIXED
Eventcalendar
FIXED
getInvalids
method, which only returned the first invalid object from the given range.
Scheduler
FIXED
getInvalids
method, which only returned the first invalid object from the given range.
Timeline
FIXED
getInvalids
method, which only returned the first invalid object from the given range.
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.
FIXED
Eventcalendar
FIXED
domEvent
property of the
onEventDelete
event argument, which was not correctly set.
Forms
FIXED
Scheduler
FIXED
domEvent
property of the
onEventDelete
event argument, which was not correctly set.
startDay
and
endDay
was not explicitly set.
dragTimeStep
during resize, which was hard-coded to 15 minutes. (
#494
)
Timeline
FIXED
domEvent
property of the
onEventDelete
event argument, which was not correctly set.
dragTimeStep
during resize, which was hard-coded to 15 minutes. (
#494
)
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.
tooltip
property to the event
data
that overrides the default event tooltip text.
showEventTooltip
option which can be used to hide the native event tooltip.
refDate
option, ranges can start from the any date, like the first day of the year or dynamically from the current day.
FIXED
Datepicker
FIXED
Eventcalendar
tooltip
property to the event
data
that overrides the default event tooltip text.
showEventTooltip
option which can be used to hide the native event tooltip.
refDate
option, ranges can start from the any date, like the first day of the year or dynamically from the current day.
FIXED
Forms
FIXED
Scheduler
startDay
and
endDay
support for day view, weekdays outside of start and end days will be skipped upon navigation.
size
property to the
view
option.
tooltip
property to the event
data
that overrides the default event tooltip text.
showEventTooltip
option which can be used to hide the native event tooltip.
refDate
option, ranges can start from the any date, like the first day of the year or dynamically from the current day.
FIXED
Select
FIXED
getJson
util function as well, when the Select is downloaded individually from our Download Builder.
Timeline
rowHeight
option by setting it from 'variable' to 'equal'.
startDay
and
endDay
support for day view, weekdays outside of start and end days will be skipped upon navigation.
size
property to the
view
option. Year views are supported through multiples of months.
tooltip
property to the event
data
that overrides the default event tooltip text.
showEventTooltip
option which can be used to hide the native event tooltip.
refDate
option, ranges can start from the any date, like the first day of the year or dynamically from the current day.
FIXED
FIXED
Scheduler
FIXED
Timeline
FIXED
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.
FIXED
Eventcalendar
FIXED
Scheduler
FIXED
extendDefaultEvent
is also used.
Select
itemTemplate
or the
renderItem
options, depending on which framework you use, you can render any component/element inside the wheels of the select.
showGroupWheel
option, the group wheel is rendered containing the labels of the groups to improve navigation in case of long lists.
FIXED
onFilter
event. Returning false will now correctly prevent the built in filtering.
Timeline
renderResourceHeader
and
resourceHeaderTemplate
options.
slots
. This can be used instead of the continuous timeline for custom time slots and work shifts.
FIXED
extendDefaultEvent
is also used.
FIXED
Agenda
FIXED
Datepicker
FIXED
Forms
FIXED
Popup
FIXED
Scheduler
FIXED
startDay
and
endDay
was changed dynamically, e.g. changing from week to work week.
firstDay
and
lastDay
arguments of the
onPageLoading
,
onPageLoaded
and
onPageChange
events to based off of the rendered days rather than the entire week.
Select
FIXED
Timeline
FIXED
startDay
and
endDay
was changed dynamically, e.g. changing from week to work week.
firstDay
and
lastDay
arguments of the
onPageLoading
,
onPageLoaded
and
onPageChange
events to based off of the rendered days rather than the entire week.
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.
calendarType
and
calendarSize
options. Use it to build quarterly views, 6 month views or full year views.
FIXED
Eventcalendar
calendar.type
and
calendar.size
under the
view
option. Use it to build quarterly views, 6 month views or full year views.
FIXED
Forms
FIXED
Popup
FIXED
Scheduler
FIXED
Select
Timeline
FIXED
FIXED
Datepicker
FIXED
Eventcalendar
FIXED
Scheduler
FIXED
Timeline
FIXED
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.
FIXED
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.
Datepicker
firstSelectDay
(from Mon-Sun) and
selectSize
(number of days eg. 3 for three days, 7 for a week or 14 for two weeks).
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.
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
Eventcalendar
Scheduler
FIXED
extendDefaultEvent
option.
navigate
method to always scroll to the given date and time.
Select
FIXED
filterPlaceholderText
and the
filterEmptyText
in angular.
Timeline
FIXED
extendDefaultEvent
option.
navigate
method to always scroll to the given date and time.
FIXED
Datepicker
FIXED
Eventcalendar
FIXED
Scheduler
FIXED
Timeline
FIXED
onEventHoverIn
and
onEventHoverOut
events were not fired.
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.
FIXED
Datepicker
FIXED
Eventcalendar
getEvents
method which will return the event data between a given range.
getInvalids
method which will return the invalid values between a given range.
onEventHoverIn
and
onEventHoverOut
lifecycle events, that enable the creation of custom actions when events are hovered.
Forms
FIXED
Scheduler
title
and
textColor
properties for the
colors
option to customize the title and the title color of the colored ranges.
currentResource
property for the event data object, which can be used to pass the resource object to the custom event template.
getEvents
method which will return the event data between a given range.
getInvalids
method which will return the invalid values between a given range.
Select
FIXED
Timeline
children
property which holds the child resources and the
collapsed
property determining the collapsed state of the actual group.
title
and
textColor
properties to the
colors
option to customize the title and the text color of the colored ranges.
currentResource
property to the event data object passed to the custom event template, which holds the resource where the event is being rendered.
FIXED
target
argument for the
onEventCreated
and
onEventUpdated
events, which was not set properly.
min
and
max
options where the time part was not taken into account.
FIXED
colors
option.
Eventcalendar
FIXED
colors
option.
Forms
FIXED
Timeline
FIXED
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.
minTime
and
maxTime
options, that limit the time part of the selection in a recurring manner. Times before
minTime
and times after
maxTime
can't be selected on the date picker's time and time grid control. This is useful when limiting opening hours for example.
renderDay
and
dayTemplate
options for custom day cell rendering that can be used to customize the full content of the calendar cells.
renderDayContent
and
dayContentTemplate
options to improve on the customizability. These options will be helpful if you only want custom content and don't want to bother with the basic look of the days.
timegrid
control that can be used for time selection as an alternative to the scroller and time list, especially useful for appointment booking.
Eventcalendar
renderDay
and
dayTemplate
options for custom day cell rendering that can be used to customize the full content of the event calendar cells.
renderDayContent
and
dayContentTemplate
options to improve on the customizability. These options will be helpful if you only want custom content and don't want to bother with the basic look of the days.
FIXED
Scheduler
renderDay
and
dayTemplate
options for custom day cell rendering that can be used to customize the headers of the scheduler time grid.
renderDayContent
and
dayContentTemplate
options to improve on the customizability. These options will be helpful if you only want custom content and don't want to bother with the basic look of the days.
FIXED
Select
filter: true
option. It renders a filter input above the values. The
filterEmptyText
and
filterPlaceholderText
is localized.
Timeline
eventList
property that is localted under the
view
configuration settings. This can be used to easily visualize shifts and daily workloads.
FIXED
Timeline
FIXED
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.
exclusiveEndDates
option, ranges that end on 00:00 will count until the previous day. This option is automatically turned on when working with timezones.
dataTimezone
and
displayTimezone
options enable you to parse the event data in one timezone, and then display it in another. We use external libraries to handle the timezone information, currently supporting
moment-timezone
and
luxon
.
Datepicker
FIXED
Eventcalendar
exclusiveEndDates
option, ranges that end on 00:00 will count until the previous day. This option is automatically turned on when working with timezones.
dataTimezone
and
displayTimezone
options enable you to parse the event data in one timezone, and then display it in another. We use external libraries to handle the timezone information, currently supporting
moment-timezone
and
luxon
.
FIXED
onCellDoubleClick
event, which only worked with
clickToCreate
enabeled.
Scheduler
exclusiveEndDates
option, ranges that end on 00:00 will count until the previous day. This option is automatically turned on when working with timezones.
dataTimezone
and
displayTimezone
options enable you to parse the event data in one timezone, and then display it in another. We use external libraries to handle the timezone information, currently supporting
moment-timezone
and
luxon
.
FIXED
dragTimeStep
option, which was not working correctly if was greater than 1 hour.
Select
FIXED
Timeline
FIXED
Scheduler
FIXED
Timeline
FIXED
source
argument of the event and cell click lifecycle events.
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.
dateFormat
to year and year with month.
FIXED
moment
option in angular, that was required by the
returnFormat
to support moment objects.
Eventcalendar
FIXED
Scheduler
FIXED
startDay
and
endDay
was used.
FIXED
Datepicker
FIXED
Eventcalendar
FIXED
onPageLoaded
event in the jQuery and Javascript version.
resource
property set, but no resources were passed to the calendar.
Scheduler
FIXED
Select
FIXED
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.
FIXED
min
and
max
options.
Datepicker
invalid
option now supports times as well.
FIXED
onTempChange
event to not fire incorrectly multiple times in desktop display mode.
showOnFocus
and
showOnClick
options explicitly set true.
showOnFocus
and
showOnClick
options dynamically.
ExpressionChangedAfterItHasBeenChecked
error to be thrown in angular, when the invalid option was changed in any of the
onPageChange
,
onPageLoading
or
onPageLoaded
events.
anchored
display option.
stepMinute
option was not working correctly with
timeWheels: '|H:mm|'
.
','
).
Eventcalendar
FIXED
editable: false
could be still deleted.
Scheduler
renderResource
and
resourceTemplate
options.
FIXED
editable: false
could be still deleted.
timeCellStep
was set to more than 60 minutes
Select
FIXED
Calendar
FIXED
Cards
FIXED
themeVariant
option used on the Card component was unwillingly passed to a div element, which resulted in a warning in React.
Datetime
FIXED
Eventcalendar
FIXED
weekDays
and
yearChange
options were not working if specified inside the
responsive
option.
Forms
FIXED
min
was equal to
max
.
Numpad
FIXED
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
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.
FIXED
Eventcalendar
invalidateEvent
option to configure the built-in validation of events on create/move/resize. Setting it to
'start-end'
, invalid ranges can be in bounds of an event, only the event start and end cannot overlap. With
strict
the event cannot intersect with any invalid range at all.
eventOrder
option to customize the sort order of the events.
editable
property to the event object which disables drag & drop and resize on the event if
true
.
FIXED
Forms
FIXED
Scheduler
invalidateEvent
option to configure the built-in validation of events on create/move/resize. Setting it to
'start-end'
, invalid ranges can be in bounds of an event, only the event start and end cannot overlap. With
strict
the event cannot intersect with any invalid range at all.
null
or
undefined
is passed, the
resource
property of the events are not taken into account and all events are displayed.
eventOrder
option to customize the sort order of the events (all day events only).
editable
property to the event object which disables drag & drop and resize on the event if
true
.
timeCellStep
and
timeLabelStep
properties to the
view
option to control the granularity of the time grid.
FIXED
onCellClick
,
onCellRightClick
,
onCellDoubleClick
,
onEventClick
,
onEventRightClick
,
onEventDoubleClick
events.
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.
source
property to the
onEventClick
,
onEventDoubleClick
,
onEventRightClick
,
onCellClick
,
onCellDoubleClick
,
onCellRightClick
events to determine where the click is coming from (
'agenda'
,
'calendar'
,
'schedule'
,
'popover'
).
Datepicker
FIXED
returnFormat
option.
ngModelChange
was incorrectly firing when the value was initially set.
Eventcalendar
source
property to the
onEventClick
,
onEventDoubleClick
,
onEventRightClick
,
onCellClick
,
onCellDoubleClick
,
onCellRightClick
events to determine where the click is coming from (
'agenda'
,
'calendar'
,
'schedule'
,
'popover'
).
extendDefaultEvent
option for being able to dynamically extend the default event created with drag or click.
FIXED
onEventUpdate
event was firing when an event was clicked inside the event popover.
onEventUpdate
event was fired even though no actual changes were made to the event.
Scheduler
source
property to the
onEventClick
,
onEventDoubleClick
,
onEventRightClick
,
onCellClick
,
onCellDoubleClick
,
onCellRightClick
events to determine where the click is coming from (
'agenda'
,
'calendar'
,
'schedule'
,
'popover'
).
resources
option for displaying multiple resources inside a single schedule instance.
resource
property to the
colors
,
invalid
,
data
options so these can be tied to a specific resource. The property will also be passed to the lifecycle events alongside the other properties.
groupBy
option for grouping the resources.
extendDefaultEvent
option to be able to set properties for an event created with drag or click.
FIXED
onEventUpdate
event was fired even though no actual changes were made to the event.
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).
FIXED
Agenda
onEventDoubleClick
and
onEventRightClick
lifecycle events, that enable the creation of custom actions when events are right clicked and double clicked.
FIXED
dateFormatLong
option to the Angular component.
Datepicker
FIXED
cellCssClass
property of the
marked
and
colored
options that was not working if labels were also used.
Eventcalendar
onCellDoubleClick
,
onCellRightClick
,
onEventDoubleClick
and
onEventRightClick
lifecycle events, that enable the creation of custom actions when cells and events are right clicked and double clicked.
externalDrop
option.
FIXED
dateFormatLong
option to the Angular component.
Forms
FIXED
div
as well.
Popup
FIXED
Scheduler
colors
option for setting the background of the time grid and day cells.
onCellDoubleClick
,
onCellRightClick
,
onEventDoubleClick
and
onEventRightClick
lifecycle events, that enable the creation of custom actions when cells and events are right clicked and double clicked.
externalDrop
option.
FIXED
dateFormatLong
option to the Angular component.
FIXED
:
character between hours and minutes (e.g.:
'2020-03-09T11:00-1100'
).
Datepicker
FIXED
defaultSelection
option, which could not be updated dynamically.
toDate
method was added to the String prototype.
:
character between hours and minutes (e.g.:
'2020-03-09T11:00-1100'
).
Eventcalendar
FIXED
onEventCreate
event handler.
toDate
method was added to the String prototype.
:
character between hours and minutes (e.g.:
'2020-03-09T11:00-1100'
).
Scheduler
FIXED
onEventCreate
event handler.
toDate
method was added to the String prototype.
:
character between hours and minutes (e.g.:
'2020-03-09T11:00-1100'
).
allDay
property of the
view
option was set to
false
.
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.
recurringException
and
recurringExceptionRule
properties in the data option.
FIXED
Datepicker
FIXED
Eventcalendar
recurringException
and
recurringExceptionRule
properties in the data option.
FIXED
Forms
Scheduler
allDay
property under the
view.schedule
option.
view
option with the
startDay
/
endDay
properties for controlling the displayed days and with the
startTime
/
endTime
properties for controlling the disaplayed hours of the grid.
recurringException
and
recurringExceptionRule
properties in the data option.
FIXED
dragTimeStep
option for the Angular component.
FIXED
Forms
FIXED
label
option type for the Angular switch component, which was set to
boolean
instead of
string
;
FIXED
value
prop binding for the Angular input component.
Eventcalendar
FIXED
clickToCreate
was enabled and labels were not enabled on the calendar.
Forms
FIXED
label
option type of the Angualr input component from
boolean
to
string
.
Popup
FIXED
touchUi: false
).
Agenda
FIXED
Datepicker
navigate
method to programmatically navigate to a date on the calendar.
FIXED
Eventcalendar
clickToCreate
option to control new event creation with click on desktop.
FIXED
onEventDelete
and
onEventDeleted
events for the Angular component.
Forms
FIXED
Popup
FIXED
Scheduler
FIXED
onEventDelete
and
onEventDeleted
events for the Angular component.
FIXED
setOptions
methods parameter to make it accept options that are not common between different components.
Datepicker
FIXED
Eventcalendar
FIXED
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.
FIXED
Calendar
FIXED
currentTarget
instead of
this
for Salesforce LWC compatibility.
Eventcalendar
eventOrder
option to customize the sort order of the events.
FIXED
currentTarget
instead of
this
for Salesforce LWC compatibility.
Forms
FIXED
Listview
FIXED
stopPropagation
on the touchstart event is needed to prevent the scrollview from moving when a listview item is swiped.
Numpad
FIXED
1:08
cannot be entered, since after entering the
0
, buttons above 5 were disabled.
Range
FIXED
currentTarget
instead of
this
for Salesforce LWC compatibility.
FIXED
textColor
property of a label did not work correctly.
onPageLoading
event.
setVal
method, that cleared half of the selection instead of setting the value correctly, when called in vanilla javascript and jQuery.
getVal
method to always take into account the
returnFormat
option and return the values in the specified format.
MbscLocale
type, the type of the
locale
option, making it easier to customize the locales in a type-friendly way.
onChange
event was not triggered when the datepicker was used as directive in Angular.
Eventcalendar
FIXED
dragToCreate
enabled.
Scheduler
FIXED
days
property for the schedule view to be able to hide the scheduler day header.
FIXED
Datepicker
FIXED
iso8601
returnFormat option in desktop mode.
onCellHoverIn
and
onCellHoverOut
events.
Eventcalendar
action
argument to the
onEventCreate
event, to determine if it was click or drag.
FIXED
onCellHoverIn
and
onCellHoverOut
events.
Scheduler
action
argument to the
onEventCreate
event, to determine if it was click or drag.
FIXED
Scheduler
FIXED
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.
FIXED
Agenda
refresh
method to refresh the view.
FIXED
Datepicker
defaultSelection
option to specify an initial selection, without setting the actual value.
FIXED
firstDay
,
weeks
.
onCancel
event, which was triggered, incorrectly, on the set button as well.
selectionCounter
option.
Eventcalendar
refresh
method to refresh the view.
FIXED
Popup
Scheduler
refresh
method to refresh the view.
FIXED
Segmented
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.
FIXED
onPageChange
and
onPageLoading
event were fired twice when changing views, and once with wrong arguments.
Datepicker
setTempVal
and
getTempVal
methods to help in adding custom logic and behavior to the selection experience. This is especially useful for 'hijacking' the selection before it is submitted, like adding a 'one-way' mode to the range picker.
onTempChange
lifecycle event that can be used to customize the value picking experience.
rangeStartHelp
and
rangeEndHelp
options.
FIXED
minRange
and
maxRange
options, so the selectable range is updated right away when they are changed dynamically.
Eventcalendar
FIXED
onPageChange
and
onPageLoading
event were fired twice when changing views, and once with wrong arguments.
firstDay
and
lastDay
of the
onPageChange
,
onPageLoading
and
onPageLoaded
events in case of month view, to take into account the visible outer days as well.
Forms
FIXED
Scheduler
FIXED
event
and
oldEvent
arguments of the
onEventUpdate
and
onEventUpdated
events.
onPageChange
and
onPageLoading
event were fired twice when changing views, and once with wrong arguments.
Segmented
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.
Agenda
FIXED
Datepicker
colors
option with the highlight and background properties.
FIXED
Eventcalendar
colors
option with the highlight and background properties.
actionableEvents
options to enable / disable the actionable styling (pointer cursor, hover and active states, ripple effect) of event list items.
FIXED
Scheduler
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.
FIXED
theme
and
themeVariant
options.
Calendar
FIXED
colors
and the
marked
option to take a start and an end date instead of just a single date.
Cards
FIXED
Eventcalendar
FIXED
colors
and the
marked
option to take a start and an end date instead of just a single date.
Forms
FIXED
Navigation
animTime
parameter to the
navigate
method for specifying the duration of the scroll animation.
FIXED
layout
propType in react to work without giving a warning when used with numbers.
onItemTap
event on disabled items.
Numpad
FIXED
Range
FIXED
colors
and the
marked
option to take a start and an end date instead of just a single date.
Scrollview
animTime
parameter to the
navigate
method for specifying the duration of the scroll animation.
FIXED
layout
propType in react to work without giving a warning when used with numbers.
Select
FIXED
"
).
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.
FIXED
Datepicker
FIXED
responsive
option.
Eventcalendar
FIXED
Popup
FIXED
Scheduler
FIXED
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.
Datepicker
FIXED
Eventcalendar
FIXED
Popup
FIXED
Scheduler
FIXED
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.
FIXED
"Unable to preventDefault inside passive event listener invocation."
error in case of all scroller based pickers (regression introduced in 4.10.4).
Calendar
FIXED
Eventcalendar
FIXED
Range
FIXED
Scrollview
FIXED
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.
FIXED
themeVariant
option from
dark
to
light
.
themeVariant
(which can be light or dark) to the underlying mobiscroll inputs.
Calendar
FIXED
onCellHoverIn
and
onCellHoverOut
events to fire after a day was clicked.
invalid
option to accept the object format for simple rules as well, like
{ d: '2020-06-15' }
or
{ d: 'w0' }
.
null
value, that should be used when the calendar needs to be cleared.
Datetime
FIXED
Eventcalendar
FIXED
onCellHoverIn
and
onCellHoverOut
events to fire after a day was clicked.
invalid
option to accept the object format for simple rules as well, like
{ d: '2020-06-15' }
or
{ d: 'w0' }
.
onPageChange
,
onPageLoading
and
onPageLoaded
events fired twice when only the event list view was visible.
Navigation
FIXED
responsive
option, which caused an error when used with the navigation component.
snap
option was
true
.
Numpad
FIXED
setVal
method that lost the pass-through value and also broke the process of setting values internally.
Range
FIXED
onCellHoverIn
and
onCellHoverOut
events to fire after a day was clicked.
invalid
option to accept the object format for simple rules as well, like
{ d: '2020-06-15' }
or
{ d: 'w0' }
.
Scroller
FIXED
Select
FIXED
touchUi: false
.
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.
FIXED
Agenda
renderEventContent
and
eventContentTemplate
options to the already existing
renderEvent
and
eventTemplate
options to improve on the customizability. The new options will be helpful if you only want custom content and don't want to bother with the basic look of the events.
renderHeader
and
headerTemplate
options can be used to provide a custom header to the calendar. We also made public the basic building blocks of the default calendar header - the previous, next and today buttons along with the year/month navigation component - so they can be used in custom header implementations out of the box.
Eventcalendar
renderLabelContent
and
labelContentTemplate
options to provide only the label content, if you don't need custom styling on the labels. You can use the
renderLabel
and
labelTemplate
options to fully customize the labels. In this case, you only get the positioning and everything else is up to you.
renderEventContent
and
eventContentTemplate
options to the already existing
renderEvent
and
eventTemplate
options to improve on the customizability. The new options will be helpful if you only want custom content and don't want to bother with the basic look of the events.
renderHeader
and
headerTemplate
options can be used to provide a custom header to the calendar. We also made public the basic building blocks of the default calendar header - the previous, next and today buttons along with the year/month navigation component - so they can be used in custom header implementations out of the box.
FIXED
Popup
fullScreen
option which is a shortcut to the width and height options to make the popup as large as possible.
maxWidth
and
maxHeight
settings to improve on the look on large screens.
color
and
variant
options to the buttons API. The popup buttons can be passed the
primary
,
secondary
, etc... colors and the
flat
,
outline
and
standard
button variants.
FIXED
Scheduler
renderScheduleEventContent
and
scheduleEventContentTemplate
options to provide only the event content, and don't want to bother with the styling. You can use the
renderScheduleEvent
and
scheduleEventTemplate
options to fully customize the events in the scheduler. In this case you will only get the positioning out of the box and you take care of everything else.
renderHeader
and
headerTemplate
options can be used to provide a custom header to the calendar. We also made public the basic building blocks of the default calendar header - the previous, next and today buttons along with the year/month navigation component - so they can be used in custom header implementations out of the box.
FIXED
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.
REMOVED
CHANGED
mobiscroll.settings
object and added the
setOptions
function to set the global options for the components. The new
setOptions
function is dynamic, meaning that changing the global options runtime will update all initialized components.
option
method to
setOptions
for all components. Use it to dynamically update the options of a component.
lang
option to
locale
for localizing the components. Instead of a string now it accepts an object containing the localization settings. Localization objects can be imported like `import { localeDe, localeHu } from '/path/to/mobiscroll';` in case of ES6, or accessed as
mobiscroll.localeDe
in case of ES5 usage.
getJson
function to
mobiscroll.util.http.getJson
. In ES6 it can also be imported directly: `import { getJson } from '/path/to/mobiscroll';`.
Datetime
REMOVED
tap
method.
CHANGED
inputOptions
option to pass configuration to the rendered mobiscroll input, or have the global settings applied.
animate
option to
animation
to specify the show / hide animation of the picker.
height
option to
itemHeight
for setting the height of the wheel items.
width
option to
wheelWidth
for setting the exact width of the wheels.
maxWidth
option to
maxWheelWidth
for setting the maximum width of the wheels.
minWidth
option to
minWheelWidth
for setting the minimum width of the wheels.
showOnTap
option to
showOnClick
for the sake of simplicity and to make it more obvious.
steps
option into
stepHour
,
stepMinute
and
stepSecond
.
dateFormat
and
timeFormat
options to avoid some common confusions we met. See the API docs for the new formatting tokens.
onSet
event to
onChange
and the
onShow
event to
onOpen
for more clarity. This was part of the lifecycle event cleanup we performed.
show
method to
open
and the
hide
method to
close
.
Eventcalendar
selectedDate
option for setting, changing the active date on the calendar.
defaultSelectedDate
option for specifying the initially selected date.
showControls
option to show or hide the calendar header controls like previous, next, today buttons along with the view range.
renderEvent
and
eventTemplate
options for custom event rendering that can be used in the agenda or popover event listing.
renderAgenda
and
agendaTemplate
options for a fully custom, external agenda rendering.
REMOVED
anchor
,
animate
,
buttons
,
closeOnOverlayTap
,
display
,
focusOnClose
,
focusTrap
,
formatDuration
,
headerText
,
showOnFocus
,
showOnTap
,
yearChange
.
onBeforeClose
,
onBeforeShow
,
onClose
,
onPosition
,
onShow
.
hide
,
isVisible
,
position
,
redraw
,
refresh
,
show
,
tap
.
CHANGED
recurring
property of an event as an object or as a string in RRULE format. Currently daily, weekly, monthly and yearly repeats are supported.
text
,
title
should be used, and instead of the
d
property use the
recurring
property to create recurring events.
marked
,
label
and
color
objects. To specify the date, use the
date
property, or the
start
and
end
properties for multiple days, and use the
recurring
property to specify multiple occurrences.
dateFormat
and
timeFormat
options to avoid some common confusions we met. See the API docs for the new formatting tokens.
onEventSelect
event to
onEventClick
, the
onDayChange
event to
onCellClick
and the
onSetDate
event to
onSelectedDateChange
.
calendarHeight
option to
height
and changed its scope to the full calendar with header and everything.
calendarWidth
option to
width
.
calendarScroll
option into the
view
option under
view.calendar.scroll
.
eventBubble
option into the
view
option under
view.calendar.popover
.
showEventCount
option into the
view
option under
view.calendar.count
.
showOuterDays
option into the
view
option under
view.calendar.outerDays
.
weeks
option into the
view
option under
view.calendar.size
.
weekCounter
option into the
view
option under
view.calendar.weekNumbers
.
eventList
property of the
view
option to
agenda
.
Forms
label
option to specify the label of the input.
startIconSvg
and
endIconSvg
options to pass svg markup as string for the input icons.
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
iconAlign
option, and added the
startIcon
and
endIcon
options instead to specify the input icons.
variant
option to the button, which can be
'standard'
,
'flat'
, or
'outline'
.
Popup
width
option to specify the width of the popup. Accepts any valid css value.
height
option to specify the height of the popup. Accepts any valid css value.
maxWidth
option to specify the max width of the popup. Accepts any valid css value.
maxHeight
option to specify the max height of the popup. Accepts any valid css value.
REMOVED
tap
method.
CHANGED
animate
option to
animation
to specify the show / hide animation of the popup.
showOnTap
option to
showOnClick
and the
onShow
event to
onOpen
.
show
method to
open
and the
hide
method to
close
.
Scheduler
view
option.
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.
FIXED
ion-input
in Ionic 5 with Angular 9.
Calendar
mbsc-calendar-mark
scss color variable allowing to set the default color of the marks.
background: 'none'
property.
FIXED
onCellHoverIn
and
onCellHoverOut
to prevent firing on unintended hover, or during mousedrag.
Eventcalendar
mbsc-calendar-mark
scss color variable allowing to set the default color of the marks.
FIXED
onCellHoverIn
and
onCellHoverOut
to prevent firing on unintended hover, or during mousedrag.
Forms
FIXED
Listview
FIXED
Numpad
FIXED
.
,
+
, and
-
keys).
Popup
FIXED
Range
mbsc-calendar-mark
scss color variable allowing to set the default color of the marks.
background: 'none'
property.
FIXED
mbsc-range-start
and
mbsc-range-end
components were used with a custom set button.
onCellHoverIn
and
onCellHoverOut
to prevent firing on unintended hover, or during mousedrag.
Rating
FIXED
onChange
event to fire on the React Rating component.
Select
FIXED
FIXED
min
or
max
boundaries were reached.
FIXED
Eventcalendar
FIXED
Forms
FIXED
Listview
FIXED
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 and
role="row"
to improve accessibility.
All Components
Calendar
onCellHoverIn
and
onCellHoverOut
events, allowing to perform custom tasks when calendar days are hovered on desktop, e.g. showing a tooltip.
FIXED
role="row"
attributes on calendar rows for improved accessibility. (
#473
)
Eventcalendar
onCellHoverIn
and
onCellHoverOut
events, allowing to perform custom tasks when calendar days are hovered on desktop, e.g. showing a tooltip.
FIXED
role="row"
attributes on calendar rows for improved accessibility. (
#473
)
Measurements
decimalSeparator
setting to localize the decimal separator charachter.
Navigation
FIXED
onItemTap
event to fire twice if the navigation control was nested inside a Scrollview.
Number
decimalSeparator
setting to localize the decimal separator charachter.
Numpad
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.
entryMode
setting that accepts
template
and
freeform
. The maximum length of the fractional part can be limited by the also newly introduced
maxScale
that defaults to 4.
Range
onCellHoverIn
and
onCellHoverOut
events, allowing to perform custom tasks when calendar days are hovered on desktop, e.g. showing a tooltip.
FIXED
role="row"
attributes on calendar rows for improved accessibility. (
#473
)
Select
FIXED
FIXED
Forms
FIXED
Listview
FIXED
Optionlist
FIXED
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
themeVariant
setting which can be used to set light and dark variants of the selected theme and introduced
auto
to make switching dynamic based on system settings.
FIXED
FIXED
readonly
setting in the type definitions of Angular and React components.
Calendar
FIXED
Color
FIXED
Forms
FIXED
Navigation
FIXED
Timespan
FIXED
...
on the scroll wheels.
FIXED
Calendar
FIXED
Eventcalendar
FIXED
Forms
FIXED
Range
FIXED
FIXED
Forms
FIXED
readonly
property on form components, allowing dynamic binding of the property.
Select
FIXED
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
rxjs-compat
package dependency in angular and ionic.
showInput
setting for all scroller and calendar based components. Using this setting, an
mbsc-input
- showing the selected value - can also be rendered when components are displayed in
inline
mode.
FIXED
Color
FIXED
Eventcalendar
FIXED
Forms
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.
error
and
errorMessage
attributes to the
switch
,
checkbox
and
radio
components in Angular. Using them will render the components with invalid styling and will show the validation message.
FIXED
input-style
attribute for Angular checkboxes, which was not taken into account.
mbsc-input
component in Angular and Ionic, which was not active initially, when the input was focused on pageload.
switch
,
progress
and
slider
controls, that messed up their styling when their theme was changed dynamically.
Image
FIXED
mbsc-image
Angular component to correctly display the component in inline as well.
Navigation
setupReactRouter
function that enables the navigation component to work with React Router version 5.
mbsc-line-height-xs
,
mbsc-line-height-s
,
mbsc-line-height-m
,
mbsc-line-height-l
,
mbsc-line-height-xl
.
mbsc-h1
...
mbsc-h6
,
mbsc-p
,
mbsc-a
,
mbsc-ul
,
mbsc-ol
.
Range
FIXED
Select
FIXED
mbsc-align-justify
utility class for justified text align styling.
Eventcalendar
FIXED
navigate
method to scroll correctly to the specified date in agenda view.
Forms
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
Navigation
FIXED
Select
FIXED
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
Datetime
FIXED
Eventcalendar
getJson
utility function to the event calendar component.
FIXED
Forms
FIXED
Listview
getJson
utility function to the listview component.
Scrollview
FIXED
layout
setting.
Select
FIXED
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
.
type="file"
. File inputs will be consistently styled with other form elements.
FIXED
Listview
FIXED
Numpad
FIXED
min
and
max
settings to be rounded accordingly to the
scale
setting.
Popup
FIXED
Range
FIXED
Scrollview
FIXED
Select
FIXED
FIXED
Cards
FIXED
Color
FIXED
Eventcalendar
FIXED
Forms
FIXED
Listview
FIXED
actionable
setting was missing from type definitions.
instance
parameter was missing from the
onStageChange
event handler type definitions.
select
,
deselect
,
hideLoading
and
showLoading
methods were missing from type definitions.
Popup
FIXED
responsive
setting did not work for the Popup component.
Select
FIXED
Eventcalendar
FIXED
Forms
FIXED
onChange
event of the Slider was not working in React.
Listview
FIXED
option
method was missing from the instance type definitions.
Timer
FIXED
Timespan
FIXED
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
FIXED
Forms
FIXED
inset
binding of the
MbscFormGroup
component in angular, to change when a false value is passed to it.
Listview
FIXED
Numpad
FIXED
responsive
setting did not work.
Optionlist
FIXED
Eventcalendar
formatDuration
function. (
#466
)
FIXED
allDay
property is explicitly set. (
#464
)
Forms
mobiscroll.notification.dismiss()
function which will close the active toast or snackbar message.
FIXED
Scroller
FIXED
width
setting, which can be array as well, not just number.
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
showOverlay
setting.
FIXED
IonInput
in Ionic 4 React.
CHANGED
mousewheel
setting).
Eventcalendar
FIXED
Navigation
FIXED
FIXED
i18n
property to the type defintions, which enables adding custom language modules.
useRef
hooks.
Calendar
FIXED
Cards
FIXED
Datetime
FIXED
Eventcalendar
FIXED
onEventSelect
event argument returned wrong event on calendar label tap, if both labels and event list was used.
onEventSelect
was not fired if an event was clicked inside the popover.
Listview
FIXED
onItemTap
event was fired on the touchend event on touch devices, as a consequence, the click event firing afterwards was causing problems in certain use cases, for example immediately closing a popup opened from the
onItemTap
event handler.
Range
FIXED
Select
FIXED
Timer
FIXED
Timespan
FIXED
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
inputStyle
and
labelStyle
props to react form components: Slider, Progress, Rating, Stepper and Switch. With this you’ll be able to keep consistency across inputs and all these other components too.
input-style
and
label-style
support to all Angular components.
FIXED
Calendar
Cards
FIXED
Eventcalendar
formatDuration
function to change the text that is used for the event duration.
FIXED
Forms
FIXED
Listview
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.
showLoading
and
hideLoading
. The icon inside the loading content can be specified with the
loadingIcon
setting and it can be anything from the included icon package.
animateAddRemove
setting to turn animations on/off for adding and removing list items. Useful for turning it off on batch operations.
FIXED
context
setting. This is needed for the listview to be used correctly within Ionic Framework 4.
Numpad
[mbsc-options]
to be used with directives. This was only supported within the components before.
FIXED
preset
setting to the
MbscNumpadOptions
type definitions.
MbscNumpadDateOption
,
MbscNumpadDecimalOptions
...) that were missing in the Angular version.
thousandsSeparator
that messed up values in some cases:
0.0,005
was printed instead of
0.0005
.
Range
Select
FIXED
FIXED
ion-input
components in Ionic 4. Controls didn't open on first input tap.
Calendar
updateEvent
method that makes updating events easier. You won't need to remove and re-add events, everything is handled in the background.
FIXED
min
or
max
was set and
dateFormat
did not contain the year (#456).
Listview
FIXED
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.
FIXED
Calendar
FIXED
Forms
FIXED
ngModel
checkbox value will update the UI accordingly.
layout
setting.
Calendar
FIXED
redraw
method messed up the calendar layout in RTL mode.
Color
FIXED
Eventcalendar
FIXED
redraw
method that messed up the calendar layout in RTL mode.
more
event label that was not always correctly displayed.
CHANGED
popover
is set to
false
, it completely disables the popover, even for
more events
label.
Forms
FIXED
Listview
FIXED
remove
method was fixed for hierarchical lists.
Navigation
FIXED
Numpad
FIXED
formatValue
and
parseValue
.
Range
FIXED
redraw
method messed up the calendar layout in RTL mode.
showSelector
can now hide the range start/end tabs for every configuration. This is useful when start and endare handled by two separate inputs.
Select
FIXED
mbsc-select
directive will work on
mbsc-dropdown
form elements.
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
NgModules
so that you can load only what's needed. Steps are made towards full tree-shaking support.
FIXED
Calendar
calendarSystem
setting is where you can set
gregorian
,
jalali
or
hijri
.
FIXED
Cards
FIXED
Datetime
calendarSystem
setting is where you can set
gregorian
,
jalali
or
hijri
.
FIXED
Eventcalendar
calendarSystem
setting is where you can set
gregorian
,
jalali
or
hijri
.
FIXED
getEvents
method. It did not work correctly if a date was passed (regression introduced in v4.4.3).
Forms
FIXED
className
prop changes in React.
Image
FIXED
Numpad
FIXED
Range
calendarSystem
setting is where you can set
gregorian
,
jalali
or
hijri
.
FIXED
Scrollview
FIXED
Select
FIXED
ng-repeat
were problematic.
Treelist
FIXED
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
w0
...
w6
) failed for various settings (invalid, marked, labels, colors, events) in months where daylight saving starts. Timezones are tricky...
forRoot
configuration.
CHANGED
scroll3d
setting to manually override it.
Calendar
FIXED
onSetDate
were missing and we fixed that.
Color
FIXED
onItemTap
and
onPreviewItemTap
events were also missing.
Eventcalendar
FIXED
onDayChange
event argument.
eventText
,
eventsText
,
labelsShort
,
onSetDate
.
Forms
FIXED
Range
FIXED
onSetDate
.
Scrollview
FIXED
touchend
event when the content is scrolled vertically, it might cause exceptions in event handlers attached outside of the scrollview.
Select
FIXED
onFilter
event were added.
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
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
changeTab
method should not hide the calendar if tabs are not present.
Cards
FIXED
Eventcalendar
FIXED
Forms
FIXED
MbscFormGroup
,
MbscFormGroupTitle
,
MbscFormGroupContent
and
MbscAccordion
components.
Listview
FIXED
inputStyle
and
labelStyle
props was not handled correctly in React.
Navigation
FIXED
NavItem
s can be used with inline conditions without throwing an error.
responsive
setting did not work.
refresh
method call as well.
FIXED
Popup
FIXED
Range
FIXED
defaultValue: null
did not work correctly, today's date was selected for start and end dates.
Select
FIXED
"
character.
Treelist
FIXED
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
Calendar
FIXED
firstDay
parameter was wrong inside the
onPageLoading
and
onPageLoaded
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 the
onPageLoading
and
onPageLoaded
events on initial load, if
min
was also set and minimum date was inside the initially loaded month. This also caused the initial event list to be inside the wrong date range.
Forms
FIXED
inset
property to the
MbscFormGroup
propTypes in React.
readonly
attribute.
Gridlayout
FIXED
border-box
box sizing to appear correcty outside an
mbsc-page
too.
Listview
FIXED
Navigation
FIXED
FIXED
Scroller
FIXED
direction
argument of the
validate
function was incorrect in case of wheel item tap.
Scrollview
FIXED
itemWidth
is specified, because it won't allow to completely scroll to the end.
Select
FIXED
responsive
setting,
showOnFocus
enabled and inside Mobiscroll Form.
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
FIXED
responsive
setting caused an infinite loop in inline mode for non full-width components.
Forms
labelStyle
setting you can now render inline, stacked and floating labels.
inputStyle
setting you can now render underline, box or outline inputs. These settings translate to select elements as well.
FIXED
CHANGED
MbscFormGroup
,
MbscFormGroupTitle
and
MbscFormGroupContent
components were renamed to
FormGroup
,
FormGroupTitle
and
FormGroupContent
. The old naming is deprecated and will be removed in a future release.
Listview
FIXED
Navigation
RouterLink
directive that automatically selects the active route.
NavItems
now support the same props as the
Link
component and become selected when the path matches their
to
prop.
FIXED
FIXED
Popup
FIXED
Range
FIXED
Scrollview
FIXED
Select
FIXED
onBeforeShow
was fired multiple times, if handler returned false.
Cards
FIXED
Eventcalendar
FIXED
onEventSelect
handler received the wrong date as argument in case of event listing.
Forms
FIXED
Treelist
FIXED
FIXED
Calendar
FIXED
Color
FIXED
Eventcalendar
FIXED
Forms
Listview
FIXED
Range
FIXED
type
prop to the default generated input.
Select
FIXED
mbsc-select
directive won't generate an additional input element when it's used on
ion-input
s in ionic 4
onSet
during scroll in tap selection mode.
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
showOnFocus
and
showOnTap
is false.
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
setting.
FIXED
ion-input
components will behave correctly after data selection.
Calendar
FIXED
Cards
mbsc-accordion
container to enable accordion behavior.
Color
FIXED
ion-inputs
when selected.
Eventcalendar
FIXED
Forms
FIXED
mbsc-textarea
component to control the maximum number of rows.
Gridlayout
Languages
Listview
FIXED
sortable
setting.
Numpad
FIXED
null
as default instead of 0 in Angular.
Range
RangeStart
and
RangeEnd
components were added for React that can be used inside the
Range
component for greater extensibility.
FIXED
Select
FIXED
filter
property was added to the
MbscSelectOptions
type.
Treelist
FIXED
ng-repeat
.
Widget
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
FIXED
Calendar
FIXED
Cards
FIXED
Eventcalendar
FIXED
view
setting for eventcalendar inline settings.
eventBubble
setting did not work when set to
false
.
Languages
FIXED
eventText
and
eventsText
translations were missing from most of the language files.
Listview
FIXED
Navigation
FIXED
onItemTap
event was triggered twice if an item was tapped inside the bubble popup (on touch devices).
Range
FIXED
Select
FIXED
data
setting type updated in react and angular to enable the use of remote data sources.
onFilter
event was not triggered when the filter input clear button was pressed which caused problems on custom filter implementations.
FIXED
ng-click
or
click
).
Calendar
FIXED
Datetime
FIXED
Eventcalendar
FIXED
Forms
FIXED
Range
FIXED
Datetime
FIXED
Eventcalendar
FIXED
Range
FIXED
invalid
and
valid
settings are updated automatically in angular, when bound to an array.
FIXED
Calendar
colors
,
labels
and
marked
settings are updated automatically in angular, when bound to an array.
Color
FIXED
Datetime
Eventcalendar
colors
,
labels
and
marked
settings are updated automatically in angular, when bound to an array.
FIXED
onEventSelect
event emitter and settings to the
MbscEventcalendarOptions
interface.
Forms
FIXED
Listview
FIXED
onSort
and
onSortChange
event parameters were not passed correctly.
Navigation
FIXED
ng-click
was not fired on navigation items when used with Ionic 1.
Range
Scrollview
FIXED
FIXED
Eventcalendar
FIXED
Range
FIXED
startInput
and
endInput
settings were not working in Angular if used on
mbsc-input
or
ion-input
components.
CHANGED
Calendar
FIXED
Eventcalendar
CHANGED
Forms
FIXED
Image
FIXED
Numpad
FIXED
Range
FIXED
Scrollview
FIXED
Select
FIXED
FIXED
cssClass
setting to angular components and directives.
Calendar
FIXED
onPageLoaded
,
onPageLoading
and
onPageChange
events to the angular and react component.
showOuterDays: false
setting.
CHANGED
Cards
FIXED
onClick
handler can be passed to react components inside card.
Color
FIXED
undefined
value was added to the values array with
setVal
in multiple selection mode.
Eventcalendar
FIXED
allDay
event property definition in angular directive
Forms
FIXED
Listview
FIXED
swipeleft
and
swiperight
settings names corrected in angular component.
Navigation
FIXED
prev
and
next
method
toggle
parameter wasn't true by default.
Range
FIXED
Scroller
onChange
event.
FIXED
parseValue
and
formatValue
in angular and react
Select
FIXED
getVal
method returned
null
if selected value was
0
.
null
can also be passed initially for the data setting in angular and react components.
mbsc-data
attribute won't crash the select initially, when the model value is not the first data item.
Timer
FIXED
FIXED
"Maximum call stack size exceeded"
error when pickers are opened from a Bootstrap modal dialog.
Calendar
onPageChange
,
onPageLoading
,
onPageLoaded
events to substitute
onMonthChange
,
onMonthLoading
and
onMonthLoaded
, because the naming was not suitable in case of week view. Also, instead of just year and month parameters (which is insufficient in case of week views), the events receive a date object, representing the first day of the view. The old events are still triggered as well, but are considered as deprecated.
FIXED
option
method resulted in error when called on an inline calendar.
labels
setting, they were displayed in a wrong color with the Mobiscroll and Material themes.
calendarText
setting. The
dateText
is used instead of it.
CHANGED
Eventcalendar
FIXED
[options]
binding for the Angular component.
Forms
FIXED
CHANGED
Image
FIXED
mbsc-image
directive generates an input element by default.
Languages
FIXED
German toText
translation.
Dutch clearText
translation.
Listview
FIXED
Scrollview
FIXED
setVal
was not working correctly for
0
or empty string value.
onItemTap
event was not fired.
Select
FIXED
setVal
was not working correctly for
0
or empty string value.
Treelist
FIXED
mbsc-treelist
directive generates an input element by default.
Calendar
colors
setting accepts specific dates, ranges and recurring days.
FIXED
calendarHeight
setting was not working, the issue has been resolved.
CHANGED
events
setting has been renamed to
labels
. Use labels to display any type of text in the calendar day cell.
Cards
Color
CHANGED
enhance
setting defaults to
true
in the Angular component. Colors will be shown in the input instead of their hexadecimal values.
Eventcalendar
marked
setting to display colored dots in day cells to provide additional information to the user without the need to select the day.
colors
setting accepts specific dates, ranges and recurring days.
FIXED
onDayChange
event argument, and for the
getEvents
method. Full day events are always at the top, which are followed by daily events in a chronological order.
CHANGED
events
setting has been renamed to
labels
. Use labels to display any type of text in the calendar day cell.
marked
data
Forms
Navigation
onMenuShow
and
onMenuHide
events will be triggered on interaction.
FIXED
nav-item
click.
Range
colors
setting accepts specific dates, ranges and recurring days.
FIXED
CHANGED
events
setting has been renamed to
labels
. Use labels to display any type of text in the calendar day cell.
Select
FIXED
formatValue
function for custom formatting. Use it to customize the text that is shown in the underlying input.
Timer
FIXED
countdown
mode.
weeks
option.
CHANGED
REMOVED
Breaking Change
Knockout integration is not maintained anymore. Please use the plain Javascript version instead.
Breaking Change
ASP.NET MVC server controls are not maintained anymore. Please use a different version of Mobiscroll.
Breaking Change
Buttons will be rendered in the order they are specified in the
buttons
setting. This change is applicable to all components where custom buttons are being used.
Eventcalendar
eventBubble
bool setting.
weeks
option.
CHANGED
Forms
FIXED
CHANGED
Breaking Change
Slider and Progress modules are now included in the Form module. Make sure to include
mobiscroll-form
instead of separately using
mobiscroll-slider
and
mobiscroll-progress
as before.
Menustrip
REMOVED
Breaking Change
Menustip is not maintained as a stand-alone component. Functionality has been broken out into three focused components. Use the Scrollview, Navigation and Optionlist instead.
Navigation
Optionlist
Range
weeks
option.
CHANGED
Rating
REMOVED
Breaking Change
Rating and grading scroller component is not maintained anymore. Use the Image or Scroller components instead.
Scrollview
Themes
REMOVED
Breaking Change
jQuery Mobile theme is not maintained anymore. Mobiscroll for jQuery is fully compatible with jQuery Mobile, use any other available theme.
Breaking Change
Android Holo theme is not maintained anymore. Mobiscroll is supporting Android 4.1+, use any other theme available.
CHANGED
Breaking Change
wp
theme has been renamed to
windows
. Going forward use
windows
for the light theme and
windows-dark
for the dark version.
FIXED
Forms
FIXED
Menustrip
FIXED
Numpad
FIXED
Range
FIXED
Rating
FIXED
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.
startInput
and
endInput
propTypes corrected.
Themes
FIXED
Widget
FIXED
FIXED
Forms
FIXED
Integrations
Languages
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
setVal
method worked incorrectly for range slider in some cases.
Integrations
FIXED
Range
FIXED
FIXED
minDate
time was not 00:00 and time selection was not enabled on calendar.
FIXED
showOnFocus
by default on iOS and Android for better compatibility with Ionic's
ion-input
.
Integrations
FIXED
Numpad
FIXED
Select
FIXED
FIXED
getVal
method returned an array in single select mode after using the setVal mehtod.
FIXED
Forms
FIXED
Integrations
FIXED
Menustrip
threshold
setting to define the minimum required movement in pixels to start scrolling.
tapHighlight
setting to turn off/on item highlight on tap.
FIXED
Numpad
FIXED
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
FIXED
dateWheels
setting is taken into account to define the order of year and month in the calendar header.
Color
FIXED
destroy
method was called on an open popup, the DOM was not cleared up properly.
FIXED
Forms
mbsc-btn-group-block
) and justified (
mbsc-btn-group-justified
) button groups.
FIXED
Integrations
FIXED
Listview
FIXED
navigate
method failed with error for items added dynamically on top level.
navigate
method.
Menustrip
FIXED
Range
FIXED
Scroller
FIXED
selected
argument of the
onItemTap
event was always false.
Select
data
option now accepts an object where remote data source settings can be defined.
filter
option. If true a filter input will be shown above the wheels. Typing in the input will filter the wheel values.
FIXED
Timer
FIXED
Widget
FIXED
cancel
button displayed the
closeText
instead of
cancelText
.
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
FIXED
Datetime
FIXED
Eventcalendar
FIXED
remove
method was not working.
Forms
FIXED
Integrations
FIXED
Measurements
FIXED
Menustrip
FIXED
Number
FIXED
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.
Select
FIXED
'constructor'
, it will be considered invalid.
Widget
FIXED
['ok']
instead of
['set', 'cancel']
.
FIXED
Color
FIXED
Datetime
Forms
rows
attribute on textarea is used to determine the max displayed rows.
FIXED
Languages
FIXED
backText
and
undoText
was not correct in some languages.
Listview
FIXED
Numpad
FIXED
allowLeadingZero
setting did not affect custom buttons.
Range
FIXED
Widget
FIXED
option
method was not working correctly.
Numpad
FIXED
leftKey
or
rightKey
did not have a value field defined.
Select
FIXED
FIXED
Forms
FIXED
option
method was not working correctly.
Integrations
FIXED
Listview
FIXED
Menustrip
FIXED
refresh
(
#395
)
Numpad
FIXED
Range
FIXED
toText
and
fromText
the range buttons were not rendered correctly with the iOS theme.
Select
FIXED
Widget
FIXED
defaultValue
specified and the input field had an initial value.
option
method was called on inline calendar, scrollview instances were not properly destroyed.
onSet
event in inline mode, when day selected.
FIXED
Datetime
Forms
option
method was not working correctly.
mbsc-form-group
,
mbsc-form-group-title
and
mbsc-form-group-inset
classes.
FIXED
Integrations
FIXED
Listview
FIXED
option
method was not working correctly.
Menustrip
FIXED
option
method was not working correctly.
Numpad
FIXED
leftKey
or
rightKey
did not have a
value
field defined.
Rating
FIXED
Themes
FIXED
Integrations
FIXED
option
method.
onSet
event in inline mode as well.
Integrations
Numpad
FIXED
Scroller
FIXED
option
method.
Select
FIXED
Datetime
FIXED
timeFormat
setting only. (
#381
)
Languages
Measurements
FIXED
step
setting only worked on the fraction wheel.
Menustrip
FIXED
itemWidth
was defined.
Number
FIXED
step
setting only worked on the fraction wheel.
Range
FIXED
Select
FIXED
liveSwipe
option is removed.
quickNav
option is removed.
selectedValues
option is removed, use the
defaultValue
option instead.
markedDisplay
option is removed, only one marked styling is available.
markedText
option is removed, use the
events
option to display text instead of marks.
CHANGED
setOnDayTap
instead of
closeOnSelect
.
outerMonthChange
instead of
divergentDayChange
.
select: 'multiple'
instead of
multiSelect: true
.
yearChange
instead of
navigation
.
showOuterDays
instead of
showDivergentDays
.
calendarScroll
instead of
swipeDirection
.
Color
REMOVED
colorpicker()
initialization not working anymore, use
color()
instead.
REMOVED
setValue
,
getValue
,
setValues
,
getValues
methods were removed.
tap
option is removed.
mode
option is removed, use the
showScrollArrows
option instead.
setDefaults
utility function is removed, declare global settings directly in the
mobiscroll.settings
object.
CHANGED
display: 'center'
instead of
display: 'modal'
.
closeOnOverlayTap
instead of
closeOnOverlay
.
onBeforeClose
instead of
onClose
.
onClose
instead of
onClosed
.
onSet
instead of
onSelect
.
Datetime
REMOVED
$.mobiscroll.formatDate
and
$.mobiscroll.datetime.formatDate
removed, use
mobiscroll.util.datetime.formatDate
.
$.mobiscroll.parseDate
and
$.mobiscroll.datetime.parseDate
removed, use
mobiscroll.util.datetime.parseDate
.
CHANGED
dateWheels
instead of
dateOrder
min
instead of
minDate
.
max
instead of
maxDate
.
Listview
CHANGED
striped
instead of
altRow
.
Measurements
CHANGED
defaultUnit
instead of
defUnit
.
Range
REMOVED
rangepicker()
initialization not working anymore, use
range()
instead.
CHANGED
rangeTap
option is removed, behavior is always on.
Scroller
CHANGED
keys
and
values
properties of the wheel object are removed, pass an array of objects to the
data
property instead.
changeWheel
method arguments changed.
width
instead of
fixedWidth
.
onItemTap
instead of
onValueTap
.
Select
CHANGED
select: 'multiple'
instead of
multiple: true
.
Themes
REMOVED
android
,
ios-classic
,
sense-ui
,
sense
,
sense-dark
themes were removed.
android-ics
,
android-ics light
,
android-holo light
,
wp light
,
ios7
were removed.
CHANGED
Timer
CHANGED
controls
option removed, use the
mode
option instead.
Timespan
CHANGED
min
instead of
minTime
.
max
instead of
maxTime
.
onMonthLoading
event which runs every time before a month markup is generated. (
#369
)
redraw
method which renders markup without reloading the data. (
#369
)
FIXED
FIXED
box-sizing: border-box
was globally applied (e.g. using with Bootstrap, Kendo, etc.).
position
method error if called on a control not currently visible.
Forms
FIXED
data-live
attribute can't be switched off.
option
method duplicated the markup.
Integrations
FIXED
$digest already in progress
error when calling the
clear
method in Angular
mobiscroll-instance
was not working with forms.
Languages
Listview
FIXED
swipe: false
was not working inside the
itemGroup
setting
Measurements
FIXED
defaultValue
was set, 0 could not be set using the
setVal
method.
Number
FIXED
defaultValue
was set, 0 could not be set using the
setVal
method.
Select
FIXED
Widget
FIXED
readonly
option which does not allow calendar selection.
FIXED
FIXED
clear
method was working only if control was visible.
Datetime
FIXED
Integrations
FIXED
Languages
FIXED
labelsShort
translation fixes for de (thanks to
Beat Grabe
), es, fr, it, no, pt-BR. (
#367
)
backText
and
clearText
translation in Spanish.
Listview
FIXED
Menustrip
onGestureStart
,
onGestureEnd
,
onMove
,
onAnimationStart
,
onAnimationEnd
events added.
Numpad
decimalSeparator
,
thousandsSeparator
settings for decimal preset.
FIXED
Select
Widget
FIXED
highlightNow
setting for highlighting today's date.
changeTab
method for changing tabs programmatically. (
#352
)
FIXED
setVal
was not working with date strings. (
#333
)
onMonthLoaded
when tapping on month or year list. (
#336
)
day.control
received incorrect value in the
onSetDate
event. (
#347
)
onBeforeShow
event. (
#346
)
onClose
event is now renamed to
onBeforeClose
,
onClose
is deprecated and will be removed in the future. (
#298
)
onClosed
event added, which is triggered after the popup is closed and the value is already set. (
#298
)
focusTrap
setting added. (
#341
)
FIXED
Forms
FIXED
Integrations
FIXED
ng-model
input inside.
Languages
FIXED
Listview
FIXED
onItemTap
event is used).
openAction
and
openStage
methods sometimes caused an infinite loop on Android 4.1.
Measurements
FIXED
convert: false
setting was not working. (
#344
)
Numpad
FIXED
Themes
FIXED
pointer-events: auto
on popup container to increase compatibility with other frameworks (e.g. when used inside Ionic popup).
Forms
FIXED
Integrations
FIXED
Languages
FIXED
selectedPluralText
for plural form of 'selected' in some languages. (
#315
)
select
,
deselect
,
enable
,
disable
methods. (
#329
)
Range
FIXED
Select
FIXED
Themes
FIXED
onBeforeShow
event.
FIXED
Datetime
FIXED
timeWheels
for dutch language was incorrect.
en-GB
locale to use 24 hours format.
Forms
Languages
FIXED
Listview
FIXED
Menustrip
FIXED
Numpad
FIXED
Scroller
Select
FIXED
Themes
Widget
FIXED
FIXED
defaultValue
dynamically (
#296
)
Languages
backText
and
undoText
translations added to language files (
#292
)
Listview
FIXED
Numpad
FIXED
timeFormat
changed from 'HH:ii A' to 'hh:ii A'.
getVal
returned null, if the widget was visible.
Scroller
FIXED
getVal
returned null, if the widget was visible.
Themes
FIXED
onMonthChange
event on quick navigation as well.
quickNav
.
showOnFocus
setting default value changed to false.
Integrations
data
setting.
FIXED
mobiscroll-instance
directive now parses the attribute value and uses it's assign property. (
#281
)
ngRepeat
. (
#282
)
Listview
hover
setting to reveal the list item actions on mouse pointer hover.
Menustrip
Numpad
FIXED
Scroller
formatResult
is deprecated and will be removed in the future. Use
formatValue
instead.
$('myscroller').mobiscroll().scroller(settings);
initizalization form.
FIXED
Select
multiple
setting to enable multiple selection.
FIXED
clickpick
or
mixed
.
Themes
theme: 'auto'
to use OS theme.
REMOVED
accent
option for WP theme is no longer supported. Use the Theme Builder instead.
Timespan
getVal
and
setVal
methods are working with milliseconds.
Treelist
FIXED
Widget
option
method resulted in an error if the calendar was visible.
Listview
FIXED
Menustrip
FIXED
Numpad
FIXED
Select
FIXED
valueText
event parameter had incorrect value (#270).
Temperature
FIXED
steps
setting instead of
stepHour
,
stepMinute
,
stepSecond
, also allows starting steps from 0. (
#263
)
Integrations
mobiscroll-data
attribute added to angularjs listview integration for filter support. (
#264
)
mobiscroll-instance
attribute added to angularjs directives for better accessibility. (
#266
)
FIXED
mobiscroll-color
and
mobiscroll-range
bindings were not working. (
#268
)
ng-repeat
.
Listview
enhance
setting to automatically add styling to list items.
rtl
setting for right to left support.
FIXED
Measurements
FIXED
Menustrip
FIXED
navigate
,
prev
and
next
methods for programmatic navigation.
Number
FIXED
Scroller
FIXED
Themes
FIXED
isVisible
method returned the DOM element before the first show.
$.mobiscroll.activeInstance
is tracked only for modal widgets (other than inline).
Integrations
FIXED
Menustrip
refresh
method to recalculate dimensions needed for scrolling (
#261
).
FIXED
Numpad
FIXED
allowLeadingZero
setting was true (
#259
).
Themes
FIXED
Timespan
FIXED
FIXED
Image
FIXED
enhance
setting did not work with App Framework.
labels
setting did not work properly.
Plugins
FIXED
Range
FIXED
onClose
returned false.
defaultValue
did not work correctly with empty array.
Themes
FIXED
Treelist
FIXED
enhance
setting did not work with App Framework.
labels
setting did not work properly.
swipeDirection
setting to enable horizontal or vertical navigation (
#251
).
REMOVED
Color
$('#color').mobiscroll().color()
,
$('#range').mobiscroll().colorpicker()
is deprecated and will be removed in the future.
setVal
and
getVal
methods added to all components for setting and getting the selected value(s), instead of
getValue
,
setValue
,
getValues
,
setValues
,
getDate
,
setDate
(
#236
).
setVal
and
getVal
methods added to all components for setting and getting the selected value(s), instead of
getValue
,
setValue
,
getValues
,
setValues
,
getDate
,
setDate
(
#236
).
setArrayVal
and
getArrayVal
methods for getting and setting the 'raw' wheel value array (for scroller components), or the 'raw' number array (for numpad components) (
#236
).
set
,
cancel
,
clear
,
now
, e.g.
buttons: [ { text: 'Hide', handler: 'cancel' } ]
.
btnClass
to specifiy the css class for all buttons, or set the
cssClass
property of the individual button, e.g.
buttons: [ { text: 'Set', handler: 'set', cssClass: 'my-btn' } ]
(
#252
).
icon
property of the individual button, e.g.
buttons: [ { text: 'Set', icon: 'checkmark', handler: 'set' } ]
.
FIXED
animationend
event after show, otherwise the popup reappeared after hide in older versions of Chrome.
headerText
setting, but only if it contained html strings.
REMOVED
false
for
setText
and
cancelText
in order to hide the Set and Cancel buttons is no longer supported. Use the
buttons
setting instead.
Datetime
FIXED
REMOVED
showNow
setting is no longer supported. Use the
buttons
setting instead.
Image
enhance
setting to automatically add styling to the list.
Integrations
ng-model
directive.
mobiscroll-scroller
directive for custom wheels.
Listview
actionWidth
setting for specify the width of the action menu (
#233
).
openActions
function which opens the actions of a list item programmatically (
#247
).
openStage
function which opens a specified stage of a list item programmatically (
#247
).
stages
: specify sepparate left and right stages, percentages are autogenerated if not specified.
Range
$('#range').mobiscroll().range()
,
$('#range').mobiscroll().Range()
is deprecated and will be removed in the future.
swipeDirection
setting to enable horizontal or vertical navigation (
#251
).
Scroller
REMOVED
Select
data
setting for initializing the select component without using a html select,
dataText
,
dataValue
,
dataGroup
settings to define the
data
object text, value and group property names.
Themes
android-holo
theme pixel sizes changed to em.
wp
theme pixel sizes changed to em.
ios
theme renamed to
ios-classic
.
ios7
theme renamed to
ios
,
ios7
is still supported, but deprecated.
sense5
theme renamed to
sense
,
sense5
is still supported, but deprecated.
quickNav
setting was set to
false
.
FIXED
Integrations
FIXED
FIXED
setValue
method.
data-val
attribute present with Zepto and App Framework.
FIXED
Datetime
FIXED
Measurements
scale
setting which controls the decimal precision (
#80
).
Numpad
min
and
max
settings.
invalid
setting.
headerText
setting.
Select
group
setting is false, group labels will appear as list dividers.
returnAffix
setting for decimal numpad.
mask
setting for hiding the entered numbers (e.g. PIN code).
defaultValue
setting for decimal, time and timespan presets.
Timespan
clickpick
and
mixed
modes.
onSetDate
receives a day object with
date
and
control
(where the selection occured: 'calendar', 'date', 'time' or undefined) properties.
navigate
method to display a specific month on the calendar without setting the date.
weekDays
option to control the format of week days in the calendar header. Can be
full
,
short
or
min
.
FIXED
closeOnSelect
was true.
Listview
onNavStart
and
onNavEnd
events on hierarchical navigation.
onItemTap
event receives the event object as parameter.
FIXED
Numpad
Range
minRange
and
maxRange
settings for minimum and maximum selectable range.
onSetDate
receives a day object with
date
,
control
(where the selection occured:
calendar
,
date
,
time
or undefined), and
active
('start' or 'end') properties (
#222
).
showStartEnd
setting.
Scroller
focusOnClose
setting.
Themes
.mbsc-
to make the classes less generic and avoid conflicts with other libraries.
itemGroups
setting.
Languages
Listview
Measurements
Number
FIXED
Range
FIXED
rangeTap
is true, set end date the same as start date on selection start.
Scroller
FIXED
Select
Undo functionality.
itemGroups
setting for defining different settings (actions, stages, tap) for different list items.
altRow
setting for alternate line colors.
fixedHeader
setting for fixed group headers.
Themes
android-ics
renamed to
android-holo
.
Added: Support right to left languages with the
rtl
setting.
Added: Support for displaying icons on marked days.
FIXED
Prevent virtual keyboard popup on some devices ( #216 ).
Page scrolled to bottom in IE and FF on show ( #214 ).
Datetime
yearSuffix
,
monthSuffix
,
daySuffix
settings for improved localization (
#142
).
FIXED
placeholder
setting for the generated input field.
Listview
Added:
disabled
property for
stage
or
action
setting.
Added: support for hierarchical lists.
Range
autoCorrect
setting to disable automatic date adjustment if end is earlier than start.
Rating
Added: Font icons are being used instead of images. Custom icons can be used with the
iconFilled
and
iconEmpty
settings.
Added:
placeholder
setting for the generated input field.
Select
placeholder
setting for the generated input field.
FIXED
FIXED
Page was not scrollable from the calendar if in inline mode or calendar was larger than the screen.
If in inline mode, months swipe was broken if used with page transitions on some devices.
Month swipe worked incorrectly with min/max date set.
FIXED
Tap on items did not work correctly on Android 2.3
Tap on overlay caused bleed-through on Android 2.3
Fallback to english locales if a language is not found ( #210 ).
Animations are disabled on Android 2.3
Datetime
FIXED
parseDate and formatDate utility functions ( #209 ).
minDate and maxDate incorrect behavior ( #212 ).
Timer
FIXED
Treelist
FIXED
Mobiscroll is focused on popup to make keyboard navigation easier ( #150 ).
Using css flexible box model for wheel distribution. Falls back to table layout on devices without flex support (IE8 and IE9).
Improved Firefox compatibility.
layout setting, can be 'fixed' or 'liquid'.
multiline setting to wrap the wheel item content into multiple lines.
Languages
Listview
Measurements
FIXED
Value is constrained between min and max if set from input or with setValue method.
setValue did not work correctly if value was passed as an array ( #188 ).
Range
Select
FIXED
Themes
FIXED
Treelist
FIXED
FIXED
closeOnSelect setting caused event bleedthrough on some iOS versions.
closeOnSelect now always disables divergentDayChange setting.
FIXED
Listview
pixel units changed to em.
swipe setting accepts multiple values: true, false, 'left', 'right', or a function.
onSlideStart event.
List dividers are now supported by adding data-role="list-divider" attribute to one ore more list elements.
sortable setting can be true, false, or 'group'. If 'group', sort is allowed only inside the group defined by the list dividers.
actions setting to display a list of icons under the slided list item. If an icon is tapped, the corresponding action will be executed, otherwise the list item slides back.
FIXED
Incorrect this reference in action function if called after confirmation.
Icon slide issue when more than one listview was present on the page ( #198 ).
Range
Themes
FIXED
closeOnSelect setting didn't work correctly.
Orientationchange from landscape to portrait didn't work correctly if tabs were present.
FIXED
setDefaults method didn't work.
null value is set if all options are disabled on a wheel ( #196 ).
Datetime
Languages
Listview
FIXED
Range
Themes
FIXED
Listview
FIXED
Slide was not working in Android 4.0.x.
Confirm tap incorrectly fired onItemTap as well.
Range
FIXED
Range picker incorrect bubble positioning with start and end inputs present ( #183 ).
setValue method was not working correctly ( #189 ).
Themes
FIXED
Timespan
FIXED
Holding month and year buttons changes month/year until released.
months setting to display multiple months.
FIXED
FIXED
FIXED
Listview
onSrelease-tageChange event.
onItemTap event.
onSlideEnd event.
slideIcon setting - icon and text can be positioned to move with the slided element.
quickSwipe setting - on quick swipe (less than 300ms and 50px of movement) the first srelease-tage's action is executed.
confirm option for srelease-tage actions.
move method.
FIXED
adding item didn't work correctly on empty list.
don't remove list item inline styles on sort end.
Range
Select
Themes
scroll window if element is dragged out of viewport.
Callback functions to add and remove methods.
FIXED
Measurements
FIXED
Rating
FIXED
Themes
FIXED
sort setting for reordering lists with onSortStart, onSortStop, onSort, onChange, onUpdate events.
add and remove animations.
Themes
Timer
FIXED
Timespan
FIXED
Tab key focus works is enabled on visible month only.
Swipe was broken in Android stock browser after opening a native select or virtual keyboard.
FIXED
Listview
Range
FIXED
Themes
FIXED
start/end times for multi day events.
when a day clicked from another month changes the month and show the event bubble.
'counter' option to show number of selected items in header (if in multi-select mode).
live swipe ('liveSwipe' setting).
'showDivergentDays' setting to show/hide days from previous and next months.
'divergentDayChange' setting to enable/disable month change on divergent day selection.
week numbers are not sliding.
'context' setting ( #143 ).
generic buttons.
'minWidh', 'maxWidth' and 'fixedWidth' settings ( #112 ).
default theme was updated.
FIXED
In bubble mode positioning sometimes ended up in endless scrolling.
If another mobiscroll element was under the overlay, it opened on tap.
No more blue highlight on wheel tap in Android 4.x.
Context got lost in some cases ( #163 ).
Datetime
Range
Select
FIXED
Treelist
FIXED
Changed: Improved performance on month change.
Changed: Refresh calls are postponed until the end of month change animation.
Added: closeOnSelect setting to hide the calendar when a day is selected.
FIXED
Fixed: Incorrect width calculation when tabs set to 'auto'.
Fixed: Event list was not clipped in Firefox Mobile when scrolled.
Added: Hide set and cancel buttons if their value is false ( #134 ).
Added: closeOnOverlay setting.
Added: Live mode. If 'Set' button is not present, the value and input is updated on every change.
FIXED
Fixed: Mobiscroll was shown again after close in IE with jQuery < 1.9.
Fixed: Destroy hides scroller without animation.
Fixed: Destroy is called on the element before init preventing re-initialization bugs.
Fixed: .mobiscroll('getInst') correctly returns the instance during initialization.
Fixed: Positioning fixes on resize/orientationchange/scroll.
Fixed: Was not working correctly with fastclick.js.
Fixed: Tap was not working in IE10 with touch events ( #118 ).
Fixed: Clicking blank space selects last item ( #159 ).
Languages
Added: Swedish translation, thanks to Johan Jönsson ( https://github.com/jonixj )
Added: European Portuguese translation, thanks to Jorge Simões ( https://github.com/jorgefsimoes )
Range
Rating
FIXED
Themes
Timespan
Changed: Invalid and marked settings have now a different format. Old format is still working but it is considered deprecated and will be removed in the next major release. See documentation for details.
Added: events setting to pass any number of events. Events are shown in a context bubble. See documentation for details.
FIXED
Color
Changed: Mobiscroll value is automatically updated on input change, this way setValue method is working properly ( #79 ).
Added: Utility object exposing some useful variables, currently vendor prefix and 3d support ($.mobiscroll.util.prefix and $.mobiscroll.util.has3d).
Added: onDestroy event.
FIXED
Datetime
Changed: Invalid values have now a different format. Old format is still working but it is considered deprecated and will be removed in the next major release. See documentation for details.
Added: defaultValue setting to specify default date.
FIXED
Measurements
Range
Rating
Themes
FIXED
Timer
FIXED
Timespan
FIXED
Fixed: Tap was not removed from element on destroy.
Fixed: Mouse scroll wheel now works with Zepto and jqMobi.
Fixed: Whitespace after buttons in Firefox.
Fixed: After hide scroller was shown again in IE.
Added: Accessibility features - keyboard shortcuts and WAI-ARIA attributes for calendar.
Changed: Improved month change animation.
Color
Added: Accessibility features - keyboard shortcuts and WAI-ARIA attributes ( #48 ).
Added: Reposition scroller if scroll occurs ( #106 ).
Added: showOnTap option.
Changed: Use on/off for attaching and detaching events instead of bind/unbind/delegate.
FIXED
Fixed: Mouse scroll wheel now works with Zepto and jqMobi.
Fixed: +/- buttons were shortly hidden during animation.
Fixed: Wheel was incorrectly labeled if empty string was passed.
Languages
FIXED
Rating
FIXED
Select
FIXED
Timer
FIXED
Changed: Performance improved when calendar is updated when moving the wheels on the scroller.
Added: Month and year can be changed sepparately in the header.
Added: Month and year order in calendar header is now controlled by the 'dateOrder' setting ( #122 ).
Added: Tabs for calendar, date, and time controls. Displaying tabs can be automatical (if there is not enough space for all the controls), always on, or always off.
Added: Custom color for marked sign and event background.
Added: Different styling for marked days (colored bottom line).
FIXED
Fixed: "dayOfWeek: [0]" was not working for marked days.
Fixed: Date passed to the onDayChange event was not always correct.
Changed: Refactored method calls resulting in smaller file size.
Changed: New wheel format using arrays instead of objects to maintain the order of items. Old wheel format is still supported, but deprecated. See documentation for details.
Changed: Cleaned up css.
Changed: position method is now public.
Changed: Remove setInterval which was running to get update the actual position of a moving wheel. Position is now dynamically calculated only when needed.
FIXED
Fixed: Firefox / IE display bug, wheel groups were shown under each other, even if there was enough space ( #104 ).
Fixed: Form fields remained disabled in Firefox if page was reloaded before hiding mobiscroll ( #126 ).
Fixed: Call stopPropagation on move event to make it work correctly with iScroll (or similar libraries) ( #14 ).
Fixed: settings property is now correctly exposed (object reference is kept).
Languages
Added: Dutch translation (Thanks to Sven-Depondt - https://github.com/Sven-Depondt ).
Added: Turkish translation (Thanks to Metin Gökhan Ünal).
Added: Japanese translation (Thanks to Johnny Shields - https://github.com/johnnyshields ).
Select
FIXED
Temperature
FIXED
Themes
FIXED
FIXED
Fixed: wheel overlay was blinking during animation.
Fixed: wheel overlay sometimes did not cover the whole wheel (on Google Chrome and Android stock browser).
Fixed: showLabel setting now works for all themes.
Changed: Month change on swipe is now improved and more fluid.
Added: Text can be added to marked days.
Added: weekCounter option to display week numbers ('year' or 'month').
Added: Liquid layout in inline mode.
Added: Fullscreen layout in modal mode.
Added: Custom width and height for calendar.
FIXED
Fixed: Firefox for Android wheel content overflow ( #87 ).
Fixed: Remove html parameter from onBeforeShow event ( #111 ).
Fixed: Position mobiscroll on orientation change as well (resize is not always fired on iOS).
Languages
Measurements
FIXED
FIXED
Added: Multiple day selection functionality.
Added: Week selection functionality.
Added: onMonthChange event.
FIXED
Fixed: During month change animation a day was incorrectly highlighted.
Fixed: Month change animation was laggy on iOS5.
FIXED
Fixed: Input value was not parsed if value was set after mobiscroll init ( #88 ).
Fixed: Tap or click lock scroller in mixed mode ( #89 ).
Fixed: Click on wheel arrows ddid not animate switch ( #90 ).
Datetime
FIXED
Measurements
FIXED
Select
Changed: validation moved back to touchend instead of animation end.
Changed: setValue method now also accepts string or number, not array only ( #79 ).
Added: tap option to fire button actions on tap instead of click. Default is true ( #83 ).
FIXED
Fixed: tapping on buttons triggered form element focus underneath on Android.
Fixed: moving wheels were not stopped correctly on tap on Android > 4 (stock browser).
Fixed: initial value can be set now with setValue without filling the input ( #77 ).
FIXED
FIXED
Datetime
FIXED
FIXED
Fixed: Don't regenerate the list on every change, only if needed.
Fixed: setValue did not set the value correctly on hierarchical wheels.
Themes
Changed: Use div-s instead of ul-s and li-s
Changed: Don't scroll the wheels if validate function returns false
Added: 'btn' parameter to the onClose event, 'set' or 'cancel' is passed depending on which button triggered the close
FIXED
Measurements
Added: if step > 1, fraction wheel is not generated
Added: fraction wheel is infinite
Rating
FIXED
Fixed: parseValue returned incorrect value
Fixed: value was incorrectly set if elements were generated from a select element
Themes
FIXED
FIXED
Fixed: missing ":" in core css ( #46 )
Fixed: Don't allow to move another wheel until touchend occurs on the currently scrolled wheel
Changed: prevent collisions if core is loaded multiple times
Changed: validate and onChange event runs on scrolling animation end providing a more fluid user experience ( #36 )
Changed: user defined event handlers does not override preset event handlers
Added: onShow gets an additional valueText parameter
Added: onAnimStart event, which is fired at scrolling animation start, and receives the wheel index, animation time, and the mobiscroll instance as parameters
Added: shorthand form for presets: $('.selector').mobiscroll().date(). To add a shorthand for your own, just add the following line in your preset code: $.mobiscroll.presetShort('mypresetname')
Added: highlight selected entry on tap
FIXED
Fixed: don't do tap ahead, if moving wheel was stopped with a tap
Fixed: setValue method was not working correctly ( #43 )
Fixed: if close was canceled (onClose returned false), the value was still set
Datetime
FIXED
Rating
FIXED
Select
FIXED
Themes
Added: move the wheel to the selected value on tap
Added: selected values now have a 'dw-sel' css class
Added: support for Windows Phone 8
FIXED
Fixed: onClose received null as valueText parameter
Fixed: button flickering during animation on Chrome
Fixed: options were not correctly updated 'on the fly' (by using the 'option' method on an existing instance) - Issue 112 on Google Code
Fixed: wheel could not be stopped on the correct place if another wheel was scrolled before the animation finished
Fixed: +/- buttons didn't reappear in mixed mode, if a wheel was changed (e.g. with group select preset)
Datetime
FIXED
Select
FIXED
Themes
FIXED
Fixed: input change is triggered after the modal scroller is hidden (form controls are re-enabled)
Fixed: added a dw- prefix for animation css classes to prevent naming collision with other libraries
Fixed: the width calculation in positioning skips the width of hidden wheels
Datetime
FIXED
Select
Themes
FIXED
Added: new display properties, which controls where the scroller is positioned: 'modal', 'bubble', 'top', 'bottom'
Added: 'anchor' property to specify the anchor element for positioning, if 'display' is set to 'bubble'
Added: 'animate' property to specify predefined animations in 'modal' and 'bubble' modes, during the show/hide of the scroller: 'fade', 'flip', 'pop', 'swing', 'slidevertical', 'slidehorizontal', 'slidedown', 'slideup'
Added: 'scrollLock' setting to disable page scrolling in modal/bubble/docked display modes. Default is 'true'
Added: 'changeWheel' public method, which takes the wheelindex as argument, and regenerates that wheel based on the wheel object
Changed:'readonly' setting now takes an array too, with the boolean values for each wheel
FIXED
Datetime
Select
Themes
FIXED
Fixed: 'clickpick' mode worked the same way as 'mixed' in 2.0.2
Fixed: 'setValue' was not working correctly.
Fixed: Wheels were misaligned on Firefox with ios theme and datetime preset.
Datetime
FIXED
Fixed: Time was incorrectly parsed when missing year, month or day wheel.
Fixed: Default year value was not set, if outside of startYear and endYear.
Added: animation time is now passed to the validation event (useful, if you want an action to happen only when the wheel stops moving)
Added: wheel containers have now numbered classes: 'dwwl0', 'dwwl1', 'dwwl2' etc. to allow different styling for each wheel
FIXED
Datetime
FIXED
Fixed: 'shortYearCutoff' option was not working correctly. (With '+10' value if 2 digits years were used, 12 was converted to 1912 instead of 2012)
Fixed: if day was not present on the wheels (e.g. credit card expration), the date object defaulted to today's date, which resulted in incorrect value, if current month had more days as the selected month
Fixed: day names were incorrect, if initial validation changed the month from an invalid value to the nearest valid one
Select
Added: 'invalid' option to set certain values unselectable. This option takes precedence over the disabled options in the original html select element.
Added: 'label' option to set the label of the wheel. If not present, the label is taken from the original html select element's label, and falls back to the select element's name attribute, if the label doesn't exist
FIXED
Themes
FIXED
Fixed: HTML5 min/max attributes propagated to other scrollers
Fixed: jQuery Mobile 1.0 compatibility (Issue 95)
Fixed: Using values like "1.0", "2.0", etc. on custom wheels caused incorrect behavior because they were converted to numbers and became 1, 2, etc.
Fixed: fast scrolling caused value loss, if validation changed another wheel value with animation
Fixed: when element was created for 3d testing: document.createElement(mod) - mod was undefined
Fixed: setValue and getValue was not working correctly with the select preset
Fixed: timeWheels option did not modify the order of the wheels
FIXED
Fixed: setValue / setDate methods did not animate the scroller if time was specified
Fixed: In some cases date validation scrolled the day wheel to empty value
Fixed: Datetime preset's setDate and getDate methods were using last created instance's resources
Fixed: Select options were reordered, if values were numbers
Fixed: When using option method to change options on the fly, preset and theme defaults overrode user settings
Added: invalid option for the datetime preset to set dates unselectable. There are three properties to specify dates, all can be used separate or combined. dates is be an array of dates to disable exact dates on the scroller. daysOfWeek is an array with values from 0 to 6, daysOfMonth is an array which accepts numbers (e.g. every month's 2nd day) or a string in 'x/y' format (e.g. 12/24 means every year's 24th 12 is disabled). A sample configuration: invalid: { dates: [new Date(2012,5,4), new Date(2012,5,13)], daysOfWeek: [0, 6], daysOfMonth: ['5/1', '12/24', '12/25'] }
Added: The select preset automatically disables elements on the scroller if they were disabled in the original html select element
FIXED
Fixed: In clickpick mode minus button had plus button behavior
Fixed: In inline mode getValue always returned the initial values
Fixed: min/max attributes were incorrectly parsed when using HTML5 time input
Changed: wheels option no defaults to empty array ([]) instead of null
Changed: valid scroller items now have the class "dw-v" instead of "valid"
Changed: in 2.0.0-rc1 days not in month were styled as disabled, like items out of the min/max range. From now on days not in month now have the class "dw-h" which, by default has a hidden style in css.
Added: headerText can accept a function, which must return a string
Added: Day of week can be displayed on the scrollers. Use 'D' (short names) or 'DD' (long names) in the dateOrder options. Sample dateOrder value: 'mmD ddy' will produce '05', 'Thu 03', '2012' on the day, month and year wheels.
Added: separator option used by the datetime preset to specify the separator between date and time parts. Default is ' '.
Added: readonly option, if true, the scroller appears, but cannot be scrolled. Useful if you want to display a nice clock.
Added: timeWheels option to show, hide, and format the time related wheels on the scroller. Default is 'hhiiA'. For the hour wheel use 'h', 'hh', 'H', 'HH', for minutes wheel 'i' or 'ii', for seconds wheel 's' or 'ss', for am/pm wheel 'A' or 'a'. E.g. for 24 hour time format with seconds and leading zeroes use 'HHiiss'.
Added: support for HTML5 date/datetime/datetime-local/month/time input types. If mobiscroll is attached to such an input, the format is forced to follow standards specifications. In the popup header the value is formatted according to the date and timeformat specified by the user.
FIXED
Fixed: Inline mode bug with jQuery Mobile, if it was not on the initial page
Fixed: Select preset was not working in inline mode
REMOVED
Removed: ampm option is now removed, see the new timeWheels option instead
Removed: seconds option is now removed, see the new timeWheels option instead
Changed: The visibility of year, month and day wheels is now controlled by dateOrder option, e.g. use 'mmyy' to display month and year wheels only
Added: display option, which can be 'inline' or 'modal' (default)
Added: headerText option to specify a custom string which appears in the popup header. If the string contains '{value}' substring, it is replaced with the formatted value of the scroller. If headerText is set to false , the header is hidden.
Added: onShow event
Added: 'select' preset to enhance a regular HTML select. The original select is hidden, and a dummy input is visible instead. The value of the select is maintained by the preset
Added: minDate and maxDate options to specify a range which can be selected. Works for datetime as well.
FIXED
Fixed: Android ICS Light skin fix (small +/- appeared above/under arrows)
Fixed: onSelect and onCancel events are now called after the popup is closed and all the form elements on the page are re-enabled, making possible to submit the form in these events.
Fixed: In custom events this refers to the original HTML DOM element instead of the settings object
REMOVED
Removed: beforeShow event is now removed
Removed: showValue option is now removed, use the headerText option instead
Removed: btnClass option is now removed, button style can be changed by adding css rules to the .dwb class
Added: Android ICS ('android-ics') and Android ICS Light ('android-ics light') skins
FIXED
Fixed: Tap & hold changes the value on a 300ms interval instead of 200ms (for slower devices)
Fixed: When using custom wheels, parseValue function defaults to first value on the wheel, if cannot parse the input value to a valid wheel value
Fixed: Mouse scroll wheel works now with jQuery 1.7+
Fixed: Don't always parse input value on show, only if changed
Fixed: Time was incorrectly parsed, if there was no date
Added: if the onClose handler returns false, close is now prevented.
Added: onCancel event handler.
FIXED
Fixed: Destroy didn't set correctly the original readonly state of the input element.
Fixed: Input element is not set to readonly if showOnFocus is false
Fixed: Disabled state of form inputs was not correctly reset after hiding the scroller.
Fixed: Don't show scroller if disabled and show is called programmatically.
Added: mode option, with two possible values: 'scroller' and 'clickpick', where 'scroller' is the default behaviour, while 'clickpick' renders + and - buttons for each wheel (Android style).
Added: new and updated skins: Android, Sense UI, iOS. Set the theme option to 'android', 'sense-ui' and 'ios'
'Scroller' mode is still not working in Firefox Mobile and IE on WP7
When using 'Clickpick' mode, very fast taps causes page zoom on HTC Android.
FIXED
--legacy-peer-deps
flag in case of
no-npm
install.
.yarnrc.yml
.
FIXED
--legacy-peer-deps
flag that will be transmitted to internally executed npm install command.
FIXED
FIXED
FIXED
FIXED
FIXED
FIXED
--version
flag.
--ionic-version=4
flag.
FIXED
FIXED
style.scss
file even if the app didn't have scss config.
FIXED
yarn
detection was improved, it didn't detect correctly if the yarn is installed on system.
rxjs-compat
package detection on osx.
FIXED
UnhandledPromiseRejectionWarning
node warnings.