New release: Mobiscroll 5.2

What’s New

The external drag & drop opens up new interaction models, the colored backgrounds give meaning to “empty spaces”, new lifecycle events provide means for creating advanced functionality that pushes the event calendar and scheduler further. Covering more and more ground with every release, the event calendar is inching towards being the goto solution for calendaring and scheduling for web and mobile.

Dragging external events onto the calendar

Events can be created and edited in a couple different ways. Whether you should enable event creation with a button , by clicking and dragging on the calendar or by dragging from a list of presets highly depends on what you are building. Our goal is not an event calendar that has all the bells and whistles, instead we are adding capabilities so that you can build the appropriate user experience that makes the most sense in your application . With that in mind we are introducing external events, event presets that you can pick up and drag-drop over the event calendar and scheduler.

Scheduler with external drag & drop

This gives users a quick way of spawning new events or distributing them from a list of pre-defined tasks. Think of external events as containers that can look as you need them to, they can show as much information as needed and new events can be spawned from them. Each draggable component can have dragData associated with it, which represents a skeleton event with title , color , length and any custom field. The start time will be determined by the drop position.

Validation & time-off rejection for scheduler

New events are validated against disabled times and days just as new events that are created with clickToCreate and dragToCreate . Use the lifecycle events to pop a dialog on drop and let users fine-tune the new event, add notes and set fields that need entry by a human.

Event calendar with external drag & drop

Colored backgrounds

We have added the ability to slice and color the cell backgrounds of the event calendar and the time-grid of the scheduler. In both cases color coding specific ranges gives meaning to users in context. These can mean “busy hours” , “over scheduled” or whatever that people using the components will understand.

Event calendar with colored background

Scheduler with colored background

New lifecycle events

Knowing what events are triggered when is key to adding advanced functionality to any component. We are introducing four new events to the list. onCellDoubleClick , onCellRightClick , onEventDoubleClick and onEventRightClick was added to the event calendar, scheduler and agenda. Use these new events to add more interactivity to your calendars. Trigger context menus, custom actions and so on. A fully interactive example with an event log can be seen for the event calendar, scheduler and agenda.

New stepper component

We have added the stepper component to v5. Use it in building various forms, dialogs, reservation systems, appointment booking and everywhere where incrementing a value step-by-step, click-by-click makes sense.

Quick links for the Scheduler and Event Calendar

Check out the Scheduler for AngularReactjQueryJavascript

Check out the Event calendar for AngularReactjQueryJavascript

Read the full blog post

MOBISCROLL 5.2

All Components

FIXED

  • We updated the internal virtual dom library (Preact) used for the jQuery and plain Javascript components, which fixes a few rendering issues.

Agenda

NEW

  • We added the onEventDoubleClick and onEventRightClick lifecycle events, that enable the creation of custom actions when events are right clicked and double clicked.

FIXED

  • We added the missing dateFormatLong option to the Angular component.
  • We fixed a typo in the Italian day name translation.

Datepicker

FIXED

  • We fixed a typo in the Italian day name translation.
  • We fixed the cellCssClass property of the marked and colored options that was not working if labels were also used.

Eventcalendar

NEW

  • We added the onCellDoubleClick , onCellRightClick , onEventDoubleClick and onEventRightClick lifecycle events, that enable the creation of custom actions when cells and events are right clicked and double clicked.
  • We added support for external drag & drop by using the draggable component and the externalDrop option.

FIXED

  • We added the missing dateFormatLong option to the Angular component.
  • We fixed a typo in the Italian day name translation.
  • We fixed the label display and drag & drop on months/weeks with daylight saving changes.
  • We fixed the label drag & drop to correctly keep the original event length during drag.
  • We fixed an issue where event creation was not prevented outside of min and max dates.

Forms

NEW

  • We added the stepper component.

Page

FIXED

  • We fixed the jQuery and plain javascript components to work on elments other than div as well.

Popup

FIXED

  • We fixed the positioning of anchored popups on devices with a notch on their display.
  • We fixed the popup buttons in anchored and bottom mode on Firefox within the iOS theme.

Scheduler

NEW

  • We improved the display of the events to indicate better if the event continues on previous/next days, or before/after grid hours.
  • We added the colors option for setting the background of the time grid and day cells.
  • We added the onCellDoubleClick , onCellRightClick , onEventDoubleClick and onEventRightClick lifecycle events, that enable the creation of custom actions when cells and events are right clicked and double clicked.
  • We added support for external drag & drop by using the draggable component and the externalDrop option.

FIXED

  • We added the missing dateFormatLong option to the Angular component.
  • We fixed a typo in the Italian day name translation.
  • We fixed the label display and drag & drop on months/weeks with daylight saving changes.
  • We’ve removed the automatic scroll-to-top behavior on page change. The time grid will keep it’s previous positions and won’t automatically scroll up when the day or week is changed.

For the full changelog please visit our release history.

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