MonthView Plugin Reference

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.

Import

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';

User Reference

Dependencies

none

Properties

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 time table layout.
timeTableCellComponent ComponentType<MonthView.TimeTableCellProps> A component that renders a time table cell.
timeTableRowComponent ComponentType<MonthView.RowProps> A component that renders a time table row.
appointmentLayerComponent ComponentType<MonthView.AppointmentLayerProps> A component that renders the appointment layer.

Interfaces

MonthView.CellData

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.

MonthView.LayoutProps

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 time table layout.

MonthView.DayScaleLayoutProps

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.

MonthView.DayScaleCellProps

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.

MonthView.DayScaleEmptyCellProps

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.

MonthView.TimeTableLayoutProps

Describes properties passed to a component that renders a time table layout.

Field Type Description
cellsData Array<Array<MonthView.CellData>> Specifies the cells meta data.
cellComponent ComponentType<MonthView.TimeTableCellProps> A component that renders a time table cell.
rowComponent ComponentType<MonthView.RowProps> A component that renders a time table row.
formatDate FormatterFn A function that formats dates according to the set locale.

MonthView.TimeTableCellProps

Describes properties passed to a component that renders a time table 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.

MonthView.AppointmentLayerProps

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.

MonthView.RowProps

Describes properties passed to a component that renders a row.

Field Type Description
children? ReactNode A React node used to render the row content.

Plugin Components

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.DayScaleEmptyCell DayView.DayScaleEmptyCellProps A component that renders an empty cell on the day scale.
MonthView.TimeTableLayout MonthView.TimeTableLayoutProps A component that renders a time table layout.
MonthView.TimeTableCell MonthView.TimeTableCellProps A component that renders a time table cell.
MonthView.Row MonthView.RowProps A component that renders a generic row.
MonthView.AppointmentLayer MonthView.AppointmentLayerProps A component that renders the appointment layer.

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