React Scheduler - Appointments

The Scheduler supports one-time and all-day appointments.

One-Time Appointments

One-time appointments are appointments with specified start and end date and time. They are shown in the following demo. To display one-time appointments on a view, add the Appointments plugin.

Zero-Time Appointments

Zero-time appointments do not have an end time and date. They represent events without duration (reminders, arrival/departure time, and so on).

To add a zero-time appointment, specify the startDate in the AppointmentModel, leave the endDate field unspecified, and add the Appointments plugin.

All-Day Appointments

All-day appointments last for the entire day or multiple days. They are displayed only in the MonthView. To display them in the day or week views, use the AllDayPanel plugin.

Recurring Appointments

A recurring appointment is an appointment that is repeated after a specified time. An object that defines such an appointment should contain the rRule field whose value has the iCalendar RRULE format. To exclude specific dates from recurrence, specify the exceptions in the exDate field. Its values should have the iCalendar EXDATE format.

Customize the Appearance

The Appointments plugin allows you to customize the appearance of appointments. Override the plugin’s appointmentComponent with a custom component. Use the AppointmentProps when you implement the custom component. The following example shows how to use this approach to add custom styles to appointments: