@atiqisrak/shadcn-weekly-calendar/README.md

A beautiful weekly calendar component for shadcn/ui with zoom functionality and event management

# 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:

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

Or if the package is published to NPM:

```bash
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:

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

2. Copy the component file to your project:
   ```bash
   # Create the component file
   mkdir -p components/ui
   # Copy weekly-calendar.tsx to components/ui/weekly-calendar.tsx
   ```

### Option 3: Direct GitHub Installation

```bash
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

```tsx
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