New Release: Mobiscroll 5.13

Announcements
1

What’s New

Happy to introduce Mobiscroll 5.13 with printing and pdf export support for the event calendar, multiple day, week, month and year views, custom event tooltips, v5 forms cleanup and demos. The team worked hard on this last major release of the year, let’s see what it all means for you.

Optimized for printing

The event calendar is designed for usage on touch and non touch devices. In some cases however people would like to print it on paper or share it in a PDF. With this latest release, 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 a print method that can be called directly on the event calendar instance without the need for dedicated print views.
Give it a try, print it on paper or simply export a PDF through your browser print dialog.


Printing the scheduler

Multiple day, week, month and year views

Day, week and month views are great, however many use-cases require a more dynamic approach. In case of holiday home booking, the manager might be interested in the next two weeks starting from today rather than a division of two weeks starting from Monday through Sunday. Besides the rolling views with a custom range (eg. 5 day views, 14 day views, 4 week views …) rendering longer ranges - like quarterly or yearly overviews - is possible now.

To solve this we are adding multiple day and week views to the scheduler, and multi- day, week, month and year views to the timeline. This can be configured within the specific view option with the possibility for custom reference dates for the range start. Controlled through refDate your custom length ranges can start from the first of the year, month, today or any custom date.

https://demo.mobiscroll.com/timeline/display-multiple-days-weeks-months#https://mcusercontent.com/03c1c3fac1ec96e655be9d223/images/993fa575-3c1a-a83a-d8e5-43216840c12a.gif(image larger than 4 MB)

Timeline year view

Timeline with variable row height and equal event height

Before the current version resource rows of the timeline were distributed equally, no matter if there were no events or multiple events. That way we ended up with equal row heights but events of variable heights. We are introducing a new rowHeight option that can be either variable or equal. With the new variable row height being the default, the vertical space is better used out of the box and the whole view is aesthetically more pleasing. Events are rendered with equal heights and the rows grow/shrink as needed.


Before 5.13 & now with equal rowHeight


In 5.13 with variable rowHeight

Check out the timeline with this new & improved row and event rendering.

Custom event tooltips

When someone hovers over an event with their mouse on desktop, a native tooltip is shown with the event name and start/end times. This is a good default and covers most use cases. For whenever more or something entirely different is needed we’ve added a couple of handy tools that enable you to use 3rd party tooltips, like material-tooltip, show a fully custom popup or just simply override the default text in the native tooltip.

Custom event tooltip is available with:


Custom event tooltip

Updated demos and examples for v5 forms

Form fields were available before 5.13. We went through every component and build new examples, fixed a couple of bugs along the way and updated the documentation for you. Check it out and use the components to build great looking forms for event add/edit screens and not just.

Picking event colors

The color picker was missing from the event calendar add/edit dialogs so we added one. While version 4 of Mobiscroll comes with a pretty customizable and flexible color picker component, we decided to create a simple and lightweight picker in the CRUD demos. It won’t come with all the bells and whistles of the v4 component, but does the job and can be further customized. Check out the updated demo here.


Setting an event color

What’s next

It’s been a busy 2021, but we are not slowing down. We have a bunch of improvements, new features lined up. In addition to that, we’re building new tools that will help you solve calendaring and scheduling even better in the future.

Read the full blog post

MOBISCROLL 5.13

Agenda

NEW

  • We added print optimized styling for PDF export and printing.
  • We added the tooltip property to the event data that overrides the default event tooltip text.
  • We added the showEventTooltip option which can be used to hide the native event tooltip.
  • We added means to set the reference date for views with custom length ranges. Through the new refDate option, ranges can start from the any date, like the first day of the year or dynamically from the current day.

FIXED

  • We fixed the quick navigation label that was wrong for year selection (#493).
  • We fixed the weekly recurring event logic that was wrong in case of repeat intervals greater than one.

Datepicker

FIXED

  • We fixed the quick navigation label that was wrong for year selection (#493).
  • We fixed the time validation, which did not disable some values when there were multiple invalid entries for the same day.
  • We fixed the timegrid scroll to the selected value, which was not working properly in Angular with animations module loaded.
  • We fixed an issue where the manually entered value was not picked up on the first edit.

Eventcalendar

NEW

  • We added print optimized styling for PDF export and printing.
  • We added the tooltip property to the event data that overrides the default event tooltip text.
  • We added the showEventTooltip option which can be used to hide the native event tooltip.
  • We added means to set the reference date for views with custom length ranges. Through the new refDate option, ranges can start from the any date, like the first day of the year or dynamically from the current day.

FIXED

  • We fixed the quick navigation label that was wrong for year selection (#493).
  • We fixed the weekly recurring event logic that was wrong in case of repeat intervals greater than one.

Forms

FIXED

  • We fixed textarea sizing in case of programmaticall value set in jQuery and JS.
  • We fixed the password input padding with toggle icons.
  • We fixed the placeholder text for the file input in Angular.

Scheduler

NEW

  • We added startDay and endDay support for day view, weekdays outside of start and end days will be skipped upon navigation.
  • We added support for multiple day and week views. Set the number of consecutive days or weeks through the size property to the view option.
  • We added print optimized styling for PDF export and printing.
  • We added the tooltip property to the event data that overrides the default event tooltip text.
  • We added the showEventTooltip option which can be used to hide the native event tooltip.
  • We added means to set the reference date for views with custom length ranges. Through the new refDate option, ranges can start from the any date, like the first day of the year or dynamically from the current day.

FIXED

  • We fixed the quick navigation label that was wrong for year selection (#493).
  • We fixed the weekly recurring event logic that was wrong in case of repeat intervals greater than one.

Select

FIXED

  • We fixed textarea sizing in case of programmaticall value set in jQuery and JS.
  • We fixed the password input padding with toggle icons.
  • We fixed the placeholder text for the file input in Angular.

Timeline

NEW

  • We added dynamic row height support that expands the height of the resource rows depending on the number of events. This is on by default and can be changed in the rowHeight option by setting it from ‘variable’ to ‘equal’.
  • We added startDay and endDay support for day view, weekdays outside of start and end days will be skipped upon navigation.
  • We added support for multiple day, week and month views. Set the number of consecutive days or weeks through the size property to the view option. Year views are supported through multiples of months.
  • We added print optimized styling for PDF export and printing.
  • We added the tooltip property to the event data that overrides the default event tooltip text.
  • We added the showEventTooltip option which can be used to hide the native event tooltip.
  • We added means to set the reference date for views with custom length ranges. Through the new refDate option, ranges can start from the any date, like the first day of the year or dynamically from the current day.

FIXED

  • We fixed the quick navigation label that was wrong for year selection (#493).
  • We fixed the weekly recurring event logic that was wrong in case of repeat intervals greater than one.
  • We fixed the resource header template to make the click/tap events run correctly.

For the full changelog please visit our release history.

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