npm package: @huzaifawaqar/premium-modern-big-calendar
Description: The most beautifully crafted React calendar library. 12 stunning theme presets, glassmorphism effects, and infinite customization.
Author: Huzaifa Waqar
Latest version: 1.0.3

<p align="center">
  <img src="https://img.shields.io/npm/v/@huzaifawaqar/premium-modern-calendar?style=flat-square&color=6366f1" alt="npm version" />
  <img src="https://img.shields.io/npm/dm/@huzaifawaqar/premium-modern-calendar?style=flat-square&color=22c55e" alt="downloads" />
  <img src="https://img.shields.io/bundlephobia/minzip/@huzaifawaqar/premium-modern-calendar?style=flat-square&color=f97316" alt="bundle size" />
  <img src="https://img.shields.io/npm/l/@huzaifawaqar/premium-modern-calendar?style=flat-square&color=ec4899" alt="license" />
  <img src="https://img.shields.io/badge/TypeScript-Ready-3178c6?style=flat-square" alt="typescript" />
</p>

<h1 align="center">🗓️ Premium Modern Calendar</h1>

<p align="center">
  <strong>The most beautifully crafted React calendar library. Pixel-perfect design, 12 stunning theme presets, glassmorphism effects, and infinite customization.</strong>
</p>

<p align="center">
  <img src="https://raw.githubusercontent.com/huzaifawaqar77/calendar-library/main/screenshots/month-view.png" alt="Premium Modern Calendar - Month View" width="800" />
</p>

<p align="center">
  <a href="#-features">Features</a> •
  <a href="#-installation">Installation</a> •
  <a href="#-quick-start">Quick Start</a> •
  <a href="#-theme-presets">Themes</a> •
  <a href="#-views">Views</a> •
  <a href="#-customization">Customization</a> •
  <a href="#-api-reference">API</a> •
  <a href="https://uiflexer.com/docs/calendar">📖 Documentation</a>
</p>

---

## ✨ Features

| Feature                     | Description                                                                                                          |
| --------------------------- | -------------------------------------------------------------------------------------------------------------------- |
| 🎨 **12 Theme Presets**     | Handcrafted themes: Indigo, Ocean, Sunset, Forest, Rose, Lavender, Midnight, Noir, Dracula, Nord, Cyberpunk, Monokai |
| 🪟 **Glassmorphism**        | Beautiful frosted glass effects with customizable blur and opacity                                                   |
| 🌈 **Gradient Backgrounds** | Linear, radial, and conic gradients with full control                                                                |
| 🌓 **Light & Dark Modes**   | Seamless theme switching with auto-detection                                                                         |
| 📱 **Fully Responsive**     | Fluid typography and container queries for all screen sizes                                                          |
| 🎭 **5 Views**              | Month, Week, Day, Year, and Timeline Agenda views                                                                    |
| 🎯 **Radial Event Menu**    | Sleek circular event selector for days with multiple events                                                          |
| 📋 **Rich Event Modal**     | Customizable event details with images, icons, and sections                                                          |
| ⚡ **Animation Control**    | Adjust speed, type, or disable animations entirely                                                                   |
| 🔤 **Typography Options**   | Custom fonts, scales, and weights                                                                                    |
| ♿ **Accessible**           | WCAG compliant with full keyboard navigation                                                                         |
| 🔷 **TypeScript**           | Full type definitions included                                                                                       |

---

## 📦 Installation

```bash
# npm
npm install @huzaifawaqar/premium-modern-calendar

# yarn
yarn add @huzaifawaqar/premium-modern-calendar

# pnpm
pnpm add @huzaifawaqar/premium-modern-calendar
```

### Peer Dependencies

This library requires React 18 or higher:

```bash
npm install react react-dom
```

---

## 🚀 Quick Start

### Basic Usage

```tsx
import { Calendar } from "@huzaifawaqar/premium-modern-calendar";
import "@huzaifawaqar/premium-modern-calendar/styles";

function App() {
  const events = [
    {
      id: "1",
      title: "Team Meeting",
      start: new Date(2026, 0, 22, 10, 0),
      end: new Date(2026, 0, 22, 11, 0),
      color: "#6366f1",
    },
    {
      id: "2",
      title: "Lunch Break",
      start: new Date(2026, 0, 22, 12, 0),
      end: new Date(2026, 0, 22, 13, 0),
      color: "#22c55e",
    },
  ];

  return (
    <div style={{ height: "600px" }}>
      <Calendar
        events={events}
        onEventClick={(event) => console.log("Clicked:", event)}
        onDateClick={(date) => console.log("Date:", date)}
      />
    </div>
  );
}
```

### With Theme Preset

```tsx
import { Calendar } from "@huzaifawaqar/premium-modern-calendar";
import "@huzaifawaqar/premium-modern-calendar/styles";

function App() {
  return (
    <Calendar
      events={events}
      themePreset="dracula" // Use any of the 12 presets
      glass={true} // Enable glassmorphism
      elevated={true} // Enhanced shadow
      borderRadius="xl"
    />
  );
}
```

---

## 🎨 Theme Presets

Choose from **12 handcrafted theme presets** - 6 light and 6 dark themes:

### Light Themes

<p align="center">
  <img src="https://raw.githubusercontent.com/huzaifawaqar77/calendar-library/main/screenshots/theme-indigo.png" alt="Indigo Theme" width="400" />
  <img src="https://raw.githubusercontent.com/huzaifawaqar77/calendar-library/main/screenshots/theme-ocean.png" alt="Ocean Theme" width="400" />
</p>
<p align="center">
  <img src="https://raw.githubusercontent.com/huzaifawaqar77/calendar-library/main/screenshots/theme-sunset.png" alt="Sunset Theme" width="400" />
  <img src="https://raw.githubusercontent.com/huzaifawaqar77/calendar-library/main/screenshots/theme-forest.png" alt="Forest Theme" width="400" />
</p>
<p align="center">
  <img src="https://raw.githubusercontent.com/huzaifawaqar77/calendar-library/main/screenshots/theme-rose.png" alt="Rose Theme" width="400" />
  <img src="https://raw.githubusercontent.com/huzaifawaqar77/calendar-library/main/screenshots/theme-lavendar.png" alt="Lavender Theme" width="400" />
</p>

| Theme      | Preview | Description                                       |
| ---------- | ------- | ------------------------------------------------- |
| `indigo`   | 🟣      | Modern and professional with elegant purple tones |
| `ocean`    | 🔵      | Calm and serene with deep blue vibes              |
| `sunset`   | 🟠      | Warm and energetic with golden hour colors        |
| `forest`   | 🟢      | Natural and grounded with lush green tones        |
| `rose`     | 🌸      | Soft and romantic with delicate pink hues         |
| `lavender` | 💜      | Elegant and dreamy with soft purple shades        |

### Dark Themes

<p align="center">
  <img src="https://raw.githubusercontent.com/huzaifawaqar77/calendar-library/main/screenshots/theme-midnight.png" alt="Midnight Theme" width="400" />
  <img src="https://raw.githubusercontent.com/huzaifawaqar77/calendar-library/main/screenshots/theme-noir.png" alt="Noir Theme" width="400" />
</p>
<p align="center">
  <img src="https://raw.githubusercontent.com/huzaifawaqar77/calendar-library/main/screenshots/theme-dracula.png" alt="Dracula Theme" width="400" />
  <img src="https://raw.githubusercontent.com/huzaifawaqar77/calendar-library/main/screenshots/theme-nord.png" alt="Nord Theme" width="400" />
</p>
<p align="center">
  <img src="https://raw.githubusercontent.com/huzaifawaqar77/calendar-library/main/screenshots/theme-cyberpunk.png" alt="Cyberpunk Theme" width="400" />
  <img src="https://raw.githubusercontent.com/huzaifawaqar77/calendar-library/main/screenshots/theme-monokai.png" alt="Monokai Theme" width="400" />
</p>

| Theme       | Preview | Description                                    |
| ----------- | ------- | ---------------------------------------------- |
| `midnight`  | 🌙      | Deep and mysterious dark elegance              |
| `noir`      | ⚫      | Ultra-dark with striking high contrast         |
| `dracula`   | 🧛      | The iconic dark theme with purple accents      |
| `nord`      | ❄️      | Clean arctic-inspired color palette            |
| `cyberpunk` | 💠      | Futuristic neon aesthetics                     |
| `monokai`   | 🎨      | Classic developer favorite with vibrant colors |

### Using Theme Presets

```tsx
// Just set the themePreset prop!
<Calendar themePreset="dracula" />;

// Or programmatically access preset data
import {
  getThemePreset,
  getLightPresets,
  getDarkPresets,
} from "@huzaifawaqar/premium-modern-calendar";

const dracula = getThemePreset("dracula");
console.log(dracula.colors.primary); // "#bd93f9"

const lightThemes = getLightPresets(); // Array of 6 light themes
const darkThemes = getDarkPresets(); // Array of 6 dark themes
```

---

## 🎭 Views

### Month View

The default view showing a full month grid with stacked event indicators.

<p align="center">
  <img src="https://raw.githubusercontent.com/huzaifawaqar77/calendar-library/main/screenshots/month-view.png" alt="Month View" width="700" />
</p>

```tsx
<Calendar view="month" />
```

**Features:**

- Stacked event cards for days with multiple events
- Click on stacked events to open the radial menu
- Hover effects and smooth transitions

### Week View

A 7-day view with hourly time slots.

<p align="center">
  <img src="https://raw.githubusercontent.com/huzaifawaqar77/calendar-library/main/screenshots/week-view.png" alt="Week View" width="700" />
</p>

```tsx
<Calendar view="week" />
```

**Features:**

- 24-hour time grid
- Events positioned by time
- Today column highlighting

### Day View

Detailed single-day view with all-day events section.

```tsx
<Calendar view="day" />
```

**Features:**

- All-day events section at top
- Hourly time slots
- Current time indicator

### Year View

Full year overview with mini-month calendars.

<p align="center">
  <img src="https://raw.githubusercontent.com/huzaifawaqar77/calendar-library/main/screenshots/year-view.png" alt="Year View" width="700" />
</p>

```tsx
<Calendar view="year" />
```

**Features:**

- 12 mini-month grids
- Event indicators as dots
- Click to navigate to specific month

### Agenda View

Timeline-style list of upcoming events with **6 beautiful variants**.

```tsx
<Calendar view="agenda" daysToShow={14} agendaVariant="timeline" />
```

#### Agenda Variants

<p align="center">
  <img src="https://raw.githubusercontent.com/huzaifawaqar77/calendar-library/main/screenshots/agenda-timeline.png" alt="Agenda Timeline Variant" width="400" />
  <img src="https://raw.githubusercontent.com/huzaifawaqar77/calendar-library/main/screenshots/agenda-cards.png" alt="Agenda Cards Variant" width="400" />
</p>
<p align="center">
  <img src="https://raw.githubusercontent.com/huzaifawaqar77/calendar-library/main/screenshots/agenda-minimal.png" alt="Agenda Minimal Variant" width="400" />
  <img src="https://raw.githubusercontent.com/huzaifawaqar77/calendar-library/main/screenshots/agenda-grouped.png" alt="Agenda Grouped Variant" width="400" />
</p>
<p align="center">
  <img src="https://raw.githubusercontent.com/huzaifawaqar77/calendar-library/main/screenshots/agenda-compact.png" alt="Agenda Compact Variant" width="400" />
  <img src="https://raw.githubusercontent.com/huzaifawaqar77/calendar-library/main/screenshots/agenda-board.png" alt="Agenda Board Variant" width="400" />
</p>

| Variant    | Description                                                    |
| ---------- | -------------------------------------------------------------- |
| `timeline` | Classic vertical timeline with connector lines and date badges |
| `cards`    | Modern card-based layout with shadows and hover effects        |
| `minimal`  | Clean, simple list with essential information only             |
| `grouped`  | Events grouped by date with clear section headers              |
| `compact`  | Dense layout for displaying many events                        |
| `board`    | Kanban-style horizontal scrolling board                        |

**Features:**

- Vertical timeline with connectors
- Date indicators on right side
- "Now" indicator for current events
- Support for event images

---

## 📱 Mobile Responsive

The calendar is fully responsive and works beautifully on all screen sizes.

<p align="center">
  <img src="https://raw.githubusercontent.com/huzaifawaqar77/calendar-library/main/screenshots/mobile-month.png" alt="Mobile Month View" width="300" />
  <img src="https://raw.githubusercontent.com/huzaifawaqar77/calendar-library/main/screenshots/mobile-agenda.png" alt="Mobile Agenda View" width="300" />
</p>

**Mobile Features:**

- Fluid typography that scales with viewport
- Touch-friendly event interactions
- Swipe gestures for navigation
- Compact layouts for smaller screens
- Container queries for component-level responsiveness

---

## 🎨 Customization

### Glassmorphism Effect

Create stunning frosted glass effects:

```tsx
// Simple glass effect
<Calendar glass={true} />

// Advanced glass configuration
<Calendar
  glass={{
    enabled: true,
    blur: "lg",        // 'none' | 'sm' | 'md' | 'lg' | 'xl'
    opacity: 0.7,      // 0 to 1
    saturation: 1.5,   // Color saturation multiplier
  }}
/>
```

### Gradient Backgrounds

Add beautiful gradient backgrounds:

```tsx
// Simple gradient
<Calendar gradient={true} />

// Custom gradient
<Calendar
  gradient={{
    enabled: true,
    type: "linear",     // 'linear' | 'radial' | 'conic'
    angle: 135,         // Degrees (for linear/conic)
    colors: ["#6366f1", "#ec4899", "#8b5cf6"],
  }}
/>
```

### Shadow Control

Fine-tune shadow intensity:

```tsx
<Calendar
  shadow={{
    intensity: "glow", // 'none' | 'subtle' | 'soft' | 'medium' | 'strong' | 'glow'
    color: "#6366f1", // Optional custom shadow color
  }}
/>
```

### Animation Options

Control animation behavior:

```tsx
// Disable all animations
<Calendar animation={{ enabled: false }} />

// Adjust speed
<Calendar
  animation={{
    speed: "fast",      // 'slow' | 'normal' | 'fast'
    type: "slide",      // 'fade' | 'slide' | 'scale' | 'bounce'
  }}
/>
```

### Typography Customization

Customize fonts and text styling:

```tsx
<Calendar
  typography={{
    fontFamily: "'Inter', sans-serif",
    fontFamilyMono: "'Fira Code', monospace",
    scale: "relaxed", // 'compact' | 'normal' | 'relaxed'
    weight: "medium", // 'light' | 'normal' | 'medium' | 'bold'
  }}
/>
```

### Layout Variants

```tsx
// Compact mode - reduced spacing
<Calendar compact={true} />

// Dense mode - minimal spacing
<Calendar dense={true} />

// Elevated - enhanced shadow on hover
<Calendar elevated={true} />

// Bordered - subtle border instead of shadow
<Calendar bordered={true} />
```

### Theming with Props

```tsx
<Calendar
  theme="dark" // 'light' | 'dark' | 'auto'
  accentColor="#8b5cf6" // Any hex color
  borderRadius="xl" // 'none' | 'sm' | 'base' | 'md' | 'lg' | 'xl' | '2xl' | 'full'
  colorScheme={{
    primary: "#8b5cf6",
    primaryHover: "#7c3aed",
    primarySoft: "#f5f3ff",
    surface: "#ffffff",
    surfaceElevated: "#fafafa",
    surfaceHover: "#f5f5f5",
    background: "#fafafa",
    text: "#171717",
    textMuted: "#737373",
    border: "#e5e5e5",
    borderLight: "#f5f5f5",
    focusRing: "rgba(139, 92, 246, 0.4)",
    eventColors: ["#6366f1", "#ec4899", "#22c55e", "#f97316"],
  }}
/>
```

### CSS Custom Properties

Override any design token by setting CSS custom properties:

```css
.my-calendar {
  /* Colors */
  --pmc-color-primary: #8b5cf6;
  --pmc-color-primary-hover: #7c3aed;
  --pmc-color-surface: #ffffff;
  --pmc-color-surface-elevated: #f8fafc;
  --pmc-color-text: #1e293b;
  --pmc-color-text-muted: #64748b;
  --pmc-color-border: #e2e8f0;

  /* Typography */
  --pmc-font-family-base: "Inter", system-ui, sans-serif;
  --pmc-font-size-base: 1rem;
  --pmc-font-size-sm: 0.875rem;
  --pmc-font-size-xs: 0.75rem;

  /* Spacing */
  --pmc-space-1: 0.25rem;
  --pmc-space-2: 0.5rem;
  --pmc-space-3: 0.75rem;
  --pmc-space-4: 1rem;

  /* Border Radius */
  --pmc-radius-sm: 0.25rem;
  --pmc-radius-base: 0.375rem;
  --pmc-radius-lg: 0.5rem;
  --pmc-radius-xl: 0.75rem;

  /* Shadows */
  --pmc-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --pmc-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
  --pmc-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);

  /* Animations */
  --pmc-duration-fast: 150ms;
  --pmc-duration-base: 200ms;
  --pmc-ease-out: cubic-bezier(0.33, 1, 0.68, 1);
}
```

```tsx
<Calendar className="my-calendar" />
```

### Custom Event Rendering

```tsx
<Calendar
  renderEvent={(event) => (
    <div className="my-custom-event">
      <span className="event-icon">📅</span>
      <span>{event.title}</span>
    </div>
  )}
/>
```

---

## 📋 Event Modal Customization

The built-in event modal is highly customizable:

```tsx
import {
  EventModal,
  EventModalSection,
} from "@huzaifawaqar/premium-modern-calendar";

// Custom sections
const sections: EventModalSection[] = [
  { type: "heading", content: "Meeting Details" },
  { type: "text", content: "This is an important quarterly review." },
  { type: "image", imageUrl: "/meeting-room.jpg", imageAlt: "Meeting Room" },
  { type: "icon-text", icon: "👥", content: "5 attendees" },
  { type: "divider" },
  { type: "custom", render: () => <MyCustomComponent /> },
];

<EventModal
  event={selectedEvent}
  isOpen={modalOpen}
  onClose={() => setModalOpen(false)}
  sections={sections}
  onEventAction={(action, event) => {
    if (action === "edit") handleEdit(event);
    if (action === "delete") handleDelete(event);
  }}
  // Custom styling
  className="my-modal"
  headerClassName="my-modal-header"
  bodyClassName="my-modal-body"
  footerClassName="my-modal-footer"
  // Or completely custom rendering
  renderHeader={(event) => <MyCustomHeader event={event} />}
  renderBody={(event) => <MyCustomBody event={event} />}
  renderFooter={(event) => <MyCustomFooter event={event} />}
/>;
```

---

## 🎯 Radial Event Menu

When a day has multiple events, clicking opens a GTA V-style radial menu:

```tsx
import { RadialEventMenu } from "@huzaifawaqar/premium-modern-calendar";

<RadialEventMenu
  events={dayEvents}
  isOpen={menuOpen}
  onEventSelect={(event) => {
    setSelectedEvent(event);
    setModalOpen(true);
  }}
  onClose={() => setMenuOpen(false)}
/>;
```

---

## 📖 API Reference

### Calendar Props

| Prop           | Type                                                                  | Default      | Description                        |
| -------------- | --------------------------------------------------------------------- | ------------ | ---------------------------------- |
| `events`       | `CalendarEvent[]`                                                     | `[]`         | Array of calendar events           |
| `view`         | `'month' \| 'week' \| 'day' \| 'year' \| 'agenda'`                    | `'month'`    | Current calendar view              |
| `date`         | `Date`                                                                | `new Date()` | Currently displayed date           |
| `onDateChange` | `(date: Date) => void`                                                | -            | Called when date changes           |
| `onViewChange` | `(view: CalendarView) => void`                                        | -            | Called when view changes           |
| `onEventClick` | `(event: CalendarEvent) => void`                                      | -            | Called when event is clicked       |
| `onDateClick`  | `(date: Date) => void`                                                | -            | Called when a date cell is clicked |
| `theme`        | `'light' \| 'dark' \| 'auto'`                                         | `'light'`    | Base color theme                   |
| `themePreset`  | `ThemePresetName`                                                     | -            | Use a built-in theme preset        |
| `accentColor`  | `string`                                                              | `'#6366f1'`  | Primary accent color (hex)         |
| `borderRadius` | `'none' \| 'sm' \| 'base' \| 'md' \| 'lg' \| 'xl' \| '2xl' \| 'full'` | `'lg'`       | Border radius preset               |
| `glass`        | `boolean \| GlassEffectOptions`                                       | -            | Enable glassmorphism effect        |
| `gradient`     | `boolean \| GradientOptions`                                          | -            | Enable gradient background         |
| `shadow`       | `ShadowOptions`                                                       | -            | Shadow intensity and color         |
| `animation`    | `AnimationOptions`                                                    | -            | Animation speed and type           |
| `typography`   | `TypographyOptions`                                                   | -            | Font customization                 |
| `compact`      | `boolean`                                                             | `false`      | Compact layout mode                |
| `dense`        | `boolean`                                                             | `false`      | Dense layout mode                  |
| `elevated`     | `boolean`                                                             | `false`      | Enhanced shadow styling            |
| `bordered`     | `boolean`                                                             | `false`      | Border instead of shadow           |
| `colorScheme`  | `ColorScheme`                                                         | -            | Custom color scheme                |
| `weekStartsOn` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6`                                     | `0`          | First day of week (0=Sunday)       |
| `renderEvent`  | `(event: CalendarEvent) => ReactNode`                                 | -            | Custom event renderer              |
| `className`    | `string`                                                              | -            | Additional CSS class               |

### Theme Preset Names

```typescript
type ThemePresetName =
  // Light themes
  | "indigo" // Modern purple (default)
  | "ocean" // Calm blue
  | "sunset" // Warm orange
  | "forest" // Natural green
  | "rose" // Soft pink
  | "lavender" // Dreamy purple
  // Dark themes
  | "midnight" // Deep dark
  | "noir" // Pure black
  | "dracula" // Purple accents
  | "nord" // Arctic blue
  | "cyberpunk" // Neon futuristic
  | "monokai"; // Vibrant classic
```

### Advanced Options Interfaces

```typescript
interface GlassEffectOptions {
  enabled?: boolean;
  blur?: "none" | "sm" | "md" | "lg" | "xl";
  opacity?: number; // 0 to 1
  saturation?: number; // Multiplier
}

interface GradientOptions {
  enabled?: boolean;
  type?: "linear" | "radial" | "conic";
  angle?: number; // Degrees
  colors?: string[]; // Array of color stops
}

interface ShadowOptions {
  intensity?: "none" | "subtle" | "soft" | "medium" | "strong" | "glow";
  color?: string;
}

interface AnimationOptions {
  enabled?: boolean;
  speed?: "slow" | "normal" | "fast";
  type?: "fade" | "slide" | "scale" | "bounce";
}

interface TypographyOptions {
  fontFamily?: string;
  fontFamilyMono?: string;
  scale?: "compact" | "normal" | "relaxed";
  weight?: "light" | "normal" | "medium" | "bold";
}
```

### CalendarEvent Interface

```typescript
interface CalendarEvent {
  id: string; // Unique identifier
  title: string; // Event title
  start: Date; // Start date/time
  end: Date; // End date/time
  color?: string; // Event color (hex)
  description?: string; // Event description
  allDay?: boolean; // All-day event flag
  location?: string; // Event location
  metadata?: Record<string, any>; // Custom data (e.g., { image: "url" })
}
```

### AgendaView Props

| Prop               | Type                                           | Default | Description                 |
| ------------------ | ---------------------------------------------- | ------- | --------------------------- |
| `daysToShow`       | `number`                                       | `14`    | Number of days to display   |
| `showTimeline`     | `boolean`                                      | `true`  | Show timeline connector     |
| `showImages`       | `boolean`                                      | `true`  | Show event images           |
| `showDescription`  | `boolean`                                      | `true`  | Show event descriptions     |
| `showLocation`     | `boolean`                                      | `true`  | Show event locations        |
| `renderEvent`      | `(props: AgendaEventRenderProps) => ReactNode` | -       | Custom event renderer       |
| `renderDateHeader` | `(props: AgendaDateRenderProps) => ReactNode`  | -       | Custom date header renderer |
| `renderEmptyState` | `() => ReactNode`                              | -       | Custom empty state          |

---

## 🪝 Hooks

### useCalendar

Access calendar state and navigation:

```tsx
import { useCalendar } from "@huzaifawaqar/premium-modern-calendar";

const { currentDate, view, days, navigate, goToToday } = useCalendar({
  initialDate: new Date(),
  initialView: "month",
  events: myEvents,
});
```

### useCalendarNavigation

Keyboard navigation support:

```tsx
import { useCalendarNavigation } from "@huzaifawaqar/premium-modern-calendar";

const { selectedDate, handlers } = useCalendarNavigation({
  onDateSelect: (date) => console.log(date),
});
```

---

## 🎨 Utility Functions

### generateThemeStyles

Generate CSS variables from props:

```tsx
import { generateThemeStyles } from "@huzaifawaqar/premium-modern-calendar";

const styles = generateThemeStyles({
  accentColor: "#8b5cf6",
  borderRadius: "xl",
});
// Returns: { '--pmc-color-primary': '#8b5cf6', ... }
```

### getEventColorFromPalette

Get consistent event colors:

```tsx
import { getEventColorFromPalette } from "@huzaifawaqar/premium-modern-calendar";

const color = getEventColorFromPalette(2); // Returns 3rd color from palette
```

---

## 📱 Responsive Behavior

The calendar uses CSS Container Queries for responsive design:

| Container Width | Behavior                           |
| --------------- | ---------------------------------- |
| `> 768px`       | Full desktop layout                |
| `600-768px`     | Compact headers, smaller fonts     |
| `400-600px`     | Mobile-optimized, stacked layouts  |
| `< 400px`       | Minimal UI, touch-friendly targets |

No media queries needed - the calendar adapts to its container width automatically.

---

## 🌐 Browser Support

- Chrome 105+
- Firefox 110+
- Safari 16+
- Edge 105+

_Requires browsers with CSS Container Query support._

---

## 📄 License

MIT © [Huzaifa Waqar](https://github.com/huzaifawaqar)

---

## 🤝 Contributing

Contributions are welcome! Please read our [Contributing Guide](CONTRIBUTING.md) for details.

---

<p align="center">
  Made with ❤️ for the React community
</p>