Month View in the React Scheduler

The Scheduler's Month view provides a comprehensive calendar layout for planning and organizing events. Customize the display by configuring visible months, week rows, adjacent-month dates, and row sizing to suit your scheduling needs.

Setting number of visible months

Display multiple consecutive months in a single view using the MonthView interval property. Set interval={4} to show four months side-by-side, enabling quick long-range planning and overview at a glance.

Number of weeks visible in the month view

Control the density of the Month view by configuring displayDate (starting day), numberOfWeeks (number of week rows displayed), and maxEventsPerRow (event limit per day cell). These properties work together to optimize the calendar layout for your use case.

Week number in month view

Enable the showWeekNumber property to display ISO week numbers in the first column of the scheduler, providing a standardized reference for tracking and planning events across months and years. The displayed week numbers are determined by the firstDayOfWeek property, which defines the start of the week. Each row in the scheduler begins with its corresponding ISO week number, ensuring clarity and consistency in scheduling.

The weekRule property determines the criteria used to identify the first week of the year. It defines whether a partial or full week qualifies as the starting week. This ensures that the assigned week numbers follow a consistent and predictable structure based on the selected rule.

Auto row height

Enable rowAutoHeight to dynamically expand month view rows based on the number of appointments, ensuring all events are visible without clipping or truncation.

Hide leading and trailing dates