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:
- Drag to create with the
- Resize events with the
- Move events with the
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
onEventCreatedevents that run just before the event is created and right after it is created.
- With the
onEventUpdatedevents you can run custom logic before and on event update.
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
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.