Files

Giuliano Silvestro 3277b9eedc Add complete Calendar Elements Demo application

Built comprehensive demo app showcasing 24 calendar components:
- 4 Calendar Views (Month, Week, Day, Agenda)
- 4 Date/Time Pickers (Date, Time, Range, Duration)
- 8 Components (Event Card, Mini Calendar, Headers, Forms, etc.)
- 8 Widgets (Heatmap, Today, Badges, Indicators, etc.)

Features:
- Mist theme with animated gradient background and glassmorphism
- Apple theme with clean solid design
- Dark/light mode support
- Responsive design for all screen sizes
- Signal-based reactive state management
- Comprehensive mock data (13+ events, recurrence rules, time slots)
- Interactive navigation and event handling

Tech stack: Angular 19, TypeScript, SCSS, Luxon, RRule

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

2026-02-09 18:36:25 +10:00

3.2 KiB

Raw Permalink Blame History

Calendar Elements Demo - Quick Start Guide

🚀 Get Started in 3 Steps

1. Install Dependencies

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

2. Start Development Server

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

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

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

Ensure calendar-elements-ui library is built
Import components in app.component.ts
Replace placeholder sections with actual components
Wire up inputs and outputs

See IMPLEMENTATION_STATUS.md for detailed integration guide.

🐛 Troubleshooting

Port 4200 Already in Use

# Use a different port
npm start -- --port 4201

Build Errors

# Clean and reinstall
rm -rf node_modules package-lock.json
npm install

Missing Dependencies

# 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! 📅

3.2 KiB Raw Permalink Blame History