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.
recurringIconComponent ComponentType<object> A component that renders an icon that indicates a recurring appointment.

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> The command button's identifier list.
formatDate FormatterFn A function that formats dates according to the locale.
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 Delete button is clicked. The event handler should delete an appointment.
appointmentMeta? AppointmentMeta The appointment's displayed metadata.
appointmentResources Array<ValidResourceInstance> The appointment's resource instances.
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.
recurringIconComponent ComponentType<object> A component that renders an icon that indicates a recurring appointment.

AppointmentTooltip.HeaderProps

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

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> The command button's identifier list.
appointmentData? AppointmentModel The appointment's displayed metadata.
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 Delete button is clicked. The event handler should delete an appointment.
onHide? () => void An event raised when the tooltip hides.
commandButtonComponent ComponentType<AppointmentTooltip.CommandButtonProps> A component that renders a command button.
children? ReactNode A React node that renders custom elements in 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.
appointmentResources? Array<ValidResourceInstance> The appointment's resource instances.
formatDate FormatterFn A function that formats dates according to the locale.
recurringIconComponent ComponentType<object> A component that renders an icon that indicates a recurring appointment.
children? ReactNode A React node that renders custom elements in the tooltip.

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 AppointmentTooltip.LayoutProps A component that renders the tooltip layout.
AppointmentTooltip.Header AppointmentTooltip.HeaderProps A component that renders the tooltip header.
AppointmentTooltip.Content AppointmentTooltip.ContentProps A component that renders the tooltip content.
AppointmentTooltip.CommandButton AppointmentTooltip.CommandButtonProps A component that renders a command button.

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