New Release: Mobiscroll 5.20 & 5.20.1

Announcements
1

What’s New

Excited to add more customization to Mobiscroll through cell and date-time range background, invalids, events and timeline day headers. Besides that we are happy to show you how you can simply and elegantly add search to your event calendar views.

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.


Custom CSS class for colors and invalids

Take a look at how you can do it in case of the scheduler and timeline view.

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.

Customizing 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, totals or just color the background based on the number of events happening on that day.


Custom date header template

Take a look how to alter the day header in real-time or show project totals like total revenue made.

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. We have 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.


UX improvement

Implementing event search

Being able to look for events is a common requirement that comes up in a lot of situations. Search can be implemented a couple of different ways, but one of the most frequently seen is having an API endpoint that expects the search term and returns the relevant events. This can be as simple as matching a substring agains the title of the event or as complex as needed. The actual even lookup is external to event calendar and happens on the server-side, but the tools to present the results in an elegant way are all Mobiscroll.


Search with popover

We have built a couple of demos that either use a two pane layout where the search input and results are rendered to the left-side of the calendar or a simple search input embedded into the calendar header. In both cases we are using an agenda instance to present the results either inline or in a pop-over/dropdown. Both solutions look great and are efficient, elegant and can be simply implemented.


Search in a sidebar

Check out the calendar view with pop-over search and with search in a sidebar, or give the scheduler, agenda and timelinedemos a look.

What’s next

We are working on making Mobiscroll ready for Vue along with features that will help in planning long-term projects with the timeline view.

Read the full blog post

MOBISCROLL 5.20

All Components

FIXED

  • We fixed the React Draggable component used for external drag & drop, which if rendered conditionally was not working in React 18 strict mode.
  • We fixed the responsive option to work with React SSR (server side rendering).

Agenda

NEW

  • We added the cssClass property to the event model that can be used to pass custom CSS classes on an event to event basis. Useful for quick styling adjustments of the event container.

Eventcalendar

NEW

  • We added the cssClass property to the event model that can be used to pass custom CSS classes on an event to event basis. Useful for quick styling adjustments of the event container.

Forms

FIXED

  • We fixed the notifications, which resulted in an error, when called from useEffect or componentDidMound in React.

Scheduler

NEW

  • We added the cssClass property to the event model that can be used to pass custom CSS classes on an event to event basis. Useful for quick styling adjustments of the event container.
  • We added the cssClass property to colors that can be used to customize the background of cells and time ranges.
  • We added the cssClass property to the invalid object for passing custom CSS classes on case by case basis for customizing the background and label.

FIXED

  • We fixed a bug where the resource id was not passed to the dayContentTemplate in Angular.

Select

FIXED

  • We fixed an issue, where the initially selected value was lost, if used on a native HTML select.

Timeline

NEW

  • We added the cssClass property to the event model that can be used to pass custom CSS classes on an event to event basis. Useful for quick styling adjustments of the event container.
  • We added the cssClass property to colors that can be used to customize the background of cells and time ranges.
  • We added the cssClass property to the invalid object for passing custom CSS classes on case by case basis for customizing the background and label.
  • We added the renderDay and dayTemplate` options for custom day content rendering in the timeline header.
  • We improved the event positioning on interaction (drag/resize/create) where the modified event will remain on the same horizontal track when moved around instead of jumping to the top of the row.

FIXED

  • We fixed the vertical virtual scroll where virtual pages were loaded too late, causing an empty area being visible at the bottom in some cases.

MOBISCROLL 5.20.1

Datepicker

FIXED

  • We fixed an issue where specifying an initial value for the time picker resulted in an infinite loop in Angular.
  • We fixed an issue where the hover states of calendar days got stuck in Angular, when closing and reopening the picker.

Eventcalendar

FIXED

  • We fixed an issue where navigating the view with custom buttons was not animated.

Forms

FIXED

  • We fixed the typescript type of the segmented value to accept any type, not just string.

Scheduler

FIXED

  • We fixed an error when an external drag was started and one of the receiving calendars was hidden.
  • We fixed an issue with drag & drop on touch devices, where tapping on the event after dropping it on an invalid range resulted in an error.

Timeline

FIXED

  • We fixed an error when an external drag was started and one of the receiving calendars was hidden.
  • We fixed the event positioning on drag, when the event was jumping to the top row when it was assigned to multiple resources.

For release notes please visit our release history.

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

Download the latest version now