Skip to main content

Calendar

MSK Calendar는 의존성 없는 경량 월 달력 date picker primitive입니다. 헤더/그리드를 JS가 생성하고 hidden input에 YYYY-MM-DD를 동기화합니다.

Preview​

2026년 6월
일월화수목금토

Data API​

<div data-msk-calendar data-value="2026-06-19">
  <input type="hidden" name="date" data-msk-calendar-input>
</div>

JavaScript API​

window.MSK.ui.calendar.setDate(root, '2026-07-01');

Events​

root.addEventListener('msk:calendar-change', (event) => {
  console.log(event.detail.value); // '2026-07-01'
});

Accessibility​

  • 오늘 날짜를 강조하고, 선택일은 aria-pressed로 표시합니다.
  • 키보드: 날짜 버튼에서 ←/→/↑/↓로 이동(달 경계 넘어가면 월 자동 전환).
  • 달 이동 버튼에는 aria-label(이전/다음 달)이 부여됩니다.