DevExtreme – Scheduler Adaptability & UX Enhancements (v19.1)

Some of you might remember that we started DevExtreme as a toolkit for hybrid mobile development. With the rise of several popular client-side frameworks - like Angular, Vue and React – our focus shifted a bit as you can read here.

However, this doesn’t mean that our controls can’t be used on mobile devices. In fact, all of these controls have really nice adaptive / responsive features which make them look good on any device.

With the v19.1 release, we have introduced some really cool enhancements on our DevExtreme Scheduler Control specifically for smaller screens.

Larger overflow indicators

The first thing we did was to increase the size of so called “overflow indicators”. These dots indicate that there are appointments on a specific date. By making these indicators bigger, touch gestures will be easier for your end-user.

Drawer with appointment details

The overflow indicators do indicate that there are appointments on a certain date, but they don’t show specific details like starting time, duration and title. On a desktop environment when you hover with your mouse over one of these indicators, a tooltip with the appointments will be shown. On a mobile device however, this can't be done since there is no mouse and as a result no hover state.

Instead, the control will open a drawer from one of the edges of the screen which will display the appointment details.

You can then decide to open one of the appointments or to even delete the appointment by touching the recycle bin.

Fullscreen appointment details

Once you click on one of the appointments in the drawer to check its details, a full screen details view appears instead of a modal popup to better accommodate the screen including a native date picker instead of a dropdown.

Adaptive layout for appointment details view

As I mentioned earlier, the DevExtreme controls have some really cool Adaptive / Responsive features out of the box but we managed to improve one of those in the Scheduler control when looked at on a desktop device.

The appointment details popup now has a fully adaptive layout. You can see this when you change the recurrence type of appointment. The height of the popup will change dynamically because some recurrence type have some specific additional settings

Another example is that the number of columns with controls depends on the width of the screen and even the position of the labels can change from left to top.

And what about this new floating action button?

You might have been reading the blog post about this new floating action button. Can it be used as well in combination with the Scheduler control?

Well, yes! And it's quite simple to implement this behavior by using the showAppointmentPopup method.
Check your favorite coding example by clicking here

How can you use these features?

These adaptive features are already available in v19.1 so once you've upgraded your project to v19.1 and you set the newly introduced property adaptivityEnabled, you can experience this in your own apps.

What do you think?

Let me know what you think of these enhancements and also if you think something is missing by replying on this post or drop me an e-mail.
Alternative you can leave a comment on GitHub.

Free DevExpress Products - Get Your Copy Today