Calendar 캘린더

캘린더 뷰입니다. 단일 선택 / 기간 선택 / 여러 선택 세 가지 선택 모드를 지원하며, range로 선택 가능한 날짜 경계를 제한합니다. panel 모드는 상시 표시되고, input 모드는 입력 상자로 접혔다가 클릭 시 펼쳐집니다 (패널은 body에 마운트).

캘린더

<template>
  <div class="demo-col" style="max-width: none">
    <div class="demo-row" style="align-items: flex-start; flex-wrap: nowrap">
      <LhCalendar v-model="single" selection="single" />
      <LhCalendar v-model="span" selection="range" mode="input" placeholder="기간 선택" />
    </div>
    <p class="demo-note">단일 선택: {{ fmt(single) }} | 기간: {{ fmtArr(span) }}</p>
    <div class="demo-row" style="align-items: flex-start; flex-wrap: nowrap; margin-top: 16px">
      <LhCalendar v-model="multi" selection="multiple" :panels="2" :close-on-select="false" />
      <LhCalendar v-model="strict" selection="range" mode="panel" />
    </div>
    <p class="demo-note">여러 선택 (panels=2 이중 패널, closeOnSelect=false로 자동 닫힘 없음): {{ fmtArr(multi) }}</p>
    <p class="demo-note">패널 모드 range (mode="panel"): {{ fmtArr(strict) }}</p>
    <div class="demo-row" style="align-items: flex-start; flex-wrap: nowrap; margin-top: 16px">
      <LhCalendar v-model="clamped" selection="single" :range="bounds" />
    </div>
    <p class="demo-note">range로 선택 가능 구간 제한 (2026-10-01 ~ 2026-10-15만 선택 가능): {{ fmt(clamped) }}</p>
  </div>
</template>

<script>
export default {
  data: () => ({
    single: new Date(2026, 9, 3),
    span: [],
    multi: [],
    strict: [],
    clamped: new Date(2026, 9, 5),
    bounds: [new Date(2026, 9, 1), new Date(2026, 9, 15)],
  }),
  methods: {
    fmt(v) {
      return v instanceof Date ? v.toLocaleDateString('zh-CN') : '(선택 안 함)'
    },
    fmtArr(v) {
      if (!Array.isArray(v) || v.length === 0) return '(선택 안 함)'
      return v.map((d) => d.toLocaleDateString('zh-CN')).join(' ~ ')
    },
  },
}
</script>

Props

프로퍼티	설명	타입	기본값
v-model	현재 선택값. 단일 선택은 Date, 기간 선택과 여러 선택은 Date[]	Date \| Date[]	—
selection	선택 모드	'single' \| 'range' \| 'multiple'	'single'
range	선택 가능 날짜 범위 [start, end]. 범위 밖은 비활성화	[Date, Date]	—
mode	표시 형태: panel 상시 패널 / input 접힌 입력 상자	'panel' \| 'input'	'panel'
panels	동시에 표시할 월 패널 수 (flex 줄바꿈 배치)	number	1
placeholder	input 모드 자리표시 텍스트	string	언어 팩
closeOnSelect	input 모드에서 선택 후 자동으로 닫을지 여부	boolean	true
sx	sx 레이아웃 단축 프로퍼티	—	—

Events

input(v-model), change (value), select (date)

Slots

슬롯	설명
header	월 패널 헤더, 범위 매개변수 { year, month } (기본 "YYYY년 M월" 렌더링)
cell	날짜 셀, 범위 매개변수 { date } (기본 일자 렌더링)

접근성

패널은 role="grid", 요일 행은 role="row", 날짜 셀은 role="gridcell"이며, 비활성화된 날짜에 aria-disabled를 지정하고, input 모드 트리거는 키보드 펼치기와 방향키 이동을 지원합니다.