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
constBasicLayout= (/* ... */) => {
// ...
return (
<AppointmentForm.BasicLayout
appointmentData={appointmentData}
onFieldChange={onFieldChange}
{...restProps}
>
<AppointmentForm.Labeltext="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
constView= ({ data }) => (
<Schedulerdata={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.