MiniCalendar
MiniCalendar
한 줄에 적은 수의 날짜를 표시하는 컴팩트한 캘린더 컴포넌트예요. 요약 뷰나 소형 일정 표시에 적합해요.
출처: 문서
본문
사용법 (Usage)
MiniCalendar는 적은 수의 날짜를 한 줄에 표시해요.
import { useState } from 'react';
import { MiniCalendar } from '@mantine/dates';
function Demo() {
const [value, onChange] = useState('2025-04-15');
return <MiniCalendar value={value} onChange={onChange} />;
}
표시할 날짜 수 (Number of days)
numberOfDays prop으로 한 번에 표시할 날짜 수를 제어해요. 기본값은 7이에요.
import { MiniCalendar } from '@mantine/dates';
function Demo() {
return <MiniCalendar numberOfDays={5} />;
}
getDayProps
getDayProps를 사용해 날짜에 커스텀 props를 추가할 수 있어요. 예를 들어 주말에 스타일을 지정할 수 있어요.
import dayjs from 'dayjs';
import { MiniCalendar } from '@mantine/dates';
function Demo() {
return (
<MiniCalendar
getDayProps={(date) => ({
style: {
color: [0, 6].includes(dayjs(date).day()) ? 'var(--mantine-color-red-8)' : undefined,
},
})}
/>
);
}
최소·최대 날짜 (Min and max dates)
minDate와 maxDate props로 날짜 선택을 제한할 수 있어요.
import { useState } from 'react';
import { MiniCalendar } from '@mantine/dates';
function Demo() {
const [value, onChange] = useState('2025-04-15');
return <MiniCalendar value={value} onChange={onChange} minDate={new Date('2025-04-13')} maxDate={new Date('2025-04-18')} />;
}
로컬라이제이션 (Localization)
locale prop으로 컴포넌트 레벨에서, DatesProvider로 전역에서 로컬라이제이션을 바꿀 수 있어요.
import 'dayjs/locale/ru';
import { MiniCalendar } from '@mantine/dates';
function Demo() {
return <MiniCalendar locale="ru" />;
}
또는 monthLabelFormat prop에 함수를 전달해 dayjs 대신 Intl.DateTimeFormat으로 월 라벨을 서식 지정할 수 있어요. dayjs 없이 서식 지정을 참고해요.
접근성 (Accessibility)
nextControlProps와 previousControlProps를 사용해 내비게이션 버튼에 aria-label과 기타 props를 추가할 수 있어요.
import { MiniCalendar } from '@mantine/dates';
function Demo() {
return (
<MiniCalendar
nextControlProps={{ 'aria-label': 'Next month' }}
previousControlProps={{ 'aria-label': 'Previous month' }}
/>
);
}