A modern, responsive calendar application built with Angular, featuring drag-and-drop appointment management and a clean, intuitive interface.

View Live Demo

• 📅 Day view calendar with 15-minute interval slots
• ✏️ Create, edit, and delete appointments
• 🎯 Drag & drop appointment rescheduling
• 🚫 Smart conflict detection to prevent double-booking
• 📱 Responsive design that works on all devices
• 🎨 Clean, modern UI using Angular Material

• Built with Angular 19 and TypeScript
• Uses Angular Material for UI components
• Implements Angular CDK for drag & drop functionality
• Features reactive state management with Signals
• Follows modern Angular best practices:
  • Standalone components
  • Lazy loading
  • Dependency injection
  • Custom form validators
  • RXJS usage
  • Type safety

src/
├── app/
│   ├── features/
│   │   └── calendar/         # Main calendar feature
│   │       ├── components/   # Reusable calendar components
│   │       └── features/     # Sub-features (day view, etc.)
│   ├── services/            # Application services
│   ├── models/             # TypeScript interfaces
│   └── enums/              # TypeScript enums
└── assets/                # Static assets

1. Install dependencies:

   npm install

2. Start the development server:

   npm start

3. Open your browser and navigate to http://localhost:4200

This application is configured for deployment to GitHub Pages.

The project includes a GitHub Actions workflow that automatically deploys to GitHub Pages when changes are pushed to the main branch.

To deploy manually:

1. Build the application with GitHub Pages configuration:

   npm run build -- --configuration=github-pages

2. Deploy using the angular-cli-ghpages tool:

   npm run deploy

After deployment, the application will be available at: https://yourusername.github.io/angular-calendar/

• Used Angular Material and CDK to ensure consistent UI and robust drag & drop
• Implemented standalone components for better tree-shaking
• Used signals for state management to reduce complexity
• Added custom validators for appointment conflicts
• Structured the app for scalability with feature modules
• Focused on maintainable, well-documented code

• Add week and month views
• Implement recurring appointments
• Add appointment categories and colors
• Include search functionality
• Add unit and e2e tests
• Implement appointment reminders

This project was developed as part of a technical assessment. While it meets all requirements, there's always room for improvement and additional features. Feel free to explore the code and suggest improvements!