DevExtreme React Scheduler - Beta Release

A lot has happened with the React Scheduler since we blogged about the CTP release back in March 2019. Many thanks to those of you who tested the component and sent us feedback!

A beta version of the Scheduler is now available. Since the CTP announcement we have implemented several additional features, so read on for details.

Appointment Form Enhancements

The Appointment Form has been redesigned completely. It includes editing controls for recurring appointments.

Documentation for this feature is available.

It is possible to add custom fields to the Appointment Form by extending its layout. You can add any elements you need and take advantage of existing editor types.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17

const BasicLayout = (/* ... */) => {
  // ...
  return (
    <AppointmentForm.BasicLayout
      appointmentData={appointmentData}
      onFieldChange={onFieldChange}
      {...restProps}
    >
      <AppointmentForm.Label text="Custom Field" id="titleLabel" />
      <AppointmentForm.TextEditor
        value={appointmentData.customField}
        onValueChange={onCustomFieldChange}
        placeholder="Custom field"
      />
    </AppointmentForm.BasicLayout>
  );
};

Click here to see a demo of Appointment Form editing features.

Edit Recurring Appointments

The EditRecurrenceMenu Plugin implements a choice of editing modes for recurring appointments. This feature is fully automatic, you can see in the animation below how the prompt appears after a drag & drop change.

A demo for this feature is available.

Today Button

The new TodayButton Plugin shows a button in the Scheduler toolbar to navigate to the current date.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

const View = ({ data }) => (
  <Scheduler data={data}>
    <ViewState />
    <MonthView />
    <Toolbar />
    <DateNavigator />
    <TodayButton />
    <Appointments />
  </Scheduler>
);

Click here for a demo of the TodayButton

Localization

The Scheduler supports a simple and extensible localization API. This guide documents the required steps.

Minor Changes

Component Height

A simple but important addition: the Scheduler can automatically resize to its container, or adhere to a specific size you configure. Simply set the height property as described in the documentation.

Optimized Rendering

We tested and optimized rendering performance of the Scheduler. The main approach we applied was component and function memoization. As a result, the update performance was improved by 10-15% in tests running against our Scheduler demos.

Editing and Resizing by Drag & Drop

Please see our post DevExtreme React Scheduler - Drag&Drop Editing to learn more about this new feature.

Future Plans

We continue our work on the Scheduler, focusing on numerous usability enhancements as well as new features. You can take part in our planning by accessing our GitHub repository, for example click here for the list of customer requests. As always, your feedback is much appreciated even more so in the final stages before a full release.

Free DevExpress Products - Get Your Copy Today