MobileMonthView

MobileMonthView

모바일 최적화된 월별 뷰 컴포넌트예요. @mantine/schedule 패키지의 컴포넌트예요. 상단에 이벤트 표시기가 있는 월 그리드와, 하단에 선택한 날짜의 이벤트 목록을 표시해요.

출처: 문서

본문

사용법 (Usage)

MobileMonthView는 모바일 최적화된 캘린더 뷰예요. 상단에 이벤트 표시기가 있는 월 그리드, 하단에 선택한 날짜의 이벤트 목록을 표시해요. 이 컴포넌트는 iOS의 캘린더 애플리케이션과 유사하게 동작하도록 설계됐어요.

이 컴포넌트는 드래그 앤 드롭 기능을 포함하지 않으며, 모바일 기기의 터치 상호작용에 최적화되어 있어요.

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(dayjs().format('YYYY-MM-DD'));

  return (
    <MobileMonthView
      date={date}
      onDateChange={setDate}
      selectedDate={selectedDate}
      onSelectedDateChange={setSelectedDate}
      events={events}
    />
  );
}

주 번호 표시 (With week numbers)

withWeekNumbers를 설정하면 첫 번째 열에 주 번호를 표시해요.

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

외부 날짜 표시 (With outside days)

기본적으로 이전·다음 달의 날짜는 숨겨져요. withOutsideDays로 표시할 수 있어요.

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

오늘 강조 (Highlight today)

highlightToday={false}로 오늘 날짜 강조를 비활성화할 수 있어요.

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

주의 첫 요일 (First day of week)

firstDayOfWeek로 주가 시작하는 요일을 설정해요. 0은 일요일, 1은 월요일(기본값) 등이에요.

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

커스텀 헤더 (Custom header)

renderHeader를 사용해 헤더를 커스터마이즈할 수 있어요. 콜백은 기본 헤더 엘리먼트, 현재 모드, 현재 날짜를 받아 기본 헤더를 감싸거나 대체할 수 있게 해줘요.

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(dayjs().format('YYYY-MM-DD'));

  return (
    <MobileMonthView
      renderHeader={(defaultHeader) => (
        <>
          {defaultHeader}
          <Badge>3 events today</Badge>
        </>
      )}
    />
  );
}

일관된 주 (Consistent weeks)

consistentWeeks={false}로 현재 달에 날짜가 있는 주만 표시할 수 있어요.

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

요일 형식 (Weekday format)

weekdayFormat prop으로 요일 이름 표시를 커스터마이즈할 수 있어요. dayjs 형식 문자열을 받아요.

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

요일 없이 (Without week days)

withWeekDays={false}로 요일 이름 행을 숨길 수 있어요.

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

정적 모드 (Static mode)

mode="static"으로 설정하면 모든 상호작용을 비활성화해요. 이 모드에서는 날짜를 클릭할 수 없고 선택 변경도 발생하지 않아요.

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

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

지역화 (Localization)

locale prop으로 날짜 형식에 사용할 dayjs 로케일을 설정해요. labels prop과 결합하면 모든 UI 텍스트를 번역할 수 있어요.

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

접근성 (Accessibility)

MobileMonthView는 MonthView와 동일한 키보드 내비게이션 패턴을 따르고 있어요.

포커스 관리 (Focus management)

월의 첫 번째 날이 탭 순서(tabIndex={0})에 포함되고, 다른 모든 날은 tabIndex={-1}이에요. 화살표 키 내비게이션으로 날짜가 포커스를 받으면 컴포넌트가 tabIndex 값을 갱신해 새로 포커스된 날짜가 탭 스톱이 돼요.

키보드 상호작용 (Keyboard interactions)

날짜 라벨 (Day labels)

각 날짜 버튼에는 "Month Day, Year"(예: "November 15, 2025") 형식의 전체 날짜를 담은 aria-label 속성이 있어요. 이는 화면 리더 사용자에게 완전한 날짜 정보를 제공해요.

더 알아보기 (Learn more)

• YearView
• AgendaView