AppointmentTooltip Plugin Reference

The AppointmentTooltip plugin allows you to display information about an appointment in a tooltip.

Import

Use the following statement to import a plugin with embedded theme components:

import { AppointmentTooltip } from '@devexpress/dx-react-scheduler-material-ui';

You can import the themeless plugin if you want to use custom components:

import { AppointmentTooltip } from '@devexpress/dx-react-scheduler';

User reference

Dependencies

Properties

Name Type Default Description
showOpenButton? boolean false Specifies the Open button’s visibility.
showCloseButton? boolean false Specifies the Close button’s visibility.
showDeleteButton? boolean false Specifies the Delete button’s visibility.
visible? boolean   Specifies the tooltip’s visibility.
appointmentMeta? AppointmentMeta   The appointment’s displayed metadata.
onVisibilityChange? (visible: boolean) => void   Handles the tooltip’s visibility chages.
onAppointmentMetaChange? (appointmentMeta: AppointmentMeta) => void   Handles the meta data changes.
layoutComponent ComponentType<AppointmentTooltip.LayoutProps>   A component that renders the tooltip layout.
headerComponent ComponentType<AppointmentTooltip.HeaderProps>   A component that renders the header.
contentComponent ComponentType<AppointmentTooltip.ContentProps>   A component that renders the tooltip content.
commandButtonComponent ComponentType<AppointmentTooltip.CommandButtonProps>   A component that renders a command button.

Interfaces

AppointmentMeta

An appointment’s meta data object.

Field Type Description
target ReactInstance A React component instance or a DOM element that is used to position the tooltip.
data AppointmentModel The appointment’s displayed metadata.

AppointmentTooltip.LayoutProps

Describes properties passed to a component that renders a tooltip layout.

Field Type Description
showOpenButton boolean Specifies the Open button’s visibility.
showCloseButton boolean Specifies the Close button’s visibility.
showDeleteButton boolean Specifies the Delete button’s visibility.
commandButtonIds Array<string> A command button’s identifier list.
onOpenButtonClick? () => void An event raised when the Open button is clicked. The event handler should open the appointment form.
onDeleteButtonClick? () => void An event raised when the Open button is clicked. The event handler should delete an appointment.
appointmentMeta? AppointmentMeta The appointment’s displayed metadata.
visible? boolean Specifies the tooltip’s visibility.
onHide? () => void An event that hides the tooltip.
headerComponent ComponentType<AppointmentTooltip.HeaderProps> A component that renders the tooltip header.
contentComponent ComponentType<AppointmentTooltip.ContentProps> A component that renders the tooltip content.
commandButtonComponent ComponentType<AppointmentTooltip.CommandButtonProps> A component that renders a command button.

AppointmentTooltip.HeaderProps

Describes properties passed to a component that renders the tooltip header.

Field Type Description
appointmentData? AppointmentModel The appointment’s displayed metadata.
children? ReactNode A React node used to render the tooltip header.

AppointmentTooltip.ContentProps

Describes properties passed to a component that renders the tooltip content.

Field Type Description
appointmentData? AppointmentModel The appointment’s displayed metadata.
children? ReactNode A React node used to render the tooltip content.

AppointmentTooltip.CommandButtonProps

Describes properties passed to a component that renders a command button.

Field Type Description
id? open | delete | close The command identifier.
onExecute? () => void An event that executes the command.

Plugin Components

Name Properties Description
AppointmentTooltip.Layout ComponentType<AppointmentTooltip.LayoutProps> A component that renders the tooltip layout.
AppointmentTooltip.Header ComponentType<AppointmentTooltip.HeaderProps> A component that renders the tooltip header.
AppointmentTooltip.Content ComponentType<AppointmentTooltip.ContentProps> A component that renders the tooltip content.
AppointmentTooltip.CommandButton ComponentType<AppointmentTooltip.CommandButtonProps> A component that renders a command button.

Additional properties are added to a component’s root element.