DevExtreme JavaScript Scheduler - UI, Time Zone, and Performance Enhancements (v21.1)

In this short post, I’ll quickly describe important Scheduler-related features we introduced in our last release cycle. Should you have any questions on these features, feel free to post your comments below.

Time Zone Support

We are often asked about time zone support, and I wanted to quickly remind you that our JavaScript Scheduler control (for React, Vue, Angular, and jQuery) allows you to specify individual appointment time zones in data objects. Through the component’s allowTimeZoneEditing property, you can allow end-users to specify/modify appointment time zones within our Scheduler's edit form.

jQuery

$("#scheduler").dxScheduler({
  editing: {
    allowTimeZoneEditing: true
  }
});

Angular

<dx-scheduler>
  <dxo-editing
    [allowTimeZoneEditing]="true">
  </dxo-editing>
</dx-scheduler>

Vue

<DxScheduler>
  <DxEditing
    :allow-time-zone-editing="true"
  />
</DxScheduler>

React

<Scheduler>
  <Editing
    allowTimeZoneEditing={true}
  />
</Scheduler>

The following image illustrates how allowTimeZoneEditing affects the appearance of our Scheduler component’s edit form.  

View Demo

Agenda View Redesign

As you may already know, we redesigned our Scheduler component’s Agenda view earlier this year. The Agenda view displays appointments within a compact list and does not render a time scale. We’d love to hear your thoughts on our redesign and whether you currently use this view within your app. Please post your comments below...

View Demo

Horizontal Virtual Scrolling

Thanks to virtual scrolling, our Scheduler component only loads visible appointments into the DOM. This helps reduce load time and allows you to optimize overall app performance.

To enable virtual scrolling, simply set the Scheduler’s scrolling.mode property to "virtual":

jQuery

$("#scheduler").dxScheduler({
  scrolling: {
    mode: "virtual"
  }
});

Angular

<dx-scheduler>
  <dxo-scrolling
    mode="virtual">
  </dxo-scrolling>
</dx-scheduler>

Vue

<DxScheduler>
  <DxScrolling
    mode="virtual"
  />
</DxScheduler>

React

<Scheduler>
  <Scrolling
    mode="virtual"
  />
</Scheduler>

View Demo

Drag & Drop Enhancements

We recently changed the logic used to position appointments after drag & drop events. Previously, a dropped appointment occupied a timetable cell under the mouse pointer. With v21.1, our Scheduler uses the top of the appointment rectangle to define its position. The following animation demonstrates the impact of this change:

Tell Us What You Think

Should you have questions/comments about these changes, feel free to post your thoughts below or contact us via the DevExpress Support Center.