New release: Mobiscroll 5.0 Beta 5

Announcements
1

What’s New

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.

2148×1408 74.9 KB

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. So again this is not based on screen sizes, it’s an actual check that happens behind the scenes to determine if it’s a touch screen or not.

1642×984 76.9 KB

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.

Read the full blog post

MOBISCROLL 5.0-beta5

All Components

NEW

  • We added support for auto theme and auto theme variant (light/dark) for custom themes as well.
  • We added a feature to automatically decide between mobile and desktop UI based on the platform, using the touchUi: 'auto' option.

Agenda

FIXED

  • We fixed a UI bug, that cut off the tail of some characters of the event text in the agenda in iOS theme.

Datepicker

NEW

  • We made it possible to specify a css class for calendar marks.
  • We made it possible to specify a css class for calendar day cells.
  • We expanded the colors option with the highlight and background properties.
  • We added keyboard navigation support for the Start/End labels in the case of range selection.
  • We improved on the date range selection experience. When the start/end labels are shown in the case of the calendar, the active label will cycle from start to end only for the first time. Then if you want to adjust the selected range, it won’t start over the entire selection.

FIXED

  • We fixed a UI bug on the calendar control, that let the calendar days to be seen under the year and month selection during swiping in iOS theme.
  • We fixed the select counter on the calendar to show the correct number of selected days.
  • We fixed a bug, that prevented the use of the predefined header components (like the prev, next and today button) of the calendar, when used in custom header templates in angular.
  • We improved on the Calendar controls today button. In the case of single date selection, the today button will not only navigate to today’s date, but will also select it.
  • We fixed the border radius of the range start and end labels when hovered in the case of the material theme.
  • We fixed a UI bug in the range highlight styling, that showed up when the selection was the start or end of the daylight saving period.
  • We fixed the input handling logic of the datepicker. When selecting a range and using two inputs, the inputs now become read only as they should.
  • We fixed a bug that prevented the picker to show up, when selecting range with two inputs in react strict mode.
  • We fixed a bug that caused an error when using the datepicker directive in angular

Eventcalendar

NEW

  • We made it possible to specify a css class for calendar marks.
  • We made it possible to specify a css class for calendar day cells.
  • We expanded the colors option with the highlight and background properties.
  • We added the actionableEvents options to enable / disable the actionable styling (pointer cursor, hover and active states, ripple effect) of event list items.
  • Added support for updating, resizing and creating events using drag & drop.

FIXED

  • We fixed the width of the calendar labels that span across days, when the week numbers are also shown.
  • We fixed a UI bug, that caused the calendar multi-day labels to be a few pixels wider, when using the windows theme.
  • Display event start and end times inside the event popover for the Material theme as well.
  • Always display year and month picker as a popup instead embedding it in the calendar body.
  • Don’t move the calendar view if a day from another month is clicked.

All Components

NEW

  • Added support for updating, resizing and creating events using drag & drop.

For the full changelog please visit our release history. The beta is available to customers with an active Event Calendar or Framework and Complete license. Get in touch if you are interested.

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

Download the latest version now