3277b9eedc
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>
208 lines
6.8 KiB
Markdown
208 lines
6.8 KiB
Markdown
# 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**
|