React Scheduler - Appointment Tooltip

An appointment tooltip displays information about the appointment and contains buttons that manage the appointment.

The following plugin is required:

Basic Usage

Import the plugin listed above. A user can click on an appointment to show its tooltip.

Uncontrolled Mode

The following demo shows how to use the appointment tooltip in uncontrolled mode:

Controlled Mode

In controlled mode, the state of AppointmentTooltips should be controlled externally. To control their visibility, pass the visible property and onVisibilityChange event to the plugin. To manage the displayed data, pass the appointmentMeta property and onAppointmentMetaChange event.

Customize the Appearance

To customize the tooltip’s appearance, specify the xxxComponent properties (xxx is the name of the element you want to customize). For example, the headerComponent and contentComponent properties are used to customize the tooltip’s header and content, as shown in the code below. Refer to the AppointmentTooltip API reference page for a list of all xxxComponent properties.