calendar-elements-demo/README.md

# Calendar Elements Demo

Interactive demo application showcasing the `calendar-elements-ui` library components.

## Overview

This demo application provides comprehensive examples of all 24 calendar components including:

- **Calendar Views**: Month, Week, Day, and Agenda views
- **Date/Time Pickers**: Date, Time, Date Range, and Duration pickers
- **Components**: Event Card, Mini Calendar, Time Slot Grid, Calendar Header, Recurring Event Form, Timezone Selector, Availability Panel, and Event Dialog
- **Widgets**: Event Indicator Calendar, Calendar Heatmap, Upcoming Events, Today Widget, Week at a Glance, Month Carousel, Date Badge, and Calendar Mini Month

## Features

✨ **24 Interactive Demos** - Showcase of all calendar components
🎨 **Dual Themes** - Switch between Mist and Apple UI themes
🌓 **Dark/Light Mode** - Toggle between dark and light modes
📱 **Responsive Design** - Works on desktop, tablet, and mobile
🎯 **Realistic Mock Data** - Events, recurrence rules, time slots, and more
🧭 **Easy Navigation** - Sidebar navigation to explore all components

## Prerequisites

- Node.js 18 or higher
- npm 9 or higher
- Angular CLI 19 or higher

## Installation

1. **Clone or navigate to the project directory**:
   ```bash
   cd /Users/giulianosilvestro/Documents/Projects/calendar-elements-demo
   ```

2. **Install dependencies**:
   ```bash
   npm install
   ```

3. **Ensure library dependencies are built**:

   Build `calendar-elements-ui` (if not already built):
   ```bash
   cd ../calendar-elements-ui
   npm run build
   cd ../calendar-elements-demo
   ```

   Build `base-ui` (if not already built):
   ```bash
   cd ../sda-frontend/libs/base-ui
   npm run build
   cd ../../../calendar-elements-demo
   ```

## Development

Start the development server:

```bash
npm start
```

The app will be available at `http://localhost:4200`

## Build

Build the application for production:

```bash
npm run build
```

The build artifacts will be stored in the `dist/` directory.

## Project Structure

```
calendar-elements-demo/
├── src/
│   ├── app/
│   │   ├── mock-data/
│   │   │   └── calendar-data.ts       # Mock events, recurrence rules, time slots
│   │   ├── app.component.ts           # Root component with demo state
│   │   ├── app.component.html         # Main template with navigation
│   │   ├── app.component.scss         # Component styles
│   │   ├── app.config.ts              # App configuration
│   │   └── app.routes.ts              # Routing configuration
│   ├── index.html                     # HTML shell
│   ├── main.ts                        # Bootstrap entry point
│   └── styles.scss                    # Global styles with themes
├── angular.json                       # Angular CLI configuration
├── package.json                       # Dependencies
└── tsconfig.json                      # TypeScript configuration
```

## Mock Data

The application includes comprehensive mock data for demonstrations:

- **13+ Events**: Various types including all-day, timed, and recurring events
- **7 Recurrence Rules**: Daily, weekly, monthly, and yearly patterns
- **8 Time Slots**: Hourly availability slots for today
- **Working Hours**: Mon-Fri 9 AM - 5 PM configuration
- **5 Date Range Presets**: Quick selections (today, this week, this month, etc.)
- **8 Timezones**: Major time zones from around the world
- **365 Days of Activity**: Heat map data for the entire year

## Features by View

### Calendar Views
- **Month View**: Full calendar month with events, multi-day event support
- **Week View**: 7-day week with hourly time slots and working hours
- **Day View**: Single day schedule with detailed time slots
- **Agenda View**: List-style view of upcoming events

### Pickers
- **Date Picker**: Interactive calendar for date selection
- **Time Picker**: Time selection with 12h/24h format support
- **Date Range Picker**: Select start and end dates with presets
- **Duration Picker**: Select duration in hours and minutes

### Components
- **Event Card**: Display event details in various styles
- **Mini Calendar**: Compact month view for quick date selection
- **Time Slot Grid**: Grid of available/unavailable time slots
- **Calendar Header**: Navigation controls and view switching
- **Recurring Event Form**: RRULE builder with frequency options
- **Timezone Selector**: Dropdown for timezone selection
- **Availability Panel**: Display and manage availability
- **Event Dialog**: Full event creation/editing modal

### Widgets
- **Event Indicator Calendar**: Month view with event dots
- **Calendar Heatmap**: GitHub-style activity visualization
- **Upcoming Events**: List of next upcoming events
- **Today Widget**: Current date with today's events
- **Week at a Glance**: 7-day overview with event counts
- **Month Carousel**: Horizontal scrollable month selector
- **Date Badge**: Single date display with badge indicator
- **Calendar Mini Month**: Compact month for date picking

## Theme System

The demo supports two themes with dark/light mode:

### Mist Theme
- Modern glassmorphism design
- Purple accent colors
- Animated gradient background
- Soft, blurred UI elements

### Apple Theme
- Clean, minimal Apple-inspired design
- Blue accent colors
- Crisp, sharp UI elements
- High contrast for readability

Toggle between themes using the header controls.

## Navigation

Use the sidebar to navigate between component demos:
1. **Calendar Views** - Main calendar view components
2. **Date/Time Pickers** - Selection and input components
3. **Components** - Supporting calendar components
4. **Widgets** - Small, focused calendar widgets

## Technologies

- **Angular 19** - Latest Angular framework with signals
- **TypeScript** - Type-safe development
- **SCSS** - Advanced styling with variables
- **Luxon** - Date/time manipulation
- **RRule** - Recurrence rule handling
- **calendar-elements-ui** - Calendar component library
- **base-ui** - Base UI component library

## Browser Support

- Chrome/Edge (latest)
- Firefox (latest)
- Safari (latest)
- Mobile browsers (iOS Safari, Chrome Mobile)

## Contributing

This is a demo application for the `calendar-elements-ui` library. For component development and contributions, please refer to the main library repository.

## License

MIT License - see the calendar-elements-ui library for details.

## Related Projects

- [calendar-elements-ui](../calendar-elements-ui) - The calendar components library
- [base-ui](../sda-frontend/libs/base-ui) - Base UI component library
- [ai-elements-demo](../ai-elements-demo) - AI Elements demo (similar structure)

## Support

For issues, questions, or contributions related to the calendar components, please refer to the calendar-elements-ui library documentation.

---

**Built with ❤️ using Angular 19 and calendar-elements-ui**