📅
4가지 뷰
Month / Week / Day / List 뷰를 내장. 탭 전환 또는 v-model:view로 외부 제어.
@vuepkg/calendarVue 3 Modern Calendar Engine
zero-dependency · controlled/emit-only · CSS-variable 테마 · DnD · 반복 일정
Skip to content
라이브 데모
빠른 시작
bash
npm install @vuepkg/calendarvue
<script setup lang="ts">
import { ref } from 'vue'
import { ScheduleCalendar, useScheduleCalendarHost } from '@vuepkg/calendar'
import '@vuepkg/calendar/style.css'
import type { Schedule } from '@vuepkg/calendar'
const schedules = ref<Schedule[]>([])
const { view, date, calendarListeners } = useScheduleCalendarHost({
onQueryChange(payload) {
// payload.range로 API 호출 후 schedules 갱신
},
})
</script>
<template>
<ScheduleCalendar
v-model:view="view"
v-model:date="date"
:schedules="schedules"
v-bind="calendarListeners"
/>
</template>