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:
To enable editing, follow the steps below:
EditingStateplugin and handle its
onCommitChangesevent to commit edits to the data storage.
EditRecurrenceMenuplugin if recurring appointments are allowed. Otherwise, add the
AppointmentFormplugin so that users can edit appointment data.
In uncontrolled mode, specify the initial editing state using the following
defaultEditingAppointment- 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:
onEditingAppointmentChange- 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.
Add the DragDropProvider plugin to enable users to drag and drop appointments. Use its
allowResize properties to disallow dragging and resizing specific appointments. You can also add the
EditRecurrenceMenu plugin to allow users to specify how recurrent appointments are edited.
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.
To validate user input or prevent user actions, handle the
For example, you can copy an appointment if it was drag-and-dropped while a specific key was pressed (the
shift key is used in the demo below). To detect the drop event, check the
changed parameter's value in the
To add and remove editors to/from the appointment form or change its layout, use components the
AppointmentForm plugin provides. They include editors for Boolean values, text, and dates, multi-choice editors, and several layout components.
The following demo shows how to customize the appointment form. A custom
TextEditor with a
Label is added to the form's
BasicLayout and a predefined
multilineTextEditor is removed from it.
To enable the confirmation dialog, add the ConfirmationDialog plugin. The dialog pops up when a user attempts to delete an appointment or discard edits made to it. If the dialog should not appear in these cases, set the
ignoreCancel property to
If users should not edit appointments, import only the AppointmentForm plugin and enable its
Users can double-click timetable cells to add appointments. You should remove the double-click handler to disable this functionality.
Users can delete an appointment using the Delete button on the AppointmentForm or in the AppointmentTooltip. Disable this button on the form and hide it from the tooltip if users should not delete appointments.
To disable the Delete button on the
AppointmentForm, find the commandButton with ID
deleteButton and set its
disabled property to
To hide the Delete button from the
AppointmentTooltip, disable the
Users can use the
AppointmentForm to update appointments. Switch the
AppointmentForm to read-only mode to disable this functionality. However, now users cannot add or delete appointments either, but these features can be enabled individually.
To enable adding, create a flag that indicates whether an appointment is being added and make the
AppointmentForm read-only depending on this flag.
To enable deleting, find the commandButton with ID
deleteButton on the
AppointmentForm and set its
disabled property to
Users can also update appointments via drag-and-drop. Remove the DragDropProvider (if you use it) to disable this functionality.
The example below demonstrates the described use-cases: