vue-events-booking-calendar

A Vue 3 booking calendar component inspired by Google Calendar. Built with Tailwind CSS v4, Pinia, date-fns, and Lucide icons.

Features

• 📅 Three views — Day, Week, Month
• ✏️ CRUD — Create, edit, delete booking events
• 📆 Mini calendar — Sidebar with quick date navigation
• 🕐 Upcoming panel — Shows next 5 events
• 🎨 Color picker — 8 event colors
• ⚡ Collapsible sidebar — Slide to hide/show
• ⏰ Current time indicator — Red line in week/day views
• 🔧 Config panel — Live parameter controls

Installation

npm install vue-events-booking-calendar

Quick Start

As a Plugin

import { createApp } from 'vue'
import { createPinia } from 'pinia'
import BookingCalendar from 'vue-events-booking-calendar'
import 'vue-events-booking-calendar/style.css'

const app = createApp(App)
app.use(createPinia())
app.use(BookingCalendar)
app.mount('#app')

Then use in your template:

<template>
  <BookingCalendar />
</template>

Individual Components

import {
  BookingCalendar,
  CalendarHeader,
  Sidebar,
  MonthView,
  WeekView,
  DayView,
  EventModal,
  ConfigPanel,
  useCalendarStore,
  EVENT_COLORS,
  generateSeedEvents,
} from 'vue-events-booking-calendar'
import 'vue-events-booking-calendar/style.css'

Store API

Access the calendar store via useCalendarStore():

const store = useCalendarStore()

// Navigation
store.next()
store.prev()
store.today()

// Views: 'day' | 'week' | 'month'
store.view = 'week'

// Events
store.addEvent({ title, start, end, color, guest?, email?, description? })
store.updateEvent({ id, ...fields })
store.deleteEvent(id)
store.clearAllEvents()
store.resetEvents() // reload sample data

// Modal
store.openCreateModal({ date, hour })
store.openEditModal(event)

// Read-only
store.events       // reactive event array
store.eventCount   // total events
store.todayEventCount
store.title        // formatted current date
store.currentDate  // Date object

Event Schema

interface CalendarEvent {
  id: string
  title: string
  start: string       // ISO 8601
  end: string         // ISO 8601
  color: string       // hex color
  guest?: string
  email?: string
  description?: string
}

Configuration

store.config.slotDuration        // 15 | 30 | 60 (minutes)
store.config.businessHoursStart  // 0–23
store.config.businessHoursEnd    // 0–23
store.config.firstDayOfWeek      // 0 (Sun) | 1 (Mon)
store.config.showWeekends        // boolean
store.config.sidebarPosition     // 'left' | 'right' | 'none'
store.config.maxVisibleEvents    // number
store.config.defaultEventDuration // minutes
store.config.timeFormat          // '12h' | '24h'
store.config.showHeader          // boolean
store.config.showCurrentTime     // boolean
store.config.highlightToday      // boolean
store.config.eventBorderRadius   // 'square' | 'rounded' | 'pill'
store.config.dayStartHour        // 0–23

Dialog Field Visibility

Toggle which fields appear in the event modal:

store.config.modalFields.title       // boolean
store.config.modalFields.dateTime    // boolean
store.config.modalFields.guest       // boolean
store.config.modalFields.email       // boolean
store.config.modalFields.description // boolean
store.config.modalFields.color       // boolean

Dialog Slot Customization

Customize the event modal via named slots. Every slot receives { form, isEdit } as scoped props.

| Slot | Description | |------|-------------| | header | Replace the modal header. Also receives close(). | | before-fields | Insert content before the built-in fields. | | field-title | Replace the title input. | | field-datetime | Replace the date/time inputs. | | field-guest | Replace the guest input. | | field-email | Replace the email input. | | field-description | Replace the description textarea. | | field-color | Replace the color picker. | | after-fields | Insert content after the built-in fields. | | footer | Replace the footer. Also receives save(), close(), deleteEvent(). |

Example: Add a custom phone field

<BookingCalendar>
  <template #after-fields="{ form }">
    <div class="flex items-center gap-3">
      <PhoneIcon class="w-4 h-4 text-gray-400" />
      <input v-model="form.phone" placeholder="Phone number" />
    </div>
  </template>
</BookingCalendar>

Example: Replace the header

<BookingCalendar>
  <template #header="{ isEdit, close }">
    <div class="px-6 py-4 bg-orange-500 text-white flex justify-between">
      <span>{{ isEdit ? 'Update' : 'Book Now' }}</span>
      <button @click="close">✕</button>
    </div>
  </template>
</BookingCalendar>

Example: Custom footer with extra button

<BookingCalendar>
  <template #footer="{ form, save, close }">
    <div class="flex gap-2 px-6 py-4">
      <button @click="close">Cancel</button>
      <button @click="save">Confirm Booking</button>
    </div>
  </template>
</BookingCalendar>

Color Palette

import { EVENT_COLORS } from 'vue-events-booking-calendar'
// ['#FF6B00', '#E55F00', '#33B679', '#7986CB', '#E67C73', '#8E24AA', '#F6BF26', '#616161']

Peer Dependencies

• vue ^3.4.0
• pinia ^2.1.0

License

MIT