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
commit 3277b9eedc
19 changed files with 19457 additions and 0 deletions
--- a/README.md
+++ b/README.md
@@ -0,0 +1,207 @@
+# 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**