Angular Calendar Application

This project is a calendar application built from scratch using Angular, Angular Material, and the Angular CDK.

Project Description

The goal of this Project was to create a functional calendar application using Angular 19. The application allows users to add, delete, update and move calendar appointments, utilizing Angular Material for styling and the Angular CDK for drag-and-drop functionality.

Key Requirements:

• Angular Only: Implemented solely using Angular.
• Angular Material & CDK: Utilized Angular Material for styling and the Angular CDK for drag-and-drop.
• Functionality:
  • Form to add calendar appointments.
  • Ability to delete and update appointments.
  • Ability to move appointments using drag-and-drop.
  • Use of Date() for time/date manipulation.
  • NgFor for rendering calendar dates and appointments.
• Advanced Angular Features:
  • Dependency Injection.
  • Lazy loading for modules/routes.
  • Angular Router implementation (router, router-outlets, etc.).
  • Angular Forms with value changes, validators, etc.
  • RxJS usage.
  • Standalone components and/or shared modules.
  • Angular CDK Drag and Drop.

Features

• Add Appointment: A form allows users to create new calendar appointments with date and time details.
• Update Appointment: Users can update existing appointments from the calendar.
• Delete Appointment: Users can delete existing appointments from the calendar.
• Move Appointment: Appointments can be moved to different dates using drag-and-drop.
• Calendar View: Displays calendar dates and appointments using NgFor.
• Form Validation: Angular forms with validators ensure data integrity.
• Drag & Drop: Implemented using Angular CDK for seamless appointment movement.
• Routing: The application uses Angular routing for navigation.
• Lazy Loading: Modules are lazy-loaded to improve performance.
• RxJS: Used for reactive programming where appropriate.
• Standalone Components/Shared Modules: The project utilizes standalone components and/or shared modules to promote code reusability.

Technologies Used

• Angular
• Angular Material
• Angular CDK
• RxJS
• TypeScript

Live Demo

You can view the live demo of the application here.

Installation

1. Clone the repository:

   git clone 

2. Navigate to the project directory:

   cd angular-calendar-app

3. Install dependencies:

   npm install

Development server

Run ng serve for a dev server. Navigate to http://localhost:4200/. The application will automatically reload if you change any of the source files.

Build

Run ng build to build the project. The build artifacts will be stored in the dist/ directory. Use the --production flag for a production build.

Author

• Leonid Shamarin

License

This project is licensed under the Leonid Shamarin License.