New Release: Mobiscroll 5.14 & 5.14.1

Announcements
1

What’s New

I am happy to introduce 5.14 which addresses pain points in the event calendar and date pickers. The event calendar comes with new ways to render event labels, week numbers got introduced to the timeline, days can now be hidden in both the scheduler and timeline and the date picker inputs get keyboard typing support on desktop. Let’s dig in.

Accommodate any number of labels in the event calendar

Event calendars are part of our lives in both a personal and work context. These calendars should not just be pretty, but improve our lives and help us solve tasks faster, make better progress. A pretty common question arose in data heavy use-cases: how to see all events without the need to click on a “show more…” button. Due to how the calendar view was laid out, there was no easy solution. It was possible to increase the height of the calendar so that every row grew equally.

This had a couple of drawbacks:

  • What is the max number of events we need to support? How do we know it, what if it changes? – Turns out it’s never a fixed number.
  • What happens if only some days have a lot of events and others don’t? – There will be a lot of unused space in some of the calendar rows.

We solved this design problem by adding variable row height support. This lets you set up the labels property under the view.calendar option to render all labels or render up to a specific number of labels. The rows of the calendar will be of variable height and it will use as much of the available space as possible. Besides this new feature you are still able to have equal row heights if necessary.

Play around with this live example and see it for yourself.


Dynamic row heigh and showing labels

Week numbers in the timeline

DWeek numbers can now be shown out of the box in the timeline view of the event calendar. Enable it through the weekNumbers property of the view.timeline option.

See how week numbers are rendered in this live example.

https://demo.mobiscroll.com/timeline/daily-weekly-monthly-yearly-timeline#https://mcusercontent.com/03c1c3fac1ec96e655be9d223/images/0edd2d56-b2c7-5dd8-ffd2-688033824b80.gif(image larger than 4 MB)

Week numbers in timeline

Work week, hidden days in the timeline and scheduler

Hiding weekends is useful in a lot of calendaring scenarios. Most businesses don’t operate on weekends so hiding Saturdays and Sundays makes the calendar more focused. This was possible for single week views, but was not an option for continuous, multi-day, multi-week, month or year views. Specific days, like weekends can still be disabled and greyed out, but starting with 5.14 you can set a startDay and endDay that repeats every week and defines which days are visible.

View, try and download this live example.


Work week and hidden days

Monthly schedule

We are introducing month views to the scheduler. This supports resources, start-end dates and everything that you’d expect and know from day and week views.

Check out this live example of a monthly scheduler.

https://demo.mobiscroll.com/scheduler/display-multiple-days-weeks#https://mcusercontent.com/03c1c3fac1ec96e655be9d223/images/cd80e499-8764-1917-d269-51a7b3f91333.gif(image larger than 4 MB)

Monthly schedule

Typing dates

One question that we heard over and over again is how to let people type into the date picker? Sometimes typing in a date is much faster than picking a value from either a dropdown or a calendar. The problem was that whenever someone clicked on an input, the picker opened and the input became read-only. Starting with 5.14, we removed this constraint for the desktop date pickers that enables typing into the input. We encourage letting people know what the expected format is, but basic parsing happens behind the scenes so that the date can be read into the picker and validated against the min/max & invalid/valid rules.

Check out any of the date picker examples.


Typing dates

What’s next

We have a couple of new tools, integration plugins with third party calendars in store for you. Integrating and syncing with Google calendar and Outlook calendars will be available out of the box. We are also looking into performance improvements in data-heavy use-cases like working with hundreds of resources over longer periods of time.

Read the full blog post

MOBISCROLL 5.14

Datepicker

NEW

  • We added the inputTyping option that can be used to allow typing into the input field in desktop mode even if the date picker is shown. This is on by default and can be turned off by setting the inputTyping option to false .

Eventcalendar

NEW

  • We added the originEvent property to the onEventCreate and onEventCreateFailed lifecycle events when working with recurring events.
  • The newEvent and oldEventOccurrence properties got added to the onEventUpdate and onEventUpdateFailed lifecycle events that can come in handy when working with recurring events.
  • We added the mbsc-readonly-event css class to the fixed events so that custom styling can be applied to these read-only events if necessary.
  • We added dynamic row height support that expands the height of the rows depending on the number of events. This feature can be turned on by setting labels: 'all', or labels: 5 property of the view option. This makes displaying all events or up to x events possible.

FIXED

  • We fixed a bug that occurred for certain time zones and broke the event label rendering.

Forms

FIXED

  • We fixed the notification css style loading that didn’t take the included themes in account.
  • We improved the accessibility by adding the aria-disabled attribute on disabled buttons.

Scheduler

NEW

  • We added the mbsc-readonly-event css class to the fixed events so that custom styling can be applied to these read-only events if necessary.
  • We added support for monthly schedule views.
  • We added support for defining the visible days through the startDay and endDay properties. Days outside of the the start-end range will be hidden.

FIXED

  • We fixed a bug that made some one day events (with start date only) become two day events on drag.
  • We fixed a number of rendering issues in IE11.

Timeline

NEW

  • We added the mbsc-readonly-event css class to the fixed events so that custom styling can be applied to these read-only events if necessary.
  • We added support for defining the visible days through the startDay and endDay properties. Days outside of the the start-end range will be hidden.
  • We added support for week numbers in the header. Can be turned on using the weekNumbers property of the view option.

FIXED

  • We fixed a rendering bug that happened with overlapping events when event listing mode was turned on dynamically.
  • We fixed a number of rendering issues for IE11.

MOBISCROLL 5.14.1

Eventcalendar

FIXED

  • We fixed the header navigation picker styling for the Windows theme (broken in 5.14.0).

Agenda

FIXED

  • We fixed the header navigation picker styling for the Windows theme (broken in 5.14.0).

Forms

FIXED

  • We fixed an issue where the button was not initialized correctly on span or a elements in jQuery/Javascript.

Scheduler

FIXED

  • We fixed the header navigation picker styling for the Windows theme (broken in 5.14.0).

Select

FIXED

  • We fixed an issue, where the users were able to type into the select input (broken in 5.14.0).

Timeline

FIXED

  • We fixed the header navigation picker styling for the Windows theme (broken in 5.14.0).

For the full changelog please visit our release history.

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