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 name. Required if you use several MonthView plugins.
firstDayOfWeek? number 0 Specifies first day of week.
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.
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 start time.
endDate Date Specifies the cell 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.

MonthView.LayoutProps

Describes properties passed to a component that renders a month view layout.

Field Type Description
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.

MonthView.DayScaleCellProps

Describes properties passed to a component that renders a day scale cell.

Field Type Description
startDate Date Specifies the cell start time.
endDate? Date Specifies the cell end time.

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.
tableRef (ref: ReactInstance) => void A function that accepts the table’s root React element.
cellComponent ComponentType<MonthView.TimeTableCellProps> A component that renders a time table cell.
rowComponent ComponentType<MonthView.RowProps> A component that renders a time table row.

MonthView.TimeTableCellProps

Describes properties passed to a component that renders a time scale cell.

Field Type Description
startDate Date Specifies the cell start time.
endDate? Date Specifies the cell 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.

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 ComponentType<MonthView.LayoutProps> A component that renders a month view layout.
MonthView.DayScaleLayout ComponentType<MonthView.DayScaleLayoutProps> A component that renders a day scale layout.
MonthView.DayScaleCell ComponentType<MonthView.DayScaleCellProps> A component that renders a day scale cell.
MonthView.TimeTableLayout ComponentType<MonthView.TimeTableLayoutProps> A component that renders a time table layout.
MonthView.TimeTableCell ComponentType<MonthView.TimeTableCellProps> A component that renders a time table cell.
MonthView.Row ComponentType<MonthView.RowProps> A component that renders a generic row.
MonthView.AppointmentLayer ComponentType<MonthView.AppointmentLayerProps> A component that renders the appointment layer.

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