Mobile-optimized schedule month view component
MobileMonthView is a mobile-optimized calendar view that displays a month grid at the top with event indicators, and a list of events for the selected day at the bottom. This component is designed to work similarly to how calendar applications work on iOS.
The component does not include drag-and-drop functionality and is optimized for touch interactions on mobile devices.
Saturday, September 26
Set withWeekNumbers to display week numbers in the first column.
By default, days from the previous and next months are hidden. Set withOutsideDays to display them.
Set highlightToday={false} to disable highlighting the current day.
Set firstDayOfWeek to control which day starts the week. 0 is Sunday, 1 is Monday (default), etc.
Use renderHeader to customize the header. The callback receives the default header element, the current mode, and the current date, allowing you to wrap or replace the default header.
Set consistentWeeks={false} to only show weeks that have days in the current month.
Use weekdayFormat prop to customize the weekday names display. It accepts dayjs format strings.
Set withWeekDays={false} to hide the weekday names row.
Set mode="static" to disable all interactions. In this mode, days are not clickable and no selection changes occur.
Use locale prop to set the dayjs locale for date formatting. Combine it with labels prop to translate all UI text.
sábado, septiembre 26
MobileMonthView follows the same keyboard navigation patterns as MonthView .
The first day of the month is included in the tab order ( tabIndex={0} ), while all other days have tabIndex={-1} . When a day receives focus via arrow key navigation, the component updates tabIndex values so that the newly focused day becomes the tab stop.
Each day button has an aria-label attribute with the full date in the format "Month Day, Year" (e.g., "November 15, 2025"). This provides screen reader users with complete date information.