New Release: Mobiscroll 5.32 & 5.32.1 & 5.32.2

Announcements
1

What’s New

Happy to introduce updates and new features to the event calendar, agenda, date & time, and the Vue components along with accessibility fixes and additions.

Render events by the exact time

The primary job of the event calendar is to show events, while in combination with the agenda it can be used for navigation as well. Events can be rendered as labels or as a list in a pop-over. Label rendering has several different options ranging from controlling the number of labels all the way to templating, however, it always rendered the labels as full-width events filling the whole day cell of the calendar. With the latest version, we are introducing the eventDisplay property that can either be fill or exact where the latter will position and render the event according to its start and end times. This is super handy in situations where the start and end of an event is relevant in the context of the calendar view. A good example is a booking or reservation calendar with rendering that takes the actual check-in and check-out time into account.


Reservation calendar with exact start/end time rendering

Check how this interactive example of a reservation calendar shows booked days from various sources.

Show empty days in the agenda

The job of the Agenda view is to provide a list of events that are scheduled for a custom range, grouped by days. The list of events can be customized through templating and custom renderers, along with completely empty states for event creation however, day headers without events were not shown at all. Starting with 5.32 it is possible to enable empty day header rendering through the showEmptyDays property of the agenda configuration.


Showing empty day headers in Agenda

Explore the empty day option for the agenda.

Agenda day header templating

Along with the ability to show empty day headers within the agenda, with templating the headers it is now possible to not only show additional information besides the date but also to provide contextual actions like adding new events.


Day header templating in the Agenda

Check out how you can add a new event button to the agenda day headers.

Timeline drag & drop UX improvements

We have improved on the event drag & drop experience especially when resources are grouped and rendered as a hierarchy. For flat lists, moving events between resources is not a problem. Even if all resource groups are expanded, it’s easy to move an event to any resource. The problem occurs only in situations if someone wants to move an event to a resource that is hidden under a collapsed group. With the event picked up, if you hover over a group that has event creation turned off and is collapsed, the group will automatically expand after a couple of milliseconds.


Automatically expanding resource groups during event drag & drop

See it in action and give things a try.

Typescript types to Vue props

Types landed for the Vue props, making the Vue version of Mobiscroll that much easier to use. This reduces development time errors and brings auto-suggest and built-in documentation right into your IDE.

2700×1122 181 KB

Contextual documentation loaded development time within the IDE

2700×1122 125 KB

Auto-suggest thanks to type definitions

Resource objects within lifecycle events

We have added the relevant resource objects and references to various lifecycle events if views where built-in resource management is supported. Events that are triggered for both the Scheduler and Timeline view now receive the resources as arguments which is useful in situations where you would be interested in where the event is coming from and going to or just simply the full resource object that the event is tied to. You won’t have to manually look up the resource based on an ID and in some cases write recursive functions to do it.

Various date & time bugfixes

The Date & time component received various fixes that piled up with time. These handle new issues and edge cases that present themselves to customers.

Accessibility fixes for the calendars

With every new iteration, we are making our components more accessible. Fixed some issues with VoiceOver and TalkBack and added some new aria labels where relevant.

Popup demos

Not lastly, we are happy to introduce the new demo page section for the popup. It should help you understand basic usage and also show examples of how it complements the event calendar and date picker components.

What’s next

We are preparing the last big release of the year with great features for resources, like reorder, drag & drop along with load on scroll, zoom, and more new capabilities for the timeline.

Read the full blog post

MOBISCROLL 5.32

All Components

NEW

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

FIXED

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

Agenda

NEW

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

FIXED

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

Datepicker

FIXED

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

Eventcalendar

NEW

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

FIXED

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

Forms

FIXED

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

Scheduler

NEW

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

FIXED

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

Select

FIXED

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

Timeline

NEW

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

FIXED

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

MOBISCROLL 5.32.1

Agenda

FIXED

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

Datepicker

FIXED

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

Eventcalendar

FIXED

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

Popup

NEW

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

FIXED

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

Scheduler

FIXED

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

Select

FIXED

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

Timeline

FIXED

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

MOBISCROLL 5.32.2

Agenda

FIXED

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

Datepicker

FIXED

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

Eventcalendar

FIXED

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

Forms

FIXED

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

Scheduler

FIXED

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

Select

FIXED

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

Timeline

FIXED

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

For the full changelog please visit our release history.

PS. You will find an upgrade guide for moving from Mobiscroll 4 to Mobiscroll 5.