The React Scheduler allows users to create, update, and delete appointments. The editing state contains information about pending changes made to an appointment and is managed by the
EditingState plugin. Once a user clicks Save or Delete, the plugin fires the
onCommitChanges event and clears the editing state.
The following plugins implement this feature:
The user can edit appointments as follows:
Add the plugins listed above to the Scheduler and handle the
onCommitChanges event to commit edits to the data storage.
In uncontrolled mode, specify the initial editing state via the following
defaultEditingAppointmentId- the ID of the appointment being edited
defaultAddedAppointment- the appointment being added
defaultAppointmentChanges- changes made to the appointment
In controlled mode, specify the following
EditingState properties in pairs to set a state value and handle the event when it changes:
onEditingAppointmentIdChange- the ID of the appointment being edited
onAddedAppointmentChange- the appointment being added
onAppointmentChangesChange- changes made to the appointment
You can also use the
onAddedAppointmentChange event to initialize a new appointment’s properties with default values.
To validate user input or prevent user actions, handle the
For example, you can show a confirmation dialog before an appointment is removed. To detect an attempt to remove an appointment, check the
deleted parameter’s value in the
Add the DragDropProvider plugin to enable users to drag and drop appointments. Use its
allowResize properties to disallow dragging and resizing specific appointments.
The DragDropProvider plugin also allows you to customize the appointment being dragged (via the
draftAppointmentComponent property) and its copy displayed in its previous location (via
sourceAppointmentComponent). In addition, it provides the
resizeComponent property that allows you to customize the handles used to resize appointments.