Mantine UIFAQColors generator

MobileMonthView

Mobile-optimized schedule month view component

Source

View source code

LLM docs

LLM documentation

Docs

Edit this page

Package

@mantine/schedule

Usage

MobileMonthView displays a month grid with event indicators at the top and a list of events for the selected day at the bottom, similar to calendar applications on iOS. It is optimized for touch devices and does not support drag and drop.

October 2026

Mo
Tu
We
Th
Fr
Sa
Su

Saturday, October 17

No events

import dayjs from 'dayjs';
import { useState } from 'react';
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 (
    <MobileMonthView
      date={date}
      onDateChange={setDate}
      selectedDate={selectedDate}
      onSelectedDateChange={setSelectedDate}
      events={regularEvents}
    />
  );
}

With week numbers

Set withWeekNumbers to display week numbers in the first column.

October 2026

Mo
Tu
We
Th
Fr
Sa
Su

Saturday, October 17

No events

import dayjs from 'dayjs';
import { useState } from 'react';
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 (
    <MobileMonthView
      date={date}
      onDateChange={setDate}
      selectedDate={selectedDate}
      onSelectedDateChange={setSelectedDate}
      events={regularEvents}
      withWeekNumbers
    />
  );
}

With outside days

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

October 2026

Mo
Tu
We
Th
Fr
Sa
Su

Saturday, October 17

No events

import dayjs from 'dayjs';
import { useState } from 'react';
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 (
    <MobileMonthView
      date={date}
      onDateChange={setDate}
      selectedDate={selectedDate}
      onSelectedDateChange={setSelectedDate}
      events={regularEvents}
      withOutsideDays
    />
  );
}

Hide weekend days

Set withWeekendDays={false} to hide weekend days. The grid shrinks to the remaining columns and weeks without visible days are not rendered. The days that are considered weekend are controlled by the weekendDays prop (or DatesProvider, [0, 6] by default).

October 2026

Mo
Tu
We
Th
Fr

Saturday, October 17

No events

import dayjs from 'dayjs';
import { useState } from 'react';
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 (
    <MobileMonthView
      date={date}
      onDateChange={setDate}
      selectedDate={selectedDate}
      onSelectedDateChange={setSelectedDate}
      events={events}
      withWeekendDays={false}
    />
  );
}

Highlight today

Set highlightToday={false} to disable highlighting the current day.

October 2026

Mo
Tu
We
Th
Fr
Sa
Su

Saturday, October 17

No events

import dayjs from 'dayjs';
import { useState } from 'react';
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 (
    <MobileMonthView
      date={date}
      onDateChange={setDate}
      selectedDate={selectedDate}
      onSelectedDateChange={setSelectedDate}
      events={events}
      highlightToday={false}
    />
  );
}

First day of week

Set firstDayOfWeek to control which day starts the week. 0 is Sunday, 1 is Monday (default), etc.

October 2026

Su
Mo
Tu
We
Th
Fr
Sa

Saturday, October 17

No events

import dayjs from 'dayjs';
import { useState } from 'react';
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 (
    <MobileMonthView
      date={date}
      onDateChange={setDate}
      selectedDate={selectedDate}
      onSelectedDateChange={setSelectedDate}
      events={events}
      firstDayOfWeek={0}
    />
  );
}

Custom header

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.

October 2026

3 events today
Mo
Tu
We
Th
Fr
Sa
Su

Saturday, October 17

No events

import dayjs from 'dayjs';
import { useState } from 'react';
import { Badge } 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 (
    <MobileMonthView
      date={date}
      onDateChange={setDate}
      selectedDate={selectedDate}
      onSelectedDateChange={setSelectedDate}
      events={events}
      renderHeader={({ defaultHeader }) => (
        <>
          {defaultHeader}
          <Badge variant="light" size="sm">3 events today</Badge>
        </>
      )}
    />
  );
}

Consistent weeks

Set consistentWeeks={false} to only show weeks that have days in the current month.

October 2026

Mo
Tu
We
Th
Fr
Sa
Su

Saturday, October 17

No events

import dayjs from 'dayjs';
import { useState } from 'react';
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 (
    <MobileMonthView
      date={date}
      onDateChange={setDate}
      selectedDate={selectedDate}
      onSelectedDateChange={setSelectedDate}
      events={events}
      consistentWeeks={false}
    />
  );
}

Weekday format

Use weekdayFormat prop to customize the weekday names display. It accepts dayjs format strings.

October 2026

Mon
Tue
Wed
Thu
Fri
Sat
Sun

Saturday, October 17

No events

import dayjs from 'dayjs';
import { useState } from 'react';
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 (
    <MobileMonthView
      date={date}
      onDateChange={setDate}
      selectedDate={selectedDate}
      onSelectedDateChange={setSelectedDate}
      events={events}
      weekdayFormat="ddd"
    />
  );
}

Without week days

Set withWeekDays={false} to hide the weekday names row.

October 2026

Saturday, October 17

No events

import dayjs from 'dayjs';
import { useState } from 'react';
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 (
    <MobileMonthView
      date={date}
      onDateChange={setDate}
      selectedDate={selectedDate}
      onSelectedDateChange={setSelectedDate}
      events={events}
      withWeekDays={false}
    />
  );
}

Static mode

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

October 2026

Mo
Tu
We
Th
Fr
Sa
Su

Saturday, October 17

No events

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

function Demo() {
  return (
    <MobileMonthView
      date={dayjs().format('YYYY-MM-DD')}
      selectedDate={dayjs().format('YYYY-MM-DD')}
      events={regularEvents}
      mode="static"
    />
  );
}

Localization

Use locale prop to set the dayjs locale for date formatting. Combine it with labels prop to translate all UI text.

octubre 2026

lu
ma
mi
ju
vi
sá
do

sábado, octubre 17

Sin eventos

import 'dayjs/locale/es';
import dayjs from 'dayjs';
import { useState } from 'react';
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 (
    <MobileMonthView
      date={date}
      onDateChange={setDate}
      selectedDate={selectedDate}
      onSelectedDateChange={setSelectedDate}
      events={events}
      locale="es"
      labels={{
        day: 'Día',
        week: 'Semana',
        month: 'Mes',
        year: 'Año',
        today: 'Hoy',
        previous: 'Anterior',
        next: 'Siguiente',
        noEvents: 'Sin eventos',
      }}
    />
  );
}

Accessibility

MobileMonthView follows the same keyboard navigation patterns as MonthView.

Focus management

Only the first day of the month is included in the tab order, all other days can be reached with arrow keys. The day focused with arrow keys becomes the new tab stop.

Keyboard interactions

KeyDescription
ArrowRightFocuses next non-disabled day
ArrowLeftFocuses previous non-disabled day
ArrowDownFocuses same day in the next week
ArrowUpFocuses 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").

YearView

AgendaView