@gcsc/vue-calendar v1.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 플러그인 설정 필수)

<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) 시간 선택 활성화

<template>
  <BaseCalendar enableTimeSelection />
  <InputCalendar v-model="dateRange" enableTimeSelection />
</template>

3. 전역 등록

// main.ts

import '@gcsc/vue-calendar/style'

4. Props

5. Events

6. Slots

6-1. Slot 사용 예시

<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를 통해 접근할 수 있습니다.

7. Types

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 태그에서 수정 가능합니다.

<template>
  <InputCalendar  enableTimeSelection class="test"/>
</template>

<style lang="scss">
.test {
  width: 100px;
}
</style>

9. 브라우저 지원

• 모든 최신 브라우저 지원
• Vue 3.0.0 이상 필요
• TypeScript 지원

10. 라이선스

• MIT License