A plugin that renders appointments.
Use the following statement to import a plugin with embedded theme components:
import { Appointments } from '@devexpress/dx-react-scheduler-material-ui';You can import the themeless plugin if you want to use custom components:
import { Appointments } from '@devexpress/dx-react-scheduler';| Name | Type | Default | Description |
|---|---|---|---|
| appointmentComponent | ComponentType<Appointments.AppointmentProps> | A component that renders an appointment. | |
| appointmentContentComponent | ComponentType<Appointments.AppointmentContentProps> | A component that renders the appointment content. | |
| splitIndicatorComponent | ComponentType<Appointments.SplitIndicatorProps> | A component that renders an element which indicates the appointment is divided. | |
| recurringIconComponent | ComponentType<object> | A component that renders an icon for recurring appointments. | |
| containerComponent | ComponentType<Appointments.ContainerProps> | A component that renders a container for the appointment. |
Properties passed to a component that renders an appointment.
| Field | Type | Description |
|---|---|---|
| children | ReactNode | A React node used to render the appointment content. |
| data | object | An object that specifies the appointment data. |
| draggable | boolean | Specifies whether the appointment is draggable. |
| onClick? | (e: object) => void | A function that handles a click on the appointment. |
| onDoubleClick? | (e: object) => void | A function that handles a double click on the appointment. |
| isShaded? | boolean | Indicates whether the appointment is shaded. |
Properties passed to a component that renders the appointment content.
| Field | Type | Description |
|---|---|---|
| children | ReactNode | A React node used to render the appointment's content. |
| data | object | An object that represents appointment data. |
| formatDate | FormatterFn | A function that formats dates according to the locale. |
| durationType | string | The appointment's duration type: "short" (the appointment occupies half of a timetable cell or less), "middle" (occupies the entire cell), or "long" (occupies more than one cell). |
| recurringIconComponent | ComponentType<object> | A component that renders an icon for recurring appointments. |
Properties passed to a component that renders an element which indicates the appointment is divided.
| Field | Type | Description |
|---|---|---|
| position | 'start' | 'end' | Specifies whether the element is rendered at the start or end of the divided appointment. |
| appointmentType | 'vertical' | 'horizontal' | Specifies whether the appointment is vertical or horizontal. |
Properties passed to a component that renders a container for the appointment.
| Field | Type | Description |
|---|---|---|
| style | object | An object that configures the appointment's geometry and position. |
| Name | Properties | Description |
|---|---|---|
| Appointments.Appointment | Appointments.AppointmentProps | A component that renders an appointment. |
| Appointments.AppointmentContent | Appointments.AppointmentContentProps | A component that renders the appointment content. |
| Appointments.SplitIndicator | Appointments.SplitIndicatorProps | A component that renders an element which indicates the appointment is divided. |
| Appointments.Container | Appointments.ContainerProps | A component that renders a container for the appointment. |
Additional properties are added to the component's root element.