New Release: Mobiscroll 5.22 & 5.22.1

Announcements
1

What’s New

Happy to introduce new ways to add rich data to the timeline view, more control over the row heights and other UX improvements.

Showing more content through sidebars, headers and footers

The timeline is used for scheduling, planning and solving complex logistical problems. Contextual data and means to interact with it is important for a productive and great UX. With that in mind we are introducing five new sections to the timeline view that can be customized through templating and render functions.

This includes the opposite end of the resource rows as a sidebar 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, aggregates – just in the right place that is most accessible for users.

It is possible to make these sections dynamic, just as you would with the custom resource templates or day header templates.


Timeline with sidebar, header and footer

Play around with this example and see how you can show content in more places on the timeline view.

The current time indicator and highlighted days

We have added the option currentTimeIndicator 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.


Hiding the current time indicator in the Scheduler

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.


Timeline with current date highlighted

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.


Better control over the Timeline row heights

This should give you the necessary tools to fine-tune the look and feel of the timeline rows.

What’s next

We are working towards a beta for our Vue components. Let us know you are interested and if you would like to hear about it. Besides that more tools are coming for handling complex planning requirements with the timeline.

Read the full blog post

MOBISCROLL 5.22

Datepicker

FIXED

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

Eventcalendar

NEW

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

FIXED

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

Forms

FIXED

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

Scheduler

NEW

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

FIXED

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

Timeline

NEW

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

FIXED

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

MOBISCROLL 5.22.1

Eventcalendar

FIXED

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

Forms

FIXED

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

Scheduler

FIXED

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

Timeline

FIXED

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

For the full changelog please visit our release history.

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