New Release: Mobiscroll 5.27 & 5.27.1& 5.27.2& 5.27.3

Announcements
1

What’s New

Happy to introduce the public beta of Mobiscroll for Vue, quarter resolution to the timeline view, along with easier validation control, new event connection types, and drag & drop improvements

Mobiscroll for Vue

The public beta is out for a couple of weeks now, all v5 demos are available for the Vue version and a new documentation is implemented. The beta label is coming off shortly as well.

Avoid double booking

When it comes to scheduling resources, overlapping events are not allowed in a lot of cases. More than just one event happening at the same time is still a thing and we not removing that, but we are introducing the eventOverlap option that is applicable to the instance, resources or individual events.

Prior to having this option it was necessary to rely on the onEventCreate and onEventUpdate lifecycle events and manually check and handle the overlap there.

Play around with this example to understand how you can control overlap validation or check out this great example for making doctor’s appointments.


Prevent event overlap

Timeline event connections

We had event connection for some time now - since they were introduced in version 5.19, with some limitations. We only supported finish-to-start connections which went from the end of one event and connected to the beginning of another event.

We are introducing four connection types: finish-to-start, start-to-finish, start-to-start and finish-to-finish.

Check out how you can control the event connections in this example.


Updated event connections

Timeline Q1, Q2, Q3, Q4

We are adding horizontal quarter resolution to the timeline view. Use it for dividing the view into quarters.

Templating of the quarter header and footers is new as well and comes with this release.

Check out how to customize the header and footer in case of any timeline resolution and learn how to configure quarter resolution for your view.


Timeline quarter view

Drag & drop control and improvements

We have added dragInTime support for external events. In times of scheduled but unassigned events listed externally of the calendar might be already fixed. When assigning such events it is better to just fix them in time in the calendar and let users only move them between resources rather than retroactively modifying them.

Time slots inherited the same drag & drop controls that the resources have. This means if eventDragBetweenSlots is true, the events won’t be draggable between time slots. Eg. if someone wants for move an assignment and keep it in a specific shift, they can do that now without the need to write a custom validation logic in the lifecycle events.

Agenda empty state

The empty state template was introduced in version 5.26. Being able to create a custom template/render function for the views that don’t have events is useful for showing CTAs, images and text.

Check out this example and customize the agenda empty state through the renderAgendaEmpty and the agendaEmptyTemplate.

What’s next

We are working on a couple of powerful features, like being able to fix certain rows at the top of the timeline, better control over handling many overlapping events along with new tools for a nice zoom feature.

Read the full blog post

MOBISCROLL 5.27

Agenda

FIXED

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

Datepicker

FIXED

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

Eventcalendar

NEW

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

Scheduler

NEW

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

Select

FIXED

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

Timeline

NEW

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

FIXED

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

MOBISCROLL 5.27.1

Agenda

FIXED

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

Datepicker

FIXED

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

Scheduler

FIXED

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

Select

FIXED

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

Timeline

FIXED

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

MOBISCROLL 5.27.2

Datepicker

FIXED

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

Eventcalendar

FIXED

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

Timeline

FIXED

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

MOBISCROLL 5.27.3

All Components

FIXED

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

Datepicker

FIXED

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

Eventcalendar

FIXED

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

Forms

FIXED

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

Timeline

FIXED

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

For the full changelog please visit our release history.

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