@praisesink/calendarcn

Vue 3 calendar component library built on CSS Grid and shadcn-vue. Premium minimal design inspired by Squire and Fantastical. Dark mode first, single blue accent.

Features

• 5 views: Day, Week, Month, Agenda, Scheduler (resource)
• Drag & drop: move, resize, create events
• Recurring events via RRULE
• All-day and multi-day events
• Keyboard navigation (WAI-ARIA grid pattern)
• Category colors and status styling
• Working hours overlay
• Mobile gestures (swipe, long-press)
• Responsive breakpoints
• Full TypeScript support
• SSR compatible

Install

npm install @praisesink/calendarcn

Peer Dependencies

npm install vue@^3.4 @vueuse/core @vueuse/gesture @tanstack/vue-virtual date-fns date-fns-tz rrule reka-ui @internationalized/date lucide-vue-next class-variance-authority clsx tailwind-merge

Usage

<script setup lang="ts">
import { CalendarRoot, CalendarWeek } from '@praisesink/calendarcn'
import '@praisesink/calendarcn/styles'

const events = ref([
  {
    id: '1',
    title: 'Team Meeting',
    start: new Date(2026, 1, 14, 10, 0),
    end: new Date(2026, 1, 14, 11, 0),
    color: 'blue',
  },
])
</script>

<template>
  <div style="height: 600px">
    <CalendarRoot :events="events" initial-view="week">
      <CalendarWeek />
    </CalendarRoot>
  </div>
</template>

Views

| Component | Description | |---|---| | CalendarDay | Single day with time grid | | CalendarWeek | 3/5/7 day week with time grid | | CalendarMonth | Month grid with event pills | | CalendarAgenda | Scrollable event list | | CalendarScheduler | Resource columns with time grid |

License

MIT

Links

• GitHub
• Issues