Calendar
Playground
TSX
'use client';
import { useEffect, useRef, useState } from 'react';
import {
CALENDAR_LOCALES,
Calendar,
type CalendarDateRange,
type CalendarView,
} from '@mbsw/ui';
export default function Demo() {
const settings = {
"mode": "single",
"view": "day",
"disabled": false
};
const locale = "ko";
const labels = {
day: "일",
month: "월",
year: "년",
today: "오늘",
previousMonth: "이전 달",
nextMonth: "다음 달",
viewPicker: "캘린더 보기",
weekdays: [
"일",
"월",
"화",
"수",
"목",
"금",
"토",
],
formatMonth: (date: Date) =>
new Intl.DateTimeFormat("ko-KR", {
year: 'numeric',
month: 'long',
timeZone: 'UTC',
}).format(date),
formatMonthName: (date: Date) =>
new Intl.DateTimeFormat("ko-KR", {
month: 'long',
timeZone: 'UTC',
}).format(date),
formatYear: (year: number) =>
new Intl.DateTimeFormat("ko-KR", {
year: 'numeric',
timeZone: 'UTC',
}).format(new Date(Date.UTC(year, 0, 1))),
monthPicker: "월 선택",
yearPicker: "연도 선택",
monthName: "월",
yearName: "연도",
selectedPeriod: (period: string) =>
`${"선택된 날짜의"} ${period}`,
currentPeriod: (period: string) =>
`${"현재"} ${period}`,
rangePreviewStart: "범위 시작 미리보기",
rangePreviewMiddle: "범위 중간 미리보기",
rangePreviewEnd: "범위 끝 미리보기",
locale: CALENDAR_LOCALES[locale],
};
const [date, setDate] = useState<Date>();
const [range, setRange] = useState<CalendarDateRange>();
const [view, setView] = useState(settings.view as CalendarView);
const previousSetting = useRef(settings.view);
useEffect(() => {
if (previousSetting.current === settings.view) return;
previousSetting.current = settings.view;
setView(settings.view as CalendarView);
}, [settings.view]);
const common = {
labels,
today: new Date('2026-09-27T00:00:00Z'),
defaultMonth: new Date('2026-09-01T00:00:00Z'),
view,
onViewChange: (next: CalendarView) => {
setView(next);
},
disabled: settings.disabled,
};
return (
<>
{settings.mode === 'range' ? (
<Calendar
{...common}
mode="range"
selected={range}
onSelect={setRange}
/>
) : (
<Calendar
{...common}
mode="single"
selected={date}
onSelect={setDate}
/>
)}
</>
);
}
Properties
Selection
View
Disabled
Usage
today는 앱에서 명시적으로 전달해야 합니다. 날짜 입력과 콜백은 UTC 연, 월, 일을 사용하므로 UTC 자정 Date를 전달하고 표시할 때도 timeZone을 UTC로 지정합니다. single 또는 range 모드를 선택합니다. labels에 요일, 탐색·동작 문구, 날짜 formatter와 CALENDAR_LOCALES.ko 또는 CALENDAR_LOCALES.en을 전달합니다. 언어를 바꿀 때는 전체 문구를 함께 설정하세요. 생략한 항목은 한국어 기본값을 사용합니다. DatePickerContent에는 calendarProps.labels로 같은 설정을 전달합니다. DatePicker는 Trigger와 Content(calendarProps)로 Calendar를 떠 있는 패널에 배치합니다.
TSX
'use client';
import { useState } from 'react';
import { CALENDAR_LOCALES, Calendar } from '@mbsw/ui';
export default function Example() {
const locale = "ko";
const labels = {
day: "일",
month: "월",
year: "년",
today: "오늘",
previousMonth: "이전 달",
nextMonth: "다음 달",
viewPicker: "캘린더 보기",
weekdays: [
"일",
"월",
"화",
"수",
"목",
"금",
"토",
],
formatMonth: (date: Date) =>
new Intl.DateTimeFormat("ko-KR", {
year: 'numeric',
month: 'long',
timeZone: 'UTC',
}).format(date),
formatMonthName: (date: Date) =>
new Intl.DateTimeFormat("ko-KR", {
month: 'long',
timeZone: 'UTC',
}).format(date),
formatYear: (year: number) =>
new Intl.DateTimeFormat("ko-KR", {
year: 'numeric',
timeZone: 'UTC',
}).format(new Date(Date.UTC(year, 0, 1))),
monthPicker: "월 선택",
yearPicker: "연도 선택",
monthName: "월",
yearName: "연도",
selectedPeriod: (period: string) =>
`${"선택된 날짜의"} ${period}`,
currentPeriod: (period: string) =>
`${"현재"} ${period}`,
rangePreviewStart: "범위 시작 미리보기",
rangePreviewMiddle: "범위 중간 미리보기",
rangePreviewEnd: "범위 끝 미리보기",
locale: CALENDAR_LOCALES[locale],
};
const [date, setDate] = useState<Date>();
return (
<Calendar
labels={labels}
today={new Date('2026-09-27T00:00:00Z')}
defaultMonth={new Date('2026-09-01T00:00:00Z')}
mode="single"
selected={date}
onSelect={setDate}
/>
);
}
Playground의 Code 탭에서 현재 설정과 동작이 포함된 예제 전체를 복사할 수 있습니다. 공통 CSS 설치는 설치하기를 확인하세요.
Composition
DatePicker
TSX
'use client';
import { useState } from 'react';
import {
Button,
CALENDAR_LOCALES,
DatePicker,
DatePickerTrigger,
DatePickerContent,
type CalendarDateRange,
} from '@mbsw/ui';
export default function Demo() {
const settings = {
"mode": "single",
"disabled": false
};
const locale = "ko";
const labels = {
day: "일",
month: "월",
year: "년",
today: "오늘",
previousMonth: "이전 달",
nextMonth: "다음 달",
viewPicker: "캘린더 보기",
weekdays: [
"일",
"월",
"화",
"수",
"목",
"금",
"토",
],
formatMonth: (date: Date) =>
new Intl.DateTimeFormat("ko-KR", {
year: 'numeric',
month: 'long',
timeZone: 'UTC',
}).format(date),
formatMonthName: (date: Date) =>
new Intl.DateTimeFormat("ko-KR", {
month: 'long',
timeZone: 'UTC',
}).format(date),
formatYear: (year: number) =>
new Intl.DateTimeFormat("ko-KR", {
year: 'numeric',
timeZone: 'UTC',
}).format(new Date(Date.UTC(year, 0, 1))),
monthPicker: "월 선택",
yearPicker: "연도 선택",
monthName: "월",
yearName: "연도",
selectedPeriod: (period: string) =>
`${"선택된 날짜의"} ${period}`,
currentPeriod: (period: string) =>
`${"현재"} ${period}`,
rangePreviewStart: "범위 시작 미리보기",
rangePreviewMiddle: "범위 중간 미리보기",
rangePreviewEnd: "범위 끝 미리보기",
locale: CALENDAR_LOCALES[locale],
};
const [date, setDate] = useState<Date>();
const [range, setRange] = useState<CalendarDateRange>();
return (
<DatePicker>
<DatePickerTrigger>
<Button variant="outline" tone="secondary" disabled={settings.disabled}>
{settings.mode === 'range'
? range
? `${range.from.toLocaleDateString("ko-KR", { timeZone: 'UTC' })} – ${range.to?.toLocaleDateString("ko-KR", { timeZone: 'UTC' }) ?? '…'}`
: "날짜 선택"
: date
? date.toLocaleDateString("ko-KR", { timeZone: 'UTC' })
: "날짜 선택"}
</Button>
</DatePickerTrigger>
<DatePickerContent
aria-label={"일정 날짜"}
align="center"
calendarProps={{
labels,
today: new Date('2026-09-27T00:00:00Z'),
defaultMonth: new Date('2026-09-01T00:00:00Z'),
...(settings.mode === 'range'
? { mode: 'range' as const, selected: range, onSelect: setRange }
: { mode: 'single' as const, selected: date, onSelect: setDate }),
}}
/>
</DatePicker>
);
}
Properties
Selection
Disabled