📅 Angular 17 Standalone Event Calendar

A lightweight, reusable, and performance-optimized Month View Event Calendar built using Angular 17 Standalone Components, Signals, and Angular Animations.

Designed for enterprise applications like:

• HRMS
• Task Management
• Scheduling Systems
• Booking Systems
• Admin Dashboards

🚀 Features

📆 Calendar

• 6×7 (42 cell) month grid
• Correct weekday alignment
• Previous / Next navigation
• Today highlight
• Weekend styling
• Disabled other-month dates

📊 Event Handling

• Event count badge
• Total duration display
• Expand week to view events
• Configurable event actions
• Parent-controlled edit/delete
• Double-click (desktop) support
• Long press (mobile) support

📱 Interaction Behavior

Device	Action	Result
Desktop	Double click	Add event
Mobile	Long press (500ms)	Add event
Click	badge	Expand week

🎨 UI/UX

• Selected date highlight
• Smooth expand/collapse animation
• Responsive layout
• Clean enterprise styling

⚡ Performance

• Angular Signals
• trackBy optimizations
• Optional O(1) event lookup map
• Fully reusable standalone component

📦 Installation

Clone the repository:

git clone https://github.com/your-username/angular-event-calendar.git
cd angular-event-calendar
npm install
ng serve

🛠 Enable Animations (Required)

In app.config.ts:

import { provideAnimations } from '@angular/platform-browser/animations';

export const appConfig = {
  providers: [
    provideAnimations()
  ]
};

🧩 Usage

Import Component

import { MonthCalendarComponent } from './month-calendar/month-calendar.component';

Template Usage

<month-calendar
  [events]="events"
  (doubleClickOnCell)="addEvent($event)" 
  (eventAction)="onEventAction($event)" 
  (changeMonthView)="onchangeMonthView($event)">
</month-calendar>

📄 License

MIT

⭐ Support

If you found this useful, give it a ⭐ on GitHub!

Author

• Maram Chandrasekhar Reddy @chandumaram