Happy to announce external drag & drop for the event calendar, colored day and time cells, new stepper component and various other improvements.

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.

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.

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.

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.

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 Angular • React • jQuery • Javascript

Check out the Event calendar for Angular • React • jQuery • Javascript

Give Mobiscroll 5.2 a go and download the latest version. Let us know what you think.

Illustration by Ouch.pics.