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 = "en";
const labels = {
day: "Day",
month: "Month",
year: "Year",
today: "Today",
previousMonth: "Previous month",
nextMonth: "Next month",
viewPicker: "Calendar view",
weekdays: [
"Sun",
"Mon",
"Tue",
"Wed",
"Thu",
"Fri",
"Sat",
],
formatMonth: (date: Date) =>
new Intl.DateTimeFormat("en-US", {
year: 'numeric',
month: 'long',
timeZone: 'UTC',
}).format(date),
formatMonthName: (date: Date) =>
new Intl.DateTimeFormat("en-US", {
month: 'long',
timeZone: 'UTC',
}).format(date),
formatYear: (year: number) =>
new Intl.DateTimeFormat("en-US", {
year: 'numeric',
timeZone: 'UTC',
}).format(new Date(Date.UTC(year, 0, 1))),
monthPicker: "Choose a month",
yearPicker: "Choose a year",
monthName: "month",
yearName: "year",
selectedPeriod: (period: string) =>
`${"Selected date’s"} ${period}`,
currentPeriod: (period: string) =>
`${"Current"} ${period}`,
rangePreviewStart: "Range start preview",
rangePreviewMiddle: "Range middle preview",
rangePreviewEnd: "Range end preview",
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
Set today explicitly. Date inputs and callbacks use UTC dates. Pass Date values at UTC midnight and set timeZone to UTC when formatting them. Choose single or range mode. Use labels to set weekdays, navigation and action labels, date formatters and CALENDAR_LOCALES.ko or CALENDAR_LOCALES.en. Set the whole label bundle when changing language; omitted labels use Korean defaults. Use DatePickerTrigger and DatePickerContent to show Calendar in a popup, and pass the same labels through calendarProps.labels.
TSX
'use client';
import { useState } from 'react';
import { CALENDAR_LOCALES, Calendar } from '@mbsw/ui';
export default function Example() {
const locale = "en";
const labels = {
day: "Day",
month: "Month",
year: "Year",
today: "Today",
previousMonth: "Previous month",
nextMonth: "Next month",
viewPicker: "Calendar view",
weekdays: [
"Sun",
"Mon",
"Tue",
"Wed",
"Thu",
"Fri",
"Sat",
],
formatMonth: (date: Date) =>
new Intl.DateTimeFormat("en-US", {
year: 'numeric',
month: 'long',
timeZone: 'UTC',
}).format(date),
formatMonthName: (date: Date) =>
new Intl.DateTimeFormat("en-US", {
month: 'long',
timeZone: 'UTC',
}).format(date),
formatYear: (year: number) =>
new Intl.DateTimeFormat("en-US", {
year: 'numeric',
timeZone: 'UTC',
}).format(new Date(Date.UTC(year, 0, 1))),
monthPicker: "Choose a month",
yearPicker: "Choose a year",
monthName: "month",
yearName: "year",
selectedPeriod: (period: string) =>
`${"Selected date’s"} ${period}`,
currentPeriod: (period: string) =>
`${"Current"} ${period}`,
rangePreviewStart: "Range start preview",
rangePreviewMiddle: "Range middle preview",
rangePreviewEnd: "Range end preview",
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}
/>
);
}
The Playground Code tab includes the full example with your current settings. See Installation for the CSS imports.
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 = "en";
const labels = {
day: "Day",
month: "Month",
year: "Year",
today: "Today",
previousMonth: "Previous month",
nextMonth: "Next month",
viewPicker: "Calendar view",
weekdays: [
"Sun",
"Mon",
"Tue",
"Wed",
"Thu",
"Fri",
"Sat",
],
formatMonth: (date: Date) =>
new Intl.DateTimeFormat("en-US", {
year: 'numeric',
month: 'long',
timeZone: 'UTC',
}).format(date),
formatMonthName: (date: Date) =>
new Intl.DateTimeFormat("en-US", {
month: 'long',
timeZone: 'UTC',
}).format(date),
formatYear: (year: number) =>
new Intl.DateTimeFormat("en-US", {
year: 'numeric',
timeZone: 'UTC',
}).format(new Date(Date.UTC(year, 0, 1))),
monthPicker: "Choose a month",
yearPicker: "Choose a year",
monthName: "month",
yearName: "year",
selectedPeriod: (period: string) =>
`${"Selected date’s"} ${period}`,
currentPeriod: (period: string) =>
`${"Current"} ${period}`,
rangePreviewStart: "Range start preview",
rangePreviewMiddle: "Range middle preview",
rangePreviewEnd: "Range end preview",
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("en-US", { timeZone: 'UTC' })} – ${range.to?.toLocaleDateString("en-US", { timeZone: 'UTC' }) ?? '…'}`
: "Choose a date"
: date
? date.toLocaleDateString("en-US", { timeZone: 'UTC' })
: "Choose a date"}
</Button>
</DatePickerTrigger>
<DatePickerContent
aria-label={"Schedule date"}
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