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>
136 lines
3.2 KiB
Markdown
136 lines
3.2 KiB
Markdown
# 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! 📅**
|