A plugin that renders the All Day Panel.
Use the following statement to import a plugin with embedded theme components:
import { AllDayPanel } from '@devexpress/dx-react-grid-material-ui';If you want to use custom components, you can import the themeless plugin:
import { AllDayPanel } from '@devexpress/dx-react-grid';| Name | Type | Default | Description |
|---|---|---|---|
| layoutComponent | ComponentType<AllDayPanel.LayoutProps> | A component that renders an All Day panel layout. | |
| cellComponent | ComponentType<AllDayPanel.CellProps> | A component that renders an All Day panel cell. | |
| rowComponent | ComponentType<AllDayPanel.RowProps> | A component that renders an All Day panel row. | |
| titleCellComponent | ComponentType<AllDayPanel.TitleCellProps> | A component that renders a title cell. | |
| appointmentLayerComponent | ComponentType<AllDayPanel.AppointmentLayerProps> | A component that renders the appointment layer. | |
| containerComponent | ComponentType<AllDayPanel.ContainerProps> | A component that renders an All Day panel container. | |
| messages? | AllDayPanel.LocalizationMessages | An object that specifies localization messages. |
Describes a cell data configuration object.
| Field | Type | Description |
|---|---|---|
| startDate | Date | The cell's start time. |
| endDate | Date | The cell's end time. |
| groupingInfo? | Array<Group> | Information about the cell's grouping. |
| groupOrientation? | GroupOrientation | The orientation of groups: Vertical or Horizontal. |
| endOfGroup? | boolean | true if this cell is last in its group. |
Describes properties passed to a component that renders an All Day panel layout.
| Field | Type | Description |
|---|---|---|
| cellsData | Array<AllDayPanel.CellData> | Cells' meta data. |
| formatDate | FormatterFn | A function that formats dates according to the locale. |
| setCellElementsMeta | (cellElementsMeta: CellElementsMeta) => void | A function that formats dates according to the locale. |
| cellComponent | ComponentType<AllDayPanel.CellProps> | A component that renders an All Day panel cell. |
| rowComponent | ComponentType<AllDayPanel.RowProps> | A component that renders an All Day panel row. |
Describes properties passed to a component that renders an All Day panel cell.
| Field | Type | Description |
|---|---|---|
| startDate | Date | The cell's start time. |
| endDate | Date | The cell's end time. |
| groupingInfo? | Array<Group> | Information about the cell's grouping. |
| groupOrientation? | GroupOrientation | The orientation of groups: Vertical or Horizontal. |
| endOfGroup? | boolean | true if this cell is last in its group. |
| onDoubleClick? | (e: object) => void | A function that handles a double click on the cell. |
Describes properties passed to a component that renders an All Day panel row.
| Field | Type | Description |
|---|---|---|
| children? | ReactNode | A React node used to render the row content. |
Describes properties passed to a component that renders a title cell.
| Field | Type | Description |
|---|---|---|
| getMessage | (messageKey: string) => string | Returns a localization message by the message key. |
Describes properties passed to a component that renders the appointment layer.
| Field | Type | Description |
|---|---|---|
| children? | ReactNode | A React node used to render the appointment layer content. |
Describes properties passed to a component that renders an All Day panel container.
| Field | Type | Description |
|---|---|---|
| children | ReactNode | A React node used to render the All Day panel container content. |
| Field | Type | Default | Description |
|---|---|---|---|
| allDay? | string | 'All Day' | The All Day panel's title. |
| Name | Properties | Description |
|---|---|---|
| AllDayPanel.Layout | AllDayPanel.LayoutProps | A component that renders an All Day panel layout. |
| AllDayPanel.Cell | AllDayPanel.CellProps | A component that renders an All Day panel cell. |
| AllDayPanel.Row | AllDayPanel.RowProps | A component that renders an All Day panel row. |
| AllDayPanel.TitleCell | AllDayPanel.TitleCellProps | A component that renders a title cell. |
| AllDayPanel.AppointmentLayer | AllDayPanel.AppointmentLayerProps | A component that renders the appointment layer. |
| AllDayPanel.Container | AllDayPanel.ContainerProps | A component that renders an All Day panel container. |
Additional properties are added to the component's root element.