Weekly Calendar Component for shadcn/ui

A beautiful, responsive weekly calendar component with zoom functionality, event management, and hover cards for detailed event information.

Features

• 📅 Weekly and Daily Views: Switch between weekly overview and detailed daily view
• 🔍 Zoom Functionality: Click on any day to zoom into a detailed daily view
• 📱 Mobile Responsive: Optimized for all screen sizes
• 🎯 Event Hover Cards: Detailed event information on hover
• 👥 Participant Avatars: Display event participants with avatars
• 🏷️ Tags Support: Organize events with custom tags
• ⏰ 12-hour Time Format: User-friendly time display
• 🎨 Beautiful Design: Modern UI with smooth transitions

Installation

Option 1: Using NPM Registry (Recommended)

First, ensure you have a shadcn/ui project set up. Then install the component:

npx shadcn add https://raw.githubusercontent.com/atiqisrak/shadcn-weekly-calendar/main/public/weekly-calendar.json

Or if the package is published to NPM:

npx shadcn add https://unpkg.com/@atiqisrak/shadcn-weekly-calendar@latest/public/weekly-calendar.json

Option 2: Manual Installation

If you want to install manually:

1. Install required dependencies:

   npm install lucide-react
   npx shadcn add avatar button hover-card scroll-area

2. Copy the component file to your project:

   # Create the component file
   mkdir -p components/ui
   # Copy weekly-calendar.tsx to components/ui/weekly-calendar.tsx

Option 3: Direct GitHub Installation

npx shadcn add https://raw.githubusercontent.com/atiqisrak/shadcn-weekly-calendar/main/public/weekly-calendar.json

This will automatically install the component and its dependencies:

• @/components/ui/avatar
• @/components/ui/button
• @/components/ui/hover-card
• @/components/ui/scroll-area
• lucide-react icons

Usage

import {
  WeeklyCalendar,
  type WeeklyEvent,
} from "@/components/ui/weekly-calendar";

const events: WeeklyEvent[] = [
  {
    id: "1",
    title: "Weekly Team Meeting",
    description: "Discuss project progress and upcoming milestones",
    start: "2024-01-15T10:00:00",
    end: "2024-01-15T11:00:00",
    status: "confirmed",
    participants: [
      { id: "1", name: "John Doe", image: "/avatars/john.jpg" },
      { id: "2", name: "Jane Smith", image: "/avatars/jane.jpg" },
    ],
    tags: ["meeting", "team", "weekly"],
  },
];

export default function Calendar() {
  return <WeeklyCalendar events={events} height="600px" />;
}

Props

WeeklyCalendar

| Prop | Type | Description | | -------- | --------------- | -------------------------------- | | events | WeeklyEvent[] | Array of events to display | | height | string | Height of the calendar container |

WeeklyEvent

| Property | Type | Required | Description | | -------------- | --------------- | -------- | ----------------------- | | id | string | ✅ | Unique identifier | | title | string | ✅ | Event title | | start | string | ✅ | Start time (ISO string) | | end | string | ✅ | End time (ISO string) | | description | string | ❌ | Event description | | participants | Participant[] | ❌ | Event participants | | status | string | ❌ | Event status | | tags | string[] | ❌ | Event tags |

Participant

| Property | Type | Required | Description | | -------- | -------- | -------- | ----------------- | | id | string | ✅ | Unique identifier | | name | string | ✅ | Participant name | | image | string | ❌ | Avatar image URL |

Features

Navigation

• Month Navigation: Navigate between months
• Week Navigation: Navigate between weeks
• Day Navigation: When zoomed in, navigate between days

Zoom Functionality

• Click on any day header to zoom into detailed daily view
• Click the zoom out button to return to weekly view
• Automatic scrolling to 8 AM on zoom

Event Display

• Events spanning multiple days are properly displayed
• Hover cards show detailed event information
• Participant avatars with fallback initials
• Color-coded events based on type

Styling

The component uses Tailwind CSS and follows shadcn/ui design patterns. It includes:

• Light/dark mode support
• Responsive design
• Smooth transitions and hover effects
• Modern card-based layout

License

MIT