# Calendar Elements Demo - Quick Start Guide

## 🚀 Get Started in 3 Steps

### 1. Install Dependencies

```bash
cd /Users/giulianosilvestro/Documents/Projects/calendar-elements-demo
npm install
```

### 2. Start Development Server

```bash
npm start
```

The app will open at `http://localhost:4200`

### 3. Explore the Demo

Navigate through the sidebar to see all 24 component demos:
- **Calendar Views**: Month, Week, Day, Agenda
- **Pickers**: Date, Time, Date Range, Duration
- **Components**: Event Card, Mini Calendar, Time Slot Grid, and more
- **Widgets**: Heatmap, Upcoming Events, Today Widget, and more

## 🎨 Try These Features

### Theme Switching
Click the **"Mist"** or **"Apple"** button in the header to switch themes

### Dark Mode
Click the **"Dark"** or **"Light"** button to toggle dark mode

### Navigation
- Use the **Previous/Next** buttons to navigate between dates
- Click **Today** to jump to the current date
- Click any item in the sidebar to view that component demo

## 📁 Project Structure Overview

```
src/
├── app/
│   ├── mock-data/calendar-data.ts    # 📊 All mock data (events, slots, etc.)
│   ├── app.component.ts               # 🧠 Main component logic
│   ├── app.component.html             # 📄 Template with all demos
│   └── app.component.scss             # 🎨 Styling
├── styles.scss                        # 🌍 Global styles & themes
└── main.ts                            # 🚀 App bootstrap
```

## 🔧 Available Commands

```bash
# Development server (port 4200)
npm start

# Build for production
npm run build

# Build and watch for changes
npm run watch

# Run Angular CLI commands
npm run ng -- <command>
```

## 📊 Mock Data Available

The demo includes realistic mock data:

- **13+ Events**: Various types (all-day, timed, recurring)
- **Recurrence Rules**: Daily, weekly, monthly, yearly patterns
- **Time Slots**: 8 hourly slots with availability
- **Working Hours**: Monday-Friday 9 AM - 5 PM
- **Timezones**: 8 major time zones
- **Activity Data**: 365 days for heatmap visualization

Access mock data from `src/app/mock-data/calendar-data.ts`

## 🎯 Component Status

Currently showing **placeholder demos** for all 24 components.

To integrate actual calendar components:
1. Ensure `calendar-elements-ui` library is built
2. Import components in `app.component.ts`
3. Replace placeholder sections with actual components
4. Wire up inputs and outputs

See `IMPLEMENTATION_STATUS.md` for detailed integration guide.

## 🐛 Troubleshooting

### Port 4200 Already in Use
```bash
# Use a different port
npm start -- --port 4201
```

### Build Errors
```bash
# Clean and reinstall
rm -rf node_modules package-lock.json
npm install
```

### Missing Dependencies
```bash
# Ensure calendar-elements-ui is built
cd ../calendar-elements-ui
npm run build

# Return to demo
cd ../calendar-elements-demo
npm install
```

## 📚 Learn More

- See `README.md` for detailed documentation
- See `IMPLEMENTATION_STATUS.md` for implementation details
- Check `src/app/mock-data/calendar-data.ts` for data structures

## 🎉 That's It!

You're ready to explore the Calendar Elements Demo!

Navigate through the sidebar and try different components, themes, and modes.

---

**Happy exploring! 📅**