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:

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

2. Install dependencies:

   npm install
   

3. Ensure library dependencies are built:

   Build calendar-elements-ui (if not already built):

   cd ../calendar-elements-ui
   npm run build
   cd ../calendar-elements-demo
   

   Build base-ui (if not already built):

   cd ../sda-frontend/libs/base-ui
   npm run build
   cd ../../../calendar-elements-demo
   

Development

Start the development server:

npm start

The app will be available at http://localhost:4200

Build

Build the application for production:

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 - The calendar components library
• base-ui - Base UI component library
• 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