A plugin that renders Scheduler data for a month. This plugin arranges appointments from left to right. An appointment's size depends on its duration in days. However, it occupies the entire day cell if an appointment lasts only for several hours or minutes. The time scale and all-day panel are not available in this view.
Use the following statement to import a plugin with embedded theme components:
import { MonthView } from '@devexpress/dx-react-scheduler-material-ui';You can import the themeless plugin if you want to use custom components:
import { MonthView } from '@devexpress/dx-react-scheduler';none
| Name | Type | Default | Description |
|---|---|---|---|
| name? | string | Month |
The view's unique identifier. Required if you use several MonthView plugins. |
| displayName? | string | The view's name used in UI plugins. The default value is equal to name. |
|
| intervalCount? | number | 1 | Multiplies the default view interval. |
| layoutComponent | ComponentType<MonthView.LayoutProps> | A component that renders a month view layout. | |
| dayScaleLayoutComponent | ComponentType<MonthView.DayScaleLayoutProps> | A component that renders a day scale layout. | |
| dayScaleCellComponent | ComponentType<MonthView.DayScaleCellProps> | A component that renders a day scale cell. | |
| dayScaleRowComponent | ComponentType<MonthView.RowProps> | A component that renders a day scale row. | |
| dayScaleEmptyCellComponent | ComponentType<MonthView.DayScaleEmptyCellProps> | A component that renders an empty cell on the day scale. | |
| timeTableLayoutComponent | ComponentType<MonthView.TimeTableLayoutProps> | A component that renders a timetable layout. | |
| timeTableCellComponent | ComponentType<MonthView.TimeTableCellProps> | A component that renders a timetable cell. | |
| timeTableRowComponent | ComponentType<MonthView.RowProps> | A component that renders a timetable row. | |
| appointmentLayerComponent | ComponentType<MonthView.AppointmentLayerProps> | A component that renders the appointment layer. |
Describes a cell data configuration object.
| Field | Type | Description |
|---|---|---|
| startDate | Date | Specifies the cell's start time. |
| endDate | Date | Specifies the cell's end time. |
| otherMonth | boolean | Indicates whether the cell's date is not in the current month. |
| today | boolean | Indicates whether the cell's date is today. |
| groupingInfo? | Array<Group> | Information about the cell's grouping. |
| endOfGroup? | boolean | true if this cell is last in its group. |
Describes properties passed to a component that renders a month view layout.
| Field | Type | Description |
|---|---|---|
| setScrollingStrategy | (scrollingStrategy: ScrollingStrategy) => void | A scrollingStrategy callback. |
| dayScaleComponent | ComponentType<MonthView.DayScaleLayoutProps> | A component that renders a day scale layout. |
| timeTableComponent | ComponentType<MonthView.TimeTableLayoutProps> | A component that renders a timetable layout. |
Describes properties passed to a component that renders a day scale layout.
| Field | Type | Description |
|---|---|---|
| cellsData | Array<Array<MonthView.CellData>> | Specifies the cells meta data. |
| cellComponent | ComponentType<MonthView.DayScaleCellProps> | A component that renders a day scale cell. |
| rowComponent | ComponentType<MonthView.RowProps> | A component that renders a day scale row. |
| groupingPanelComponent? | ComponentType<GroupingPanel.HorizontalLayoutProps> | A component that renders the grouping panel. |
| groupedByDate? | boolean | Indicates whether grouping by date is enabled. Takes its value from the groupByDate property of the GroupingState plugin. |
| formatDate | FormatterFn | A function that formats dates according to the set locale. |
Describes properties passed to a component that renders a day scale cell.
| Field | Type | Description |
|---|---|---|
| startDate | Date | Specifies the cell's start time. |
| endDate? | Date | Specifies the cell's end time. |
| today? | boolean | Indicates whether the cell's date is today. |
| formatDate | FormatterFn | A function that formats dates according to the set locale. |
| groupingInfo? | Array<Group> | Information about the cell's grouping. |
| endOfGroup? | boolean | true if this cell is last in its group. |
Describes properties passed to a component that renders an empty cell on the day scale.
| Field | Type | Description |
|---|---|---|
| children? | ReactNode | A React node used to render the cell's content. |
Describes properties passed to a component that renders a timetable layout.
| Field | Type | Description |
|---|---|---|
| cellsData | Array<Array<MonthView.CellData>> | Specifies the cells meta data. |
| cellComponent | ComponentType<MonthView.TimeTableCellProps> | A component that renders a timetable cell. |
| rowComponent | ComponentType<MonthView.RowProps> | A component that renders a timetable row. |
| formatDate | FormatterFn | A function that formats dates according to the set locale. |
Describes properties passed to a component that renders a timetable cell.
| Field | Type | Description |
|---|---|---|
| startDate | Date | Specifies the cell's start time. |
| endDate? | Date | Specifies the cell's end time. |
| otherMonth? | boolean | Indicates whether the cell's date is not in the current month. |
| today? | boolean | Indicates whether the cell's date is today. |
| isShaded? | boolean | Indicates whether the cell is shaded. |
| formatDate | FormatterFn | A function that formats dates according to the locale. |
| groupOrientation? | GroupOrientation | The orientation of groups: Vertical or Horizontal. |
| groupingInfo? | Array<Group> | Information about the cell's grouping. |
| 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 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 a row.
| Field | Type | Description |
|---|---|---|
| children? | ReactNode | A React node used to render the row content. |
| Name | Properties | Description |
|---|---|---|
| MonthView.Layout | MonthView.LayoutProps | A component that renders a month view layout. |
| MonthView.DayScaleLayout | MonthView.DayScaleLayoutProps | A component that renders a day scale layout. |
| MonthView.DayScaleCell | MonthView.DayScaleCellProps | A component that renders a day scale cell. |
| MonthView.DayScaleRow | MonthView.RowProps | A component that renders a day scale row. |
| MonthView.DayScaleEmptyCell | MonthView.DayScaleEmptyCellProps | A component that renders an empty cell on the day scale. |
| MonthView.TimeTableLayout | MonthView.TimeTableLayoutProps | A component that renders a timetable layout. |
| MonthView.TimeTableCell | MonthView.TimeTableCellProps | A component that renders a timetable cell. |
| MonthView.TimeTableRow | MonthView.RowProps | A component that renders a timetable row. |
| MonthView.AppointmentLayer | MonthView.AppointmentLayerProps | A component that renders the appointment layer. |
Additional properties are added to the component's root element.