New release: 5.13 with event calendar print & PDF export, multi day, month & year views, custom event tooltips
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.
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.
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.
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.
Take a look at the following examples
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 the 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.
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.
For a full list of changes check out the release notes and download the latest version.
Illustration by Icons 8 from Ouch!