### Installation and Setup

Source: https://context7.com/mattlewis92/angular-calendar/llms.txt

Instructions for installing the angular-calendar package and its dependencies, along with a basic setup example for a standalone Angular component.

```bash
npm install angular-calendar date-fns
# optional peer deps for drag/resize
npm install angular-draggable-droppable angular-resizable-element
```

```typescript
// app.component.ts – standalone component (recommended)
import { Component } from '@angular/core';
import {
  provideCalendar,
  DateAdapter,
  CalendarView,
  CalendarEvent,
  CalendarMonthViewComponent,
  CalendarWeekViewComponent,
  CalendarDayViewComponent,
  CalendarPreviousViewDirective,
  CalendarNextViewDirective,
  CalendarTodayDirective,
  CalendarDatePipe,
} from 'angular-calendar';
import { adapterFactory } from 'angular-calendar/date-adapters/date-fns';
import { addHours, startOfDay } from 'date-fns';

@Component({
  selector: 'app-root',
  imports: [
    CalendarMonthViewComponent,
    CalendarWeekViewComponent,
    CalendarDayViewComponent,
    CalendarPreviousViewDirective,
    CalendarNextViewDirective,
    CalendarTodayDirective,
    CalendarDatePipe,
  ],
  providers: [
    provideCalendar({ provide: DateAdapter, useFactory: adapterFactory }),
  ],
  template: `
    <h2>{{ viewDate | calendarDate:(view + 'ViewTitle'):'en' }}</h2>
    <button mwlCalendarPreviousView [view]="view" [(viewDate)]="viewDate">Prev</button>
    <button mwlCalendarToday [(viewDate)]="viewDate">Today</button>
    <button mwlCalendarNextView [view]="view" [(viewDate)]="viewDate">Next</button>
    @switch (view) {
      @case ('month') { <mwl-calendar-month-view [viewDate]="viewDate" [events]="events" /> }
      @case ('week')  { <mwl-calendar-week-view  [viewDate]="viewDate" [events]="events" /> }
      @case ('day')   { <mwl-calendar-day-view   [viewDate]="viewDate" [events]="events" /> }
    }
  `,
})
export class AppComponent {
  view: CalendarView = CalendarView.Month;
  viewDate = new Date();
  events: CalendarEvent[] = [
    { start: startOfDay(new Date()), end: addHours(new Date(), 2), title: 'My event' },
  ];
}

```

--------------------------------

### Start Development Server

Source: https://github.com/mattlewis92/angular-calendar/blob/main/README.md

Starts a local development server on port 8000 with automatic reloading and test execution.

```bash
pnpm start
```

--------------------------------

### Install Local Dev Dependencies

Source: https://github.com/mattlewis92/angular-calendar/blob/main/README.md

Run this command to install all necessary development dependencies for the project.

```bash
pnpm install
```

--------------------------------

### Standalone Component Setup for angular-calendar

Source: https://context7.com/mattlewis92/angular-calendar/llms.txt

Example of setting up a standalone Angular component with angular-calendar, including importing necessary components, directives, pipes, and configuring the date adapter provider.

```typescript
import { Component } from '@angular/core';
import {
  provideCalendar,
  DateAdapter,
  CalendarView,
  CalendarEvent,
  CalendarMonthViewComponent,
  CalendarWeekViewComponent,
  CalendarDayViewComponent,
  CalendarPreviousViewDirective,
  CalendarNextViewDirective,
  CalendarTodayDirective,
  CalendarDatePipe,
} from 'angular-calendar';
import { adapterFactory } from 'angular-calendar/date-adapters/date-fns';
import { addHours, startOfDay } from 'date-fns';

@Component({
  selector: 'app-root',
  imports: [
    CalendarMonthViewComponent,
    CalendarWeekViewComponent,
    CalendarDayViewComponent,
    CalendarPreviousViewDirective,
    CalendarNextViewDirective,
    CalendarTodayDirective,
    CalendarDatePipe,
  ],
  providers: [
    provideCalendar({ provide: DateAdapter, useFactory: adapterFactory }),
  ],
  template: `
    <h2>{{ viewDate | calendarDate:(view + 'ViewTitle'):'en' }}</h2>
    <button mwlCalendarPreviousView [view]="view" [(viewDate)]="viewDate">Prev</button>
    <button mwlCalendarToday [(viewDate)]="viewDate">Today</button>
    <button mwlCalendarNextView [view]="view" [(viewDate)]="viewDate">Next</button>
    @switch (view) {
      @case ('month') { <mwl-calendar-month-view [viewDate]="viewDate" [events]="events" /> }
      @case ('week')  { <mwl-calendar-week-view  [viewDate]="viewDate" [events]="events" /> }
      @case ('day')   { <mwl-calendar-day-view   [viewDate]="viewDate" [events]="events" /> }
    }
  `,
})
export class AppComponent {
  view: CalendarView = CalendarView.Month;
  viewDate = new Date();
  events: CalendarEvent[] = [
    { start: startOfDay(new Date()), end: addHours(new Date(), 2), title: 'My event' },
  ];
}
```

--------------------------------

### Install angular-calendar and date-fns

Source: https://github.com/mattlewis92/angular-calendar/blob/main/README.md

Install the angular-calendar library and the date-fns adapter using npm. These are the core packages required for the calendar functionality.

```bash
npm install angular-calendar date-fns
```

--------------------------------

### Install angular-calendar and date adapter

Source: https://context7.com/mattlewis92/angular-calendar/llms.txt

Install the core angular-calendar package and a date adapter like date-fns. Peer dependencies for drag and drop/resizing are optional.

```bash
npm install angular-calendar date-fns
# optional peer deps for drag/resize
npm install angular-draggable-droppable angular-resizable-element
```

--------------------------------

### Add angular-calendar using ng add

Source: https://github.com/mattlewis92/angular-calendar/blob/main/README.md

Use the ng add command to install angular-calendar and set up your project. This is the recommended installation method.

```sh
ng add angular-calendar
```

--------------------------------

### Week View Component Example

Source: https://context7.com/mattlewis92/angular-calendar/llms.txt

Demonstrates the usage of the `<mwl-calendar-week-view>` component with various inputs and event handlers. Imports necessary modules and defines component logic for event management and view rendering.

```typescript
import {
  CalendarEvent, CalendarEventTimesChangedEvent, CalendarWeekViewBeforeRenderEvent,
  CalendarWeekViewComponent, provideCalendar, DateAdapter,
} from 'angular-calendar';
import { adapterFactory } from 'angular-calendar/date-adapters/date-fns';
import { addHours, startOfDay } from 'date-fns';
import { Subject } from 'rxjs';

@Component({
  imports: [CalendarWeekViewComponent],
  providers: [provideCalendar({ provide: DateAdapter, useFactory: adapterFactory })],
  template: `
    <mwl-calendar-week-view
      [viewDate]="viewDate"
      [events]="events"
      [weekStartsOn]="1"
      [dayStartHour]="8"
      [dayEndHour]="20"
      [hourSegments]="4"
      [hourSegmentHeight]="40"
      [snapDraggedEvents]="true"
      [daysInWeek]="5"
      [excludeDays]="[0, 6]"
      [refresh]="refresh"
      (hourSegmentClicked)="addEvent($event.date)"
      (eventClicked)="handleEvent($event.event)"
      (eventTimesChanged)="eventTimesChanged($event)"
      (beforeViewRender)="beforeWeekViewRender($event)"
    />
  `,
})
export class MyComponent {
  viewDate = new Date();
  refresh = new Subject<void>();
  events: CalendarEvent[] = [
    {
      start: addHours(startOfDay(new Date()), 9),
      end: addHours(startOfDay(new Date()), 11),
      title: 'Morning meeting',
      color: { primary: '#1e90ff', secondary: '#D1E8FF' },
      draggable: true,
      resizable: { beforeStart: true, afterEnd: true },
    },
  ];

  addEvent(date: Date): void {
    this.events = [...this.events, { start: date, end: addHours(date, 1), title: 'New event' }];
  }

  handleEvent(event: CalendarEvent): void { console.log(event); }

  eventTimesChanged({ event, newStart, newEnd }: CalendarEventTimesChangedEvent): void {
    event.start = newStart;
    event.end   = newEnd;
    this.refresh.next();
  }

  beforeWeekViewRender(renderEvent: CalendarWeekViewBeforeRenderEvent): void {
    renderEvent.hourColumns.forEach(col =>
      col.hours.forEach(hour =>
        hour.segments.forEach(seg => {
          if (seg.date.getHours() < 8 || seg.date.getHours() >= 20)
            seg.cssClass = 'cal-disabled';
        })
      )
    );
  }
}
```

--------------------------------

### Legacy NgModule Setup for Angular Calendar

Source: https://context7.com/mattlewis92/angular-calendar/llms.txt

Demonstrates the legacy NgModule setup for angular-calendar using `CalendarModule.forRoot()`. This method is superseded by `provideCalendar()` and standalone components.

```typescript
import { NgModule } from '@angular/core';
import { CalendarModule, DateAdapter } from 'angular-calendar';
import { adapterFactory } from 'angular-calendar/date-adapters/date-fns';

@NgModule({
  imports: [
    CalendarModule.forRoot(
      { provide: DateAdapter, useFactory: adapterFactory },
      {
        // All optional:
        // eventTitleFormatter: { provide: CalendarEventTitleFormatter, useClass: MyTitleFormatter },
        // dateFormatter:       { provide: CalendarDateFormatter,       useClass: MyDateFormatter  },
        // utils:               { provide: CalendarUtils,               useClass: MyCalendarUtils  },
        // a11y:                { provide: CalendarA11y,                useClass: MyA11y           },
      },
    ),
  ],
})
export class AppModule {}
```

--------------------------------

### Month View Component Usage

Source: https://context7.com/mattlewis92/angular-calendar/llms.txt

Example of how to use the `<mwl-calendar-month-view>` component in a TypeScript class and its template, demonstrating input bindings and output event handling.

```APIDOC
## `<mwl-calendar-month-view>` — Month view component

Renders a full-month grid with per-day event badges, an expandable open-day event list, drag-and-drop between cells, and hover tooltips.

```typescript
// component.ts
import {
  CalendarEvent, CalendarEventTimesChangedEvent, CalendarMonthViewBeforeRenderEvent,
  CalendarMonthViewComponent, provideCalendar, DateAdapter,
} from 'angular-calendar';
import { adapterFactory } from 'angular-calendar/date-adapters/date-fns';
import { Subject } from 'rxjs';
import { startOfDay, isSameDay, isSameMonth } from 'date-fns';

@Component({
  imports: [CalendarMonthViewComponent],
  providers: [provideCalendar({ provide: DateAdapter, useFactory: adapterFactory })],
  template: `
    <mwl-calendar-month-view
      [viewDate]="viewDate"
      [events]="events"
      [activeDayIsOpen]="activeDayIsOpen"
      [weekStartsOn]="1"
      [refresh]="refresh"
      (dayClicked)="dayClicked($event)"
      (eventClicked)="handleEvent($event.event)"
      (eventTimesChanged)="eventTimesChanged($event)"
      (beforeViewRender)="beforeMonthViewRender($event)"
    />
  `,
})
export class MyComponent {
  viewDate = new Date();
  activeDayIsOpen = false;
  refresh = new Subject<void>();
  events: CalendarEvent[] = [
    { start: startOfDay(new Date()), title: 'Sample event', color: { primary: '#1e90ff', secondary: '#D1E8FF' } },
  ];

  dayClicked({ date, events }: { date: Date; events: CalendarEvent[] }): void {
    if (isSameMonth(date, this.viewDate)) {
      this.activeDayIsOpen = isSameDay(date, this.viewDate) && this.activeDayIsOpen
        ? false
        : events.length > 0;
      this.viewDate = date;
    }
  }

  handleEvent(event: CalendarEvent): void {
    console.log('Clicked', event.title);
  }

  eventTimesChanged({ event, newStart, newEnd }: CalendarEventTimesChangedEvent): void {
    event.start = newStart;
    event.end   = newEnd;
    this.refresh.next();
  }

  beforeMonthViewRender(renderEvent: CalendarMonthViewBeforeRenderEvent): void {
    // add a CSS class to weekends
    renderEvent.body.forEach(day => {
      if (day.isWeekend) day.cssClass = 'weekend-cell';
    });
  }
}
```

**Key inputs:**

| Input | Type | Default | Description |
|---|---|---|---|
| `viewDate` | `Date` | required | Date whose month is shown |
| `events` | `CalendarEvent[]` | `[]` | Events to display |
| `activeDayIsOpen` | `boolean` | `false` | Show expanded event list for active day |
| `activeDay` | `Date` | `viewDate` | Override which day is "active" |
| `weekStartsOn` | `number` | `0` | Week start index (0=Sun, 1=Mon) |
| `excludeDays` | `number[]` | `[]` | Day indexes to hide |
| `weekendDays` | `number[]` | — | Override which days are weekends |
| `refresh` | `Subject<any>` | — | Emit to force re-render |
| `locale` | `string` | `LOCALE_ID` | Date locale |
| `tooltipPlacement` | `PlacementArray` | `'auto'` | Tooltip position |
| `cellTemplate` | `TemplateRef` | — | Custom day cell template |
| `headerTemplate` | `TemplateRef` | — | Custom header row template |
| `openDayEventsTemplate` | `TemplateRef` | — | Custom open-day events template |

**Key outputs:** `dayClicked`, `eventClicked`, `columnHeaderClicked`, `eventTimesChanged`, `beforeViewRender`
```

--------------------------------

### Navigate Calendar Views with Switch Statement

Source: https://github.com/mattlewis92/angular-calendar/blob/main/projects/demos/app/demo-modules/navigating-between-views/template.html

Use a switch statement to conditionally render navigation instructions based on the current view. This example shows how to inform the user about available navigation actions for month, week, and day views.

```html
@switch (view) {
  @case ('month') {
    Click on a month label to change the view to that month.
  }
  @case ('week') {
    Click on a day header to change the view to that day.
  }
  @case ('day') {
    There is no other view to navigate to.
  }
}
```

--------------------------------

### Display Calendar View Title with Locale

Source: https://github.com/mattlewis92/angular-calendar/blob/main/projects/demos/app/demo-modules/i18n/template.html

Use the `calendarDate` pipe to format the view date according to the specified locale and week start day.

```html
{{ viewDate | calendarDate:(view + 'ViewTitle'):locale:weekStartsOn }}
```

--------------------------------

### Event Form Fields

Source: https://github.com/mattlewis92/angular-calendar/blob/main/projects/demos/app/demo-modules/kitchen-sink/template.html

Defines input fields for editing event details: Title, Primary color, Secondary + text color, Starts at, and Ends at.

```html
Title
Primary color
Secondary + text color
Starts at
Ends at
Remove
```

--------------------------------

### Conditional CSS Class Assignment in Month View

Source: https://github.com/mattlewis92/angular-calendar/blob/main/projects/demos/app/demo-modules/before-view-render/template.html

Use the beforeViewRender output to conditionally add a CSS class to cells in the month view. This example shows how to handle different view types within the event.

```typescript
@switch (view) { @case ('month') { } @case ('week') { } @case ('day') { } }
```

--------------------------------

### Displaying Calendar with Excluded Days

Source: https://github.com/mattlewis92/angular-calendar/blob/main/projects/demos/app/demo-modules/exclude-days/template.html

Use the 'excludeDays' input to pass an array of day objects to exclude specific days from the calendar view. This example shows how to display the current view title, which may incorporate excluded days.

```html
<h3> {{ viewDate | calendarDate:(view + 'ViewTitle'):'en':weekStartsOn:excludeDays }} </h3>
```

--------------------------------

### Release Project

Source: https://github.com/mattlewis92/angular-calendar/blob/main/README.md

Initiates the release process for the project. Ensure the version in package.json is updated before running.

```bash
pnpm release
```

--------------------------------

### Run Tests

Source: https://github.com/mattlewis92/angular-calendar/blob/main/README.md

Executes the test suite once. For continuous testing during development, use `pnpm test:watch`.

```bash
pnpm test
```

--------------------------------

### Day View Component with Event Handling

Source: https://context7.com/mattlewis92/angular-calendar/llms.txt

Demonstrates the `<mwl-calendar-day-view>` component, including event display, time range configuration, and handling of hour segment clicks and event time changes. Requires importing `CalendarDayViewComponent` and `provideCalendar`.

```typescript
import {
  CalendarEvent, CalendarEventTimesChangedEvent,
  CalendarDayViewComponent, provideCalendar, DateAdapter,
} from 'angular-calendar';
import { adapterFactory } from 'angular-calendar/date-adapters/date-fns';
import { addHours, startOfDay } from 'date-fns';
import { Subject } from 'rxjs';

@Component({
  imports: [CalendarDayViewComponent],
  providers: [provideCalendar({ provide: DateAdapter, useFactory: adapterFactory })],
  template: `
    <mwl-calendar-day-view
      [viewDate]="viewDate"
      [events]="events"
      [dayStartHour]="7"
      [dayEndHour]="19"
      [hourSegments]="4"
      [eventSnapSize]="15"
      [refresh]="refresh"
      (hourSegmentClicked)="addEvent($event.date)"
      (eventTimesChanged)="eventTimesChanged($event)"
    />
  `,
})
export class MyComponent {
  viewDate = new Date();
  refresh = new Subject<void>();
  events: CalendarEvent[] = [
    {
      start: addHours(startOfDay(new Date()), 10),
      end: addHours(startOfDay(new Date()), 11),
      title: 'Standup',
      draggable: true,
      resizable: { beforeStart: true, afterEnd: true },
    },
  ];
  addEvent(date: Date): void {
    this.events = [...this.events, { start: date, end: addHours(date, 1), title: 'New event' }];
  }
  eventTimesChanged({ event, newStart, newEnd }: CalendarEventTimesChangedEvent): void {
    event.start = newStart; event.end = newEnd; this.refresh.next();
  }
}
```

--------------------------------

### Date Adapter Configuration with moment.js

Source: https://context7.com/mattlewis92/angular-calendar/llms.txt

Configure the DateAdapter using the moment factory, which also sets up CalendarMomentDateFormatter. Ensure moment-timezone is imported.

```typescript
// Using moment (also sets up CalendarMomentDateFormatter)
import { DateAdapter, CalendarDateFormatter, CalendarMomentDateFormatter, MOMENT, provideCalendar } from 'angular-calendar';
import { adapterFactory } from 'angular-calendar/date-adapters/moment';
import moment from 'moment-timezone';

providers: [
  provideCalendar(
    { provide: DateAdapter, useFactory: () => adapterFactory(moment) },
    { dateFormatter: { provide: CalendarDateFormatter, useClass: CalendarMomentDateFormatter } },
  ),
  { provide: MOMENT, useValue: moment },
]
```

--------------------------------

### Configure angular-calendar providers

Source: https://context7.com/mattlewis92/angular-calendar/llms.txt

Use `provideCalendar` to set up DI providers for the calendar. This can include the date adapter and custom formatters or services.

```typescript
import { provideCalendar, DateAdapter, CalendarDateFormatter } from 'angular-calendar';
import { adapterFactory } from 'angular-calendar/date-adapters/date-fns';
import { CustomDateFormatter } from './custom-date-formatter';

// Minimal – only date adapter
providers: [
  provideCalendar({ provide: DateAdapter, useFactory: adapterFactory }),
]

// With custom date formatter
providers: [
  provideCalendar(
    { provide: DateAdapter, useFactory: adapterFactory },
    {
      dateFormatter: { provide: CalendarDateFormatter, useClass: CustomDateFormatter },
    },
  ),
]
```

--------------------------------

### Date Adapter Configuration with date-fns

Source: https://context7.com/mattlewis92/angular-calendar/llms.txt

Configure the DateAdapter using the date-fns factory for date arithmetic. This is the recommended approach.

```typescript
// Using date-fns (recommended)
import { DateAdapter, provideCalendar } from 'angular-calendar';
import { adapterFactory } from 'angular-calendar/date-adapters/date-fns';

providers: [provideCalendar({ provide: DateAdapter, useFactory: adapterFactory })]
```

--------------------------------

### Iterate and Display Events

Source: https://github.com/mattlewis92/angular-calendar/blob/main/projects/demos/app/demo-modules/kitchen-sink/template.html

Loops through a list of events and renders them. Requires an 'events' array and 'track by event' for efficient rendering.

```html
@for (event of events; track event) { }
```

--------------------------------

### Implement Month View Component

Source: https://context7.com/mattlewis92/angular-calendar/llms.txt

Renders a full-month grid with event badges and an expandable event list. Configure inputs like `viewDate`, `events`, and `activeDayIsOpen` to customize the display. Use outputs like `dayClicked` and `eventTimesChanged` for interactivity.

```typescript
import {
  CalendarEvent,
  CalendarEventTimesChangedEvent,
  CalendarMonthViewBeforeRenderEvent,
  CalendarMonthViewComponent,
  provideCalendar,
  DateAdapter,
} from 'angular-calendar';
import {
  adapterFactory,
} from 'angular-calendar/date-adapters/date-fns';
import { Subject } from 'rxjs';
import {
  startOfDay,
  isSameDay,
  isSameMonth,
} from 'date-fns';

@Component({
  imports: [CalendarMonthViewComponent],
  providers: [provideCalendar({ provide: DateAdapter, useFactory: adapterFactory })],
  template: `
    <mwl-calendar-month-view
      [viewDate]="viewDate"
      [events]="events"
      [activeDayIsOpen]="activeDayIsOpen"
      [weekStartsOn]="1"
      [refresh]="refresh"
      (dayClicked)="dayClicked($event)"
      (eventClicked)="handleEvent($event.event)"
      (eventTimesChanged)="eventTimesChanged($event)"
      (beforeViewRender)="beforeMonthViewRender($event)"
    />
  `,
})
export class MyComponent {
  viewDate = new Date();
  activeDayIsOpen = false;
  refresh = new Subject<void>();
  events: CalendarEvent[] = [
    { start: startOfDay(new Date()), title: 'Sample event', color: { primary: '#1e90ff', secondary: '#D1E8FF' } },
  ];

  dayClicked({ date, events }: { date: Date; events: CalendarEvent[] }): void {
    if (isSameMonth(date, this.viewDate)) {
      this.activeDayIsOpen = isSameDay(date, this.viewDate) && this.activeDayIsOpen
        ? false
        : events.length > 0;
      this.viewDate = date;
    }
  }

  handleEvent(event: CalendarEvent): void {
    console.log('Clicked', event.title);
  }

  eventTimesChanged({ event, newStart, newEnd }: CalendarEventTimesChangedEvent):
    void {
    event.start = newStart;
    event.end   = newEnd;
    this.refresh.next();
  }

  beforeMonthViewRender(renderEvent: CalendarMonthViewBeforeRenderEvent):
    void {
    // add a CSS class to weekends
    renderEvent.body.forEach(day => {
      if (day.isWeekend) day.cssClass = 'weekend-cell';
    });
  }
}
```

--------------------------------

### Import and Customize Angular Calendar CSS

Source: https://context7.com/mattlewis92/angular-calendar/llms.txt

Import the prebuilt stylesheet for angular-calendar or the SCSS source for full theme control. Customizations can be made using CSS variables or class overrides.

```scss
/* In global styles (not component-scoped): */
@import 'node_modules/angular-calendar/css/angular-calendar.css';

/* Or from SCSS source for full theme control: */
@import 'node_modules/angular-calendar/scss/angular-calendar.scss';

/* Override calendar colours and sizing: */
.cal-month-view .cal-day-cell.cal-today {
  background-color: #eaf4ff;
}
.cal-week-view .cal-time-events .cal-event {
  border-radius: 4px;
}

/* Dark theme – wrap calendar in a class: */
.dark-theme .cal-month-view {
  background-color: #1e1e1e;
  color: #f0f0f0;
}
.dark-theme .cal-month-view .cal-day-cell {
  border-color: #333;
}
```

--------------------------------

### Iterate Over Users

Source: https://github.com/mattlewis92/angular-calendar/blob/main/projects/demos/app/demo-modules/day-view-scheduler/day-view-scheduler.component.html

Iterates over a list of users and displays their names. Uses trackBy for efficient list updates.

```html
@for (user of users; track trackByUserId($index, user)) {

**{{ user.name }}**

}
```

--------------------------------

### Async Pipe and Conditional Rendering

Source: https://github.com/mattlewis92/angular-calendar/blob/main/projects/demos/app/demo-modules/async-events/template.html

Use the async pipe to subscribe to an Observable and conditionally render content. Displays loading state when the Observable has not yet emitted a value.

```html
@if (events$ | async; as events) {

@switch (view) { @case ('month') { } @case ('week') { } @case ('day') { } }

} @else {

  
Loading events...

}
```

--------------------------------

### Angular Component with Calendar Views

Source: https://github.com/mattlewis92/angular-calendar/blob/main/README.md

A complete Angular component demonstrating how to integrate and use the month, week, and day views of angular-calendar. It includes navigation buttons and event display.

```typescript
import { Component } from '@angular/core';
import { DateAdapter, provideCalendar, CalendarPreviousViewDirective, CalendarTodayDirective, CalendarNextViewDirective, CalendarMonthViewComponent, CalendarWeekViewComponent, CalendarDayViewComponent, CalendarEvent, CalendarView, CalendarDatePipe } from 'angular-calendar';
import { adapterFactory } from 'angular-calendar/date-adapters/date-fns';

@Component({
  imports: [CalendarPreviousViewDirective, CalendarTodayDirective, CalendarNextViewDirective, CalendarMonthViewComponent, CalendarWeekViewComponent, CalendarDayViewComponent, CalendarDatePipe],
  providers: [
    provideCalendar({
      provide: DateAdapter,
      useFactory: adapterFactory,
    }),
  ],
  template: `
    <button mwlCalendarPreviousView [view]="view" [(viewDate)]="viewDate" (viewDateChange)="closeOpenMonthViewDay()">Previous</button>
    <button mwlCalendarToday [(viewDate)]="viewDate">Today</button>
    <button mwlCalendarNextView [view]="view" [(viewDate)]="viewDate" (viewDateChange)="closeOpenMonthViewDay()">Next</button>
    <h3>{{ viewDate | calendarDate: view + 'ViewTitle' : 'en' }}</h3>
    <button (click)="setView(CalendarView.Month)" [class.active]="view === CalendarView.Month">Month</button>
    <button (click)="setView(CalendarView.Week)" [class.active]="view === CalendarView.Week">Week</button>
    <button (click)="setView(CalendarView.Day)" [class.active]="view === CalendarView.Day">Day</button>
    @switch (view) {
      @case (CalendarView.Month) {
        <mwl-calendar-month-view [viewDate]="viewDate" [events]="events" />
      }
      @case (CalendarView.Week) {
        <mwl-calendar-week-view [viewDate]="viewDate" [events]="events" />
      }
      @case (CalendarView.Day) {
        <mwl-calendar-day-view [viewDate]="viewDate" [events]="events" />
      }
    }
  `,
})
export class MyComponent {
  readonly CalendarView = CalendarView;
  viewDate = new Date();
  events: CalendarEvent[] = [
    {
      start: new Date(),
      title: 'An event',
    },
  ];

  setView(view: CalendarView) {
    this.view = view;
  }
}

```

--------------------------------

### Switch Calendar View

Source: https://github.com/mattlewis92/angular-calendar/blob/main/projects/demos/app/demo-modules/kitchen-sink/template.html

Conditionally renders content based on the current calendar view (Month, Week, Day).

```html
@switch (view) {
  @case (CalendarView.Month) { }
  @case (CalendarView.Week) { }
  @case (CalendarView.Day) { }
}
```

--------------------------------

### Display Current View Title

Source: https://github.com/mattlewis92/angular-calendar/blob/main/projects/demos/app/demo-modules/min-max-date/template.html

Use the 'calendarDate' pipe to format the current view's title. Specify the view type and locale for correct formatting.

```html
{{ viewDate | calendarDate:(view + 'ViewTitle'):'en' }}
```

--------------------------------

### Pre-render Hooks for View Customization

Source: https://context7.com/mattlewis92/angular-calendar/llms.txt

Utilize `beforeViewRender` outputs to execute logic before a view is painted. This allows for dynamic modification of event data, such as adding CSS classes or custom metadata, without altering the original events array.

```typescript
import {
  CalendarMonthViewBeforeRenderEvent,
  CalendarWeekViewBeforeRenderEvent,
  CalendarDayViewBeforeRenderEvent,
} from 'angular-calendar';

// Month: color weekend cells
beforeMonthViewRender(event: CalendarMonthViewBeforeRenderEvent): void {
  event.body.forEach(day => {
    if ([0, 6].includes(day.date.getDay())) {
      day.cssClass = 'weekend';
    }
  });
}

// Week/Day: highlight business-hours segments
beforeWeekViewRender(event: CalendarWeekViewBeforeRenderEvent): void {
  event.hourColumns.forEach(col =>
    col.hours.forEach(h =>
      h.segments.forEach(seg => {
        const h = seg.date.getHours();
        if (h < 9 || h >= 18) seg.cssClass = 'off-hours';
      })
    )
  );
}
```

```html
<mwl-calendar-month-view (beforeViewRender)="beforeMonthViewRender($event)" ... />
<mwl-calendar-week-view  (beforeViewRender)="beforeWeekViewRender($event)"  ... />
```

--------------------------------

### Display Event Count and Date

Source: https://github.com/mattlewis92/angular-calendar/blob/main/projects/demos/app/demo-modules/group-similar-events/template.html

Conditionally displays the total badge count for a day if it's greater than zero, followed by the formatted date for the month view.

```html
@if (day.badgeTotal > 0) { {{ day.badgeTotal }} } {{ day.date | calendarDate:'monthViewDayNumber':locale }}
```

--------------------------------

### Display Calendar View Title

Source: https://github.com/mattlewis92/angular-calendar/blob/main/projects/demos/app/demo-modules/kitchen-sink/template.html

Formats the current view date for display as a title. Uses the 'calendarDate' pipe with 'en' locale.

```html
<h3> {{ viewDate | calendarDate:(view + 'ViewTitle'):'en' }} </h3>
```

--------------------------------

### Iterate Over Day Events

Source: https://github.com/mattlewis92/angular-calendar/blob/main/projects/demos/app/demo-modules/context-menu/template.html

Iterates over the events associated with a specific day. This is a placeholder and likely intended to contain further event rendering logic.

```html
@for (event of day.events; track event) {

}
```

--------------------------------

### mwlCalendarToday Directive

Source: https://context7.com/mattlewis92/angular-calendar/llms.txt

Jump to the current date by attaching this directive to a clickable element. It emits `startOfDay(new Date())` when clicked and accepts a two-way `[(viewDate)]` binding.

```APIDOC
## mwlCalendarToday

### Description
Emits `startOfDay(new Date())` when clicked; accepts two-way `[(viewDate)]` binding.

### Inputs
- **viewDate** (Date) - Required for two-way binding

### Outputs
- **viewDateChange** (EventEmitter<Date>)
```

--------------------------------

### Iterate Over Event Groups

Source: https://github.com/mattlewis92/angular-calendar/blob/main/projects/demos/app/demo-modules/group-similar-events/template.html

Iterates over event groups for a given day and displays the length of the second event in each group. This is useful for scenarios where events are batched or grouped.

```html
@for (group of day.eventGroups; track group) { {{ group[1].length }} }
```

--------------------------------

### Display Hour Column Events

Source: https://github.com/mattlewis92/angular-calendar/blob/main/projects/demos/app/demo-modules/day-view-scheduler/day-view-scheduler.component.html

Renders events within hour columns. It iterates through hours and their segments, and also through column events.

```html
@if (view.hourColumns.length > 0) {

@for ( hour of view.hourColumns[0].hours; track hour.segments[0].date.toISOString(); let odd = $odd ) {

@for (segment of hour.segments; track segment.date.toISOString()) { } 

}

}

@for ( column of view.hourColumns; track column.hours[0] ? column.hours[0].segments[0].date.toISOString() : column ) {

@for ( timeEvent of column.events; track timeEvent.event.id ?? timeEvent.event ) {

@if ( timeEvent.event?.resizable?.beforeStart && !timeEvent.startsBeforeDay ) {

} @if ( timeEvent.event?.resizable?.afterEnd && !timeEvent.endsAfterDay ) {

}

} @for ( hour of column.hours; track hour.segments[0].date.toISOString(); let odd = $odd ) {

@for ( segment of hour.segments; track segment.date.toISOString() ) { } 

}

}
```

--------------------------------

### Custom Date Formatting with `CalendarDateFormatter`

Source: https://context7.com/mattlewis92/angular-calendar/llms.txt

Extend `CalendarDateFormatter` and override methods like `monthViewColumnHeader`, `weekViewHour`, and `dayViewHour` to customize how dates are displayed. Provide your custom formatter via DI.

```typescript
import { Injectable } from '@angular/core';
import { CalendarDateFormatter, DateFormatterParams } from 'angular-calendar';
import { formatDate } from '@angular/common';

@Injectable()
export class ShortDayFormatter extends CalendarDateFormatter {
  // Show abbreviated weekday names in the month header
  public monthViewColumnHeader({ date, locale }: DateFormatterParams): string {
    return formatDate(date, 'EEE', locale); // 'Mon', 'Tue', ...
  }
  // 24-hour clock in week/day time labels
  public weekViewHour({ date, locale }: DateFormatterParams): string {
    return formatDate(date, 'HH:mm', locale);
  }
  public dayViewHour({ date, locale }: DateFormatterParams): string {
    return formatDate(date, 'HH:mm', locale);
  }
}

// Wire it up:
providers: [
  provideCalendar(
    { provide: DateAdapter, useFactory: adapterFactory },
    { dateFormatter: { provide: CalendarDateFormatter, useClass: ShortDayFormatter } },
  ),
]
```

--------------------------------

### Display Day Number in Month View

Source: https://github.com/mattlewis92/angular-calendar/blob/main/projects/demos/app/demo-modules/custom-templates/template.html

Displays the date number for a given day, formatted according to the current locale. This is a standard element for month views.

```html
{{ day.date | calendarDate:'monthViewDayNumber':locale }}
```

--------------------------------

### Switching Calendar Views

Source: https://github.com/mattlewis92/angular-calendar/blob/main/projects/demos/app/demo-modules/exclude-days/template.html

This snippet shows the basic structure for switching between month, week, and day views in the Angular Calendar component using a switch statement.

```html
@switch (view) {
  @case ('month') { }
  @case ('week') { }
  @case ('day') { }
}
```

--------------------------------

### Display Event Count Text

Source: https://github.com/mattlewis92/angular-calendar/blob/main/projects/demos/app/demo-modules/custom-templates/template.html

Shows the total number of events scheduled for a specific day. This provides a textual summary of events.

```html
There are {{ day.events.length }} events on this day
```

--------------------------------

### Expand Recurring Events with rrule and beforeViewRender

Source: https://context7.com/mattlewis92/angular-calendar/llms.txt

Combine the rrule library with the beforeViewRender hook to dynamically generate CalendarEvent instances for recurring events based on the currently visible period. This avoids pre-generating all occurrences.

```typescript
import { RRule } from 'rrule';
import { CalendarMonthViewBeforeRenderEvent, CalendarEvent } from 'angular-calendar';
import { ViewPeriod } from 'calendar-utils';

recurringRules = [
  { title: 'Weekly standup', color: { primary: '#1e90ff', secondary: '#D1E8FF' },
    rrule: { freq: RRule.WEEKLY, byweekday: [RRule.MO, RRule.WE, RRule.FR] } },
  { title: 'Monthly review', color: { primary: '#e3bc08', secondary: '#FDF1BA' },
    rrule: { freq: RRule.MONTHLY, bymonthday: 1 } },
];

calendarEvents: CalendarEvent[] = [];
private currentPeriod: ViewPeriod;

updateCalendarEvents(renderEvent: CalendarMonthViewBeforeRenderEvent): void {
  const { start, end } = renderEvent.period;
  if (
    this.currentPeriod &&
    this.currentPeriod.start.getTime() === start.getTime() &&
    this.currentPeriod.end.getTime() === end.getTime()
  ) return; // already computed for this period

  this.currentPeriod = renderEvent.period;
  this.calendarEvents = [];

  this.recurringRules.forEach(({ title, color, rrule }) => {
    const rule = new RRule({ ...rrule, dtstart: start, until: end });
    rule.all().forEach(date => {
      this.calendarEvents.push({ title, color, start: date });
    });
  });
}
```

```html
<mwl-calendar-month-view
  [events]="calendarEvents"
  (beforeViewRender)="updateCalendarEvents($event)"
  [viewDate]="viewDate"
/>
```

--------------------------------

### mwlCalendarPreviousView Directive

Source: https://context7.com/mattlewis92/angular-calendar/llms.txt

Navigate to the previous period (day, week, or month) by attaching this directive to a clickable element. It emits a new `viewDate` one period earlier and respects `excludeDays` and `daysInWeek` inputs.

```APIDOC
## mwlCalendarPreviousView

### Description
Attaches to any clickable element and emits a new `viewDate` one period earlier. Handles month, week, and day views, and respects `excludeDays` and custom `daysInWeek`.

### Inputs
- **view** (CalendarView | 'month' | 'week' | 'day') - Required
- **viewDate** (Date) - Required
- **excludeDays** (number[]) - Optional, default []
- **daysInWeek** (number) - Optional

### Outputs
- **viewDateChange** (EventEmitter<Date>)
```

--------------------------------

### mwlCalendarNextView Directive

Source: https://context7.com/mattlewis92/angular-calendar/llms.txt

Advance the calendar to the next period (day, week, or month) by attaching this directive to a clickable element. It mirrors `mwlCalendarPreviousView` and emits a new `viewDate` one period forward.

```APIDOC
## mwlCalendarNextView

### Description
Mirror of `mwlCalendarPreviousView`, advances the calendar one period forward.

### Inputs
- **view** (CalendarView | 'month' | 'week' | 'day') - Required
- **viewDate** (Date) - Required
- **excludeDays** (number[]) - Optional, default []
- **daysInWeek** (number) - Optional

### Outputs
- **viewDateChange** (EventEmitter<Date>)
```

--------------------------------

### Watch Mode Tests

Source: https://github.com/mattlewis92/angular-calendar/blob/main/README.md

Continuously runs tests as code changes are detected, useful for TDD workflows.

```bash
pnpm test:watch
```

--------------------------------

### Display External Events in Month View

Source: https://github.com/mattlewis92/angular-calendar/blob/main/projects/demos/app/demo-modules/draggable-external-events/template.html

Iterates through external events and displays their titles. Use this to show a list of events that can be dragged into the calendar.

```html
@if (externalEvents.length === 0) {

_No events added_

} @else {

@for (event of externalEvents; track event) {
*   [{{ event.title }}](javascript:;)
}

}
```

--------------------------------

### Format Week View Column Header

Source: https://github.com/mattlewis92/angular-calendar/blob/main/projects/demos/app/demo-modules/context-menu/template.html

Formats the date to be displayed as a column header in the week view.

```html
{{ day.date | calendarDate:'weekViewColumnHeader':locale }}
```

--------------------------------

### Display Event Count in Month View

Source: https://github.com/mattlewis92/angular-calendar/blob/main/projects/demos/app/demo-modules/custom-templates/template.html

Conditionally displays the number of events for a day if it's greater than zero. This is useful for visually indicating days with events.

```html
@if (day.badgeTotal > 0) { {{ day.badgeTotal }} }
```

--------------------------------

### Event Action Modal Content

Source: https://github.com/mattlewis92/angular-calendar/blob/main/projects/demos/app/demo-modules/kitchen-sink/template.html

Displays information about an event action that occurred, including the action type and the event details in JSON format.

```html
##### Event action occurred
×
Action:
{{ modalData?.action }}
Event:
{{ modalData?.event | json }}
OK
```

--------------------------------

### Display All-Day Events

Source: https://github.com/mattlewis92/angular-calendar/blob/main/projects/demos/app/demo-modules/day-view-scheduler/day-view-scheduler.component.html

Conditionally displays all-day event rows if any exist. Iterates through days and then through event rows.

```html
@if (view.allDayEventRows.length > 0) {

@for (day of days; track day.date.toISOString()) {

}

@for (eventRow of view.allDayEventRows; track eventRow.id) {

@for ( allDayEvent of eventRow.row; track allDayEvent.event.id ?? allDayEvent.event ) {

}

}

}
```

--------------------------------

### Include angular-calendar CSS

Source: https://github.com/mattlewis92/angular-calendar/blob/main/README.md

Import the angular-calendar CSS file into your application's global styles. This ensures the calendar components are styled correctly.

```css
/* angular-cli file: src/styles.css */
@import "../node_modules/angular-calendar/css/angular-calendar.css";
```

--------------------------------

### Format Calendar Dates and View Titles

Source: https://context7.com/mattlewis92/angular-calendar/llms.txt

The `calendarDate` pipe formats dates and view titles according to locale and specified view methods. It utilizes the injected `CalendarDateFormatter` for locale-aware string generation.

```html
<!-- View title examples -->
{{ viewDate | calendarDate:'monthViewTitle':'en' }}
<!-- Output: "July 2025" -->

{{ viewDate | calendarDate:'weekViewTitle':'en':1 }}
<!-- Output: "Jun 30 - Jul 6, 2025" (weekStartsOn = 1) -->

{{ viewDate | calendarDate:'dayViewTitle':'fr' }}
<!-- Output: "lundi 7 juillet 2025" -->

<!-- Full pipe signature:
     date | calendarDate : method : locale? : weekStartsOn? : excludeDays? : daysInWeek?

     Available methods:
       monthViewTitle, monthViewColumnHeader, monthViewDayNumber
       weekViewTitle, weekViewColumnHeader, weekViewColumnSubHeader, weekViewHour
       dayViewTitle, dayViewHour
-->
```

--------------------------------

### Calendar View Switcher

Source: https://github.com/mattlewis92/angular-calendar/blob/main/projects/demos/app/demo-modules/draggable-external-events/template.html

A switch statement to handle different calendar views (Month, Week, Day). This is a common pattern for managing view changes in calendar components.

```html
@switch (view) {
  @case (CalendarView.Month) {
    <!-- Month view content -->
  }
  @case (CalendarView.Week) {
    <!-- Week view content -->
  }
  @case (CalendarView.Day) {
    <!-- Day view content -->
  }
}
```

--------------------------------

### Format Week View Column Subheader

Source: https://github.com/mattlewis92/angular-calendar/blob/main/projects/demos/app/demo-modules/context-menu/template.html

Formats the date for the subheader of a column in the week view.

```html
{{ day.date | calendarDate:'weekViewColumnSubHeader':locale }}
```

--------------------------------

### Handle Day and Time Slot Clicks in Angular Calendar

Source: https://github.com/mattlewis92/angular-calendar/blob/main/projects/demos/app/demo-modules/clickable-days/template.html

Use template syntax to display information about the clicked date or column. This requires the `clickedDate` and `clickedColumn` variables to be defined and updated by calendar events.

```html
@if (clickedDate) {
  **You clicked on this time: {{ clickedDate | date:'medium' }}**
}
@if (clickedColumn !== undefined) {
  **You clicked on this column: {{ clickedColumn }}**
}
```

--------------------------------

### calendarDate Pipe

Source: https://context7.com/mattlewis92/angular-calendar/llms.txt

Format view titles and dates using the `calendarDate` pipe. It delegates to the injected `CalendarDateFormatter` to produce locale-aware strings for view titles and hour labels.

```APIDOC
## calendarDate Pipe

### Description
Delegates to the injected `CalendarDateFormatter` to produce locale-aware strings for view titles and hour labels.

### Usage
`date | calendarDate : method : locale? : weekStartsOn? : excludeDays? : daysInWeek?`

### Available methods:
- `monthViewTitle`, `monthViewColumnHeader`, `monthViewDayNumber`
- `weekViewTitle`, `weekViewColumnHeader`, `weekViewColumnSubHeader`, `weekViewHour`
- `dayViewTitle`, `dayViewHour`

### Examples:
```html
<!-- View title examples -->
{{ viewDate | calendarDate:'monthViewTitle':'en' }}
<!-- Output: "July 2025" -->

{{ viewDate | calendarDate:'weekViewTitle':'en':1 }}
<!-- Output: "Jun 30 - Jul 6, 2025" (weekStartsOn = 1) -->

{{ viewDate | calendarDate:'dayViewTitle':'fr' }}
<!-- Output: "lundi 7 juillet 2025" -->
```
```

--------------------------------

### Navigate to Previous Calendar Period

Source: https://context7.com/mattlewis92/angular-calendar/llms.txt

Use the `mwlCalendarPreviousView` directive on a clickable element to navigate to the previous calendar period (month, week, or day). It respects `excludeDays` and `daysInWeek` inputs.

```html
<button
  mwlCalendarPreviousView
  [view]="view"
  [(viewDate)]="viewDate"
  [excludeDays]="[0, 6]"
  (viewDateChange)="activeDayIsOpen = false">
  &lt; Previous
</button>
```

--------------------------------

### Navigate to Next Calendar Period

Source: https://context7.com/mattlewis92/angular-calendar/llms.txt

The `mwlCalendarNextView` directive, when attached to a clickable element, advances the calendar to the next period (month, week, or day). It functions similarly to `mwlCalendarPreviousView`.

```html
<button
  mwlCalendarNextView
  [view]="view"
  [(viewDate)]="viewDate"
  [excludeDays]="[0, 6]"
  (viewDateChange)="activeDayIsOpen = false">
  Next &gt;
</button>
```

--------------------------------

### Manual Calendar Re-render with RxJS Subject

Source: https://context7.com/mattlewis92/angular-calendar/llms.txt

Use an RxJS Subject to manually trigger re-renders of the calendar, especially useful with ChangeDetectionStrategy.OnPush. Emit from the subject after mutating the events array in-place.

```typescript
import { Subject } from 'rxjs';
import { CalendarEvent, CalendarMonthViewComponent } from 'angular-calendar';

@Component({
  imports: [CalendarMonthViewComponent],
  template: `<mwl-calendar-month-view [events]="events" [refresh]="refresh" [viewDate]="viewDate" />`,
})
export class MyComponent {
  viewDate = new Date();
  refresh = new Subject<void>();
  events: CalendarEvent[] = [];

  addEvent(): void {
    // Mutate in place – change detection won't pick this up with OnPush
    this.events.push({ start: new Date(), title: 'Late addition' });
    this.refresh.next(); // triggers re-render
  }

  updateEventTitle(event: CalendarEvent, newTitle: string): void {
    event.title = newTitle;
    this.refresh.next();
  }
}
```

--------------------------------

### Format Day View Hour

Source: https://github.com/mattlewis92/angular-calendar/blob/main/projects/demos/app/demo-modules/context-menu/template.html

Formats a time segment's date to display as an hour in the day view.

```html
{{ segment.date | calendarDate: 'dayViewHour':locale }}
```

--------------------------------

### Define CalendarEvent Interface Data

Source: https://context7.com/mattlewis92/angular-calendar/llms.txt

Defines the structure for calendar events, including properties for title, start/end dates, all-day status, colors, and custom actions. Use this interface to model event data for the calendar.

```typescript
import {
  CalendarEvent,
} from 'angular-calendar';
import {
  startOfDay,
  endOfDay,
  addHours,
  subDays,
} from 'date-fns';

const events: CalendarEvent[] = [
  {
    id: 1,
    title: 'All-day event',
    start: startOfDay(new Date()),
    end: endOfDay(new Date()),
    allDay: true,
    color: { primary: '#1e90ff', secondary: '#D1E8FF' },
    cssClass: 'my-custom-class',
  },
  {
    id: 2,
    title: 'Timed event with drag & resize',
    start: addHours(startOfDay(new Date()), 9),
    end: addHours(startOfDay(new Date()), 11),
    draggable: true,
    resizable: { beforeStart: true, afterEnd: true },
    actions: [
      {
        label: '<i class="fas fa-pencil-alt"></i>',
        a11yLabel: 'Edit',
        onClick: ({ event }) => console.log('Edit', event),
      },
      {
        label: '<i class="fas fa-trash-alt"></i>',
        a11yLabel: 'Delete',
        onClick: ({ event }) => { /* remove from array */ },
      },
    ],
    meta: { userId: 42 }, // arbitrary metadata
  },
  {
    title: 'Multi-day spanning event',
    start: subDays(new Date(), 2),
    end: addHours(new Date(), 48),
    color: { primary: '#ad2121', secondary: '#FAE3E3' },
  },
];
```

--------------------------------

### Jump to Today's Date

Source: https://context7.com/mattlewis92/angular-calendar/llms.txt

The `mwlCalendarToday` directive provides a simple way to reset the calendar view to the current date. It can be used with a two-way binding to `viewDate` or by listening to the `viewDateChange` event.

```html
<button mwlCalendarToday [(viewDate)]="viewDate">Today</button>

<!-- Listening to the raw output: -->
<button
  mwlCalendarToday
  [viewDate]="viewDate"
  (viewDateChange)="viewDate = $event; activeDayIsOpen = false">
  Today
</button>
```