Calendar Component

A flexible React compound component library for displaying calendars with month, week, and day views. Built with React, TypeScript, and shadcn/ui components.

Features

• 📅 Multiple views (Month, Week, Day)
• 🔄 Multi-day and all-day events
• 📊 Intelligent event stacking
• 🎨 Custom event colors
• ⌨️ Keyboard shortcuts
• 🎯 Date/time selection
• ♿ Accessible (ARIA labels, keyboard navigation)

Installation

npm install @calendar-engine-io/calendar-component
# or
bun add @calendar-engine-io/calendar-component
# or
yarn add @calendar-engine-io/calendar-component
# or
pnpm add @calendar-engine-io/calendar-component

Usage

import { Calendar } from '@calendar-engine-io/calendar-component'
import '@calendar-engine-io/calendar-component/styles'
import type { CalendarEvent } from '@calendar-engine-io/calendar-component'

const events: CalendarEvent[] = [
  {
    id: '1',
    title: 'Team Meeting',
    start: new Date(2024, 0, 15, 10, 0),
    end: new Date(2024, 0, 15, 11, 30),
    color: '#3b82f6',
    description: 'Weekly team sync',
  },
  {
    id: '2',
    title: 'Multi-day Event',
    start: new Date(2024, 0, 18, 0, 0),
    end: new Date(2024, 0, 20, 23, 59),
    color: '#ef4444',
  },
  {
    id: '3',
    title: 'Holiday',
    start: new Date(2024, 0, 25),
    end: new Date(2024, 0, 25),
    allDay: true,
    color: '#10b981',
  },
]

function App() {
  const handleEventClick = (event: CalendarEvent) => {
    console.log('Event clicked:', event)
    // Open event details modal, navigate to event page, etc.
  }

  const handleDateSelect = (date: Date) => {
    console.log('Date selected:', date.toISOString())
    // Open a creation dialog, fetch events, etc.
  }

  return (
    <Calendar
      initialDate={new Date()}
      initialView="month"
      initialEvents={events}
      onEventClick={handleEventClick}
      onDateSelect={handleDateSelect}
    />
  )
}

Required Setup

Make sure you have Tailwind CSS configured in your project. The component requires Tailwind CSS to work properly.

Development

Prerequisites

• Node.js 18+ or Bun
• React 16.8.0+

Setup

# Install dependencies
bun install

# Start Storybook
bun run storybook

Build

# Build the library
bun run build

Storybook

This project uses Storybook for component development and documentation.

# Start Storybook development server
bun run storybook

# Build static Storybook
bun run build-storybook

Visit http://localhost:6006 to view the interactive component documentation.