npm package: @gcsc/vue-calendar
Description: Vue 3를 위한 날짜 범위 선택 캘린더 컴포넌트입니다.
Author: Jeongin Choi
Latest version: 1.0.9

# Vue3 Range Calendar

Vue 3를 위한 날짜 범위 선택 캘린더 컴포넌트입니다.

### 1. 설치
```
# npm
npm install @gcsc/vue-calendar pinia dayjs

# yarn
yarn add @gcsc/vue-calendar pinia dayjs
```

### 2. 사용 방법
#### 2-1) 기본 사용법(dayjs 플러그인 설정 필수)

```vue

<template>
  <BaseCalendar/>
  <InputCalendar  ref="calendarRef" v-model="dateRange"/>

</template>
<script setup lang="ts">
import {BaseCalendar, InputCalendar} from '@gcsc/vue-calendar';
import {ref} from "vue";
import dayjs from 'dayjs';

import isSameOrAfter from 'dayjs/plugin/isSameOrAfter';
import isSameOrBefore from 'dayjs/plugin/isSameOrBefore';
import isBetween from 'dayjs/plugin/isBetween';

dayjs.extend(isSameOrAfter);
dayjs.extend(isSameOrBefore);
dayjs.extend(isBetween);

const calendarRef = ref(null);

const dateRange = ref({
  start: null,
  end: null
});

</script>
```

#### 2-2) 시간 선택 활성화
```vue
<template>
  <BaseCalendar enableTimeSelection />
  <InputCalendar v-model="dateRange" enableTimeSelection />
</template>
```

### 3. 전역 등록
```
// main.ts

import '@gcsc/vue-calendar/style'

```

### 4. Props
| 이름 | 타입 | 기본값 | 설명 |
|------|------|--------|------|
| enableTimeSelection | boolean | false | 시간 선택 기능 활성화 여부 |

### 5. Events
| 이름 | 파라미터 | 설명 |
|------|----------|------|
| select | { start: string \| null, end: string \| null } | 날짜/시간 선택 시 발생하는 이벤트. start와 end는 'YYYY-MM-DD HH:mm' 형식 |

### 6. Slots
| 이름                   | 설명 |
|----------------------|------|
| close-button         | 캘린더 팝업의 닫기 버튼을 커스터마이징할 수 있는 슬롯 | 
| default              | 캘린더 하단에 추가 버튼이나 컨텐츠를 삽입할 수 있는 슬롯 | 
| enable-time-selection | 시간 선택 UI 커스터마이징을 위한 슬롯 | - |

#### 6-1. Slot 사용 예시

```vue

<template>
  <InputCalendar
      v-model="dateRange"
      enableTimeSelection
  >
    <!-- 닫기 버튼 커스터마이징 -->
    <template #close-button>
      <button class="close-btn" @click="closeCalendar" type="button">
        <span class="close-icon">×</span>
      </button>
    </template>
    <!-- 하단 버튼 영역 커스터마이징 -->
    <template #default>
      <button @click="refreshCalendar" type="button">
        새로고침
      </button>
    </template>
  </InputCalendar>
</template>
<script setup lang="ts">
import {ref} from "vue";
import type {InputCalendarInstance} from '@/types/calendar';
const calendarRef = ref<InputCalendarInstance | null>(null);

const closeCalendar = () => {
  if (calendarRef.value) {
    calendarRef.value.closeCalendar();
  }
};
const refreshCalendar = () => {
  if (calendarRef.value) {
    calendarRef.value.refresh();
  }
};
</script>
```

#### 6-2. Methods
캘린더 컴포넌트에서 제공하는 메서드들입니다. ref를 통해 접근할 수 있습니다.

| 메서드 | 설명 |
|--------|------|
| closeCalendar | 캘린더 팝업을 닫습니다. |
| refresh | 캘린더의 선택된 날짜를 초기화합니다. |

### 7. Types
```typescript
interface TimeValue {
hours: number;
minutes: number;
}

interface DateRange {
start: string | null;
end: string | null;
}

interface DateTimeState {
    date: string;
    fullInput: string;
    time: TimeValue;
}

interface DateInfo {
    date: string;
    day: number;
    currentMonth: boolean;
}

interface CalendarProps {
    currentDate: Dayjs;
    selectedInput: 'start' | 'end' | null;
    startDate: string;
    endDate: string;
    enableTimeSelection?: boolean;
}

interface InputCalendarProps {
    modelValue: DateRange;
    enableTimeSelection?: boolean;
}

interface InputCalendarExpose {
    refresh: () => void;
    closeCalendar: () => void;
}

interface InputCalendarInstance extends ComponentPublicInstance, InputCalendarExpose {}
```

### 8. 스타일 커스터마이징
컴포넌트의 스타일은 class 명 지정 후 style 태그에서 수정 가능합니다.
```vue
<template>
  <InputCalendar  enableTimeSelection class="test"/>
</template>

<style lang="scss">
.test {
  width: 100px;
}
</style>

```

## 9. 브라우저 지원
- 모든 최신 브라우저 지원
-  Vue 3.0.0 이상 필요
-  TypeScript 지원

## 10. 라이선스
- MIT License