MobileMonthView

Mobile-optimized schedule month view component

Source

View source code

LLM docs

LLM documentation

Docs

Edit this page

Package

@mantine/schedule

Usage

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.

February 2026

Thursday, February 12

import dayjs from 'dayjs';
import { useState } from 'react';
import { Box } from '@mantine/core';
import { MobileMonthView } from '@mantine/schedule';
import { events } from './data';

function Demo() {
  const [date, setDate] = useState(dayjs().format('YYYY-MM-DD'));
  const [selectedDate, setSelectedDate] = useState<string | null>(dayjs().format('YYYY-MM-DD'));

  return (
    <Box style={{ width: 375, height: 500 }}>
      <MobileMonthView
        date={date}
        onDateChange={setDate}
        selectedDate={selectedDate}
        onSelectedDateChange={setSelectedDate}
        events={events}
      />
    </Box>
  );
}

With week numbers

Set withWeekNumbers to display week numbers in the first column.

February 2026

Thursday, February 12

import dayjs from 'dayjs';
import { useState } from 'react';
import { Box } from '@mantine/core';
import { MobileMonthView } from '@mantine/schedule';
import { events } from './data';

function Demo() {
  const [date, setDate] = useState(dayjs().format('YYYY-MM-DD'));
  const [selectedDate, setSelectedDate] = useState<string | null>(dayjs().format('YYYY-MM-DD'));

  return (
    <Box style={{ width: 375, height: 500 }}>
      <MobileMonthView
        date={date}
        onDateChange={setDate}
        selectedDate={selectedDate}
        onSelectedDateChange={setSelectedDate}
        events={events}
        withWeekNumbers
      />
    </Box>
  );
}

With outside days

By default, days from the previous and next months are hidden. Set withOutsideDays to display them.

February 2026

Thursday, February 12

import dayjs from 'dayjs';
import { useState } from 'react';
import { Box } from '@mantine/core';
import { MobileMonthView } from '@mantine/schedule';
import { events } from './data';

function Demo() {
  const [date, setDate] = useState(dayjs().format('YYYY-MM-DD'));
  const [selectedDate, setSelectedDate] = useState<string | null>(dayjs().format('YYYY-MM-DD'));

  return (
    <Box style={{ width: 375, height: 500 }}>
      <MobileMonthView
        date={date}
        onDateChange={setDate}
        selectedDate={selectedDate}
        onSelectedDateChange={setSelectedDate}
        events={events}
        withOutsideDays
      />
    </Box>
  );
}

Static mode

Set mode="static" to disable all interactions. In this mode, days are not clickable and no selection changes occur.

February 2026

Thursday, February 12

import dayjs from 'dayjs';
import { Box } from '@mantine/core';
import { MobileMonthView } from '@mantine/schedule';
import { events } from './data';

function Demo() {
  return (
    <Box style={{ width: 375, height: 500 }}>
      <MobileMonthView
        date={dayjs().format('YYYY-MM-DD')}
        selectedDate={dayjs().format('YYYY-MM-DD')}
        events={events}
        mode="static"
      />
    </Box>
  );
}

Accessibility

MobileMonthView follows the same keyboard navigation patterns as MonthView.

Focus management

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.

Keyboard interactions

Key	Description
`ArrowRight`	Focuses next non-disabled day
`ArrowLeft`	Focuses previous non-disabled day
`ArrowDown`	Focuses same day in the next week
`ArrowUp`	Focuses same day in the previous week

Day labels

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.

YearView

CodeHighlight