We’re proud to announce the release of the fifth beta which introduces drag & drop for the event calendar and scheduler, more advanced styling for marked and colored days plus automatic switching between mobile & desktop layout for the picker components.

Drag & drop

We’ve been working on drag & drop throughout the summer but needed a bit more time than expected. We wanted to make it right so with a little delay it is finally here. Shipping three individually configurable options, you can customize the D&D experience by controlling:

1. Drag to create with the dragToCreate option
2. Resize events with the dragToResize option
3. Move events with the dragToMove option

See the scheduler in action and learn how to configure drag & drop.

See the event calendar in action and learn how to configure drag & drop.

Tapping into the lifecycle on drag & drop

D&D comes with accompanying lifecycle events so that validation for double booking or custom logic for event creation – like showing a new event or edit modal – can be implemented as needed.

• Use the onEventCreate and onEventCreated events that run just before the event is created and right after it is created.
• With the onEventUpdate and onEventUpdated events you can run custom logic before and on event update.

CRUD operations

A fully functional crud demo is available for every framework – Angular (calendar/scheduler), React (calendar/scheduler), Javascript (calendar/scheduler) and jQuery (calendar/scheduler). It shows off the new features of the Event calendar and Scheduler besides providing a comprehensive overview of what can be built.

Add new events by clicking or dragging to create. It will open a dialog for the event details which is dynamically rendered as a modal on desktop and as a full-page sheet on mobile.

Editing is implemented with the help of the same dialog as for the new events. Resizing, moving events act as updating the relevant properties of the event.

Marked & colored days

We are introducing customizable cell background and highlight colors across all calendar based components (calendar, range and event calendar). Besides being able to control the background and highlight colors for every day we are introducing CSS class properties to the colors and marked options. Use the markedCssClass to customize the marked shapes on an individual level and the cellCssClass to implement something like a “half-day” styling that comes in handy in booking applications.

Dynamic mobile and desktop layout

We recently added automatic light and dark mode switching. Along the automatic theme selection and now the mobile and desktop layout switch, these three “auto-pilot” options make working mobiscroll even simpler. Leave the touchUi option as 'auto' or set it true for touch interaction and false for pointer interaction.

touchUi: 'auto' works by detecting if mobiscroll is loaded on a touch enabled screen or if it’s a non-touch screen and sets the layout accordingly. Not based on screen sizes, an actual check happens behind the scenes to determine if it is a touch screen or not.

Starting with beta 5, the default will be 'auto', which of course can be manually overridden if necessary.

We’ve also improved the examples and demo page so that the layout can be just as simply switched as the locale or theme. This is applicable to the relevant components, like the date & time, calendar and range pickers.

How stable is the beta, when will the final be released?

We’ve been getting a lot of questions regarding the stability of the current beta. With these new features only available in Mobiscroll 5 we understand that more and more people would like to get their hands on it as soon as possible. We also understand that it is preferable to go with the v5 API from the get go instead of V4. While the choice is still yours, I am hoping to make it easier with the following points:

• While building a beta we are constantly making trade-offs between refining a concept and pushing it out as soon as we feel confident about it. Our goal is to get it into the hands of actual customers as soon as possible so that they can get the value right away.
• A beta for Mobiscroll is a version of the product that could be limited in scope, but it should adhere to the quality standards that we are known for. That can be translated to something like – we’re usually not shipping things we are not proud of.
• While we are set out to build the best event calendar and scheduler we possibly can, we’re not planning to label it as stable only when we have finished everything. We’ll add new features, improvements and are going to fix bugs even after the first stable release.
• That being said, a beta is still a beta. That means, it could have rough edges or edge cases that are not properly handled. These could be things that we know of and things that we don’t know about yet.

With drag & drop released, we’re hoping that more and more people will give this a go and the components can be tested not only in isolated environments by us but in real-world scenarios and we can clean up those rough edges as we go.

Before going final (or stable) with the Event calendar we’ll probably have at least one more beta release, but the plan is to get there in the next couple of weeks.

Illustration by Ouch.pics.