The AppointmentTooltip plugin allows you to display information about an appointment in a tooltip.
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';| 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. |
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. |
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. |
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. |
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. |
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. |
| 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.