Angular Calendar

https://mattlewis92.github.io/angular-calendar/docs
Admin
Angular Calendar is a flexible calendar component for Angular 20.2+ that displays events in month,...
Tokens:62,545
Snippets:462
Trust Score:8.3
Update:4 months ago
Show doc for...
Tokens:
Raw
### Configure Moment.js Week Start

Source: https://mattlewis92.github.io/angular-calendar/docs/components/CalendarMonthViewComponent.html

This example shows how to set the start of the week to Monday using the moment.js date adapter. This is useful when the `weekStartsOn` input of the calendar component does not behave as expected.

```typescript
import moment from 'moment';

moment.updateLocale('en', {
  week: {
    dow: 1, // set start of week to monday instead
    doy: 0,
  },
});
```

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

### Install angular-calendar using ng add

Source: https://mattlewis92.github.io/angular-calendar/docs/index.html

Use the `ng add` command for a recommended and automated installation of the angular-calendar library.

```bash
ng add angular-calendar
```

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

### Install Local Dev Dependencies

Source: https://mattlewis92.github.io/angular-calendar/docs/index.html

Install local development dependencies using pnpm. Ensure Node.js (>=24.5.0) and pnpm are installed first.

```bash
pnpm install
```

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

### Install date-fns

Source: https://mattlewis92.github.io/angular-calendar/docs/changelog.html

Install the date-fns library as a dependency for angular-calendar.

```bash
npm i date-fns
```

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

### Start Development Server

Source: https://mattlewis92.github.io/angular-calendar/docs/index.html

Run the development server on port 8000 with auto-reloading and tests enabled.

```bash
pnpm start
```

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

### Install angular-calendar and date-fns manually

Source: https://mattlewis92.github.io/angular-calendar/docs/index.html

Manually install the angular-calendar and date-fns packages using npm. This is an alternative to `ng add`.

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

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

### UMD Bundle Path Change Example

Source: https://mattlewis92.github.io/angular-calendar/docs/changelog.html

Demonstrates the old UMD bundle path for System.js users. This path has been updated in newer versions.

```text
node_modules/angular-calendar/dist/umd/angular-calendar.js
```

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

### Moment.js Week Start Configuration

Source: https://mattlewis92.github.io/angular-calendar/docs/interfaces/WeekViewAllDayEventResize.html

Configure the start of the week globally using Moment.js. This is an alternative to the `weekStartsOn` input if you are using the moment date adapter.

```typescript
moment.updateLocale('en', {
  week: {
    dow: 1, // set start of week to monday instead
    doy: 0,
  },
});
```

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

### New UMD Bundle Path Example

Source: https://mattlewis92.github.io/angular-calendar/docs/changelog.html

Shows the new UMD bundle path for System.js users. This is the updated path to use for the angular-calendar package.

```text
node_modules/angular-calendar/umd/angular-calendar.js
```

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

### Update UMD File Path for System.js (Before)

Source: https://mattlewis92.github.io/angular-calendar/docs/changelog.html

This example shows the old path for UMD files when using System.js before version 0.2.0.

```javascript
node_modules/angular2-calendar/angular2-calendar.js
```

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

### Update UMD File Path for System.js (After)

Source: https://mattlewis92.github.io/angular-calendar/docs/changelog.html

This example shows the new path for UMD files when using System.js after version 0.2.0.

```javascript
node_modules/angular2-calendar/dist/umd/angular2-calendar.js
```

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

### New CSS File Path Example

Source: https://mattlewis92.github.io/angular-calendar/docs/changelog.html

Shows the new location of the CSS file for the angular-calendar package after a path change. This is the updated path to use.

```text
node_modules/angular-calendar/css/angular-calendar.css
```

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

### Manually Set Week Start Day

Source: https://mattlewis92.github.io/angular-calendar/docs/changelog.html

The week start day is no longer determined by moment. You must manually pass it to the month and week view components.

```html
// the first day of the week is Monday
[weekStartsOn]="1"
```

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

### Integrate Calendar Component in Angular

Source: https://mattlewis92.github.io/angular-calendar/docs/index.html

Add the calendar component to your Angular application by importing necessary modules, providing the DateAdapter, and setting up the template for month, week, or day views. This example demonstrates basic setup with 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;
  }
}

```

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

### Angular Calendar Module forRoot Example

Source: https://mattlewis92.github.io/angular-calendar/docs/modules/CalendarModule.html

Example of how to import and use the CalendarModule.forRoot() method in an Angular NgModule. This method is deprecated in favor of standalone components.

```typescript
import { CalenderModule } from 'angular-calendar';

@NgModule({
  imports: [
    CalenderModule.forRoot()
  ]
})
class MyModule {}
```

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

### Update CSS Import Path (After)

Source: https://mattlewis92.github.io/angular-calendar/docs/changelog.html

This example shows the new import path for the CSS file after version 0.2.0.

```typescript
import 'angular2-calendar/dist/css/angular2-calendar.css';
```

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

### Update CSS Import Path (Before)

Source: https://mattlewis92.github.io/angular-calendar/docs/changelog.html

This example shows the old import path for the CSS file before version 0.2.0.

```typescript
import 'angular2-calendar/css/angular2-calendar.css';
```

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

### CSS File Path Change Example

Source: https://mattlewis92.github.io/angular-calendar/docs/changelog.html

Illustrates the change in the CSS file path for the angular-calendar package. Users need to update their import paths accordingly.

```text
node_modules/angular-calendar/dist/css/angular-calendar.css
```

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

### Custom Date Formatter Example

Source: https://mattlewis92.github.io/angular-calendar/docs/injectables/CalendarDateFormatter.html

Demonstrates how to extend `CalendarDateFormatter` to customize date formatting for the month view column header. This example uses the Angular `formatDate` function to display short week days.

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

@Injectable()
class CustomDateFormatter extends CalendarDateFormatter {

  public monthViewColumnHeader({date, locale}: DateFormatterParams): string {
    return formatDate(date, 'EEE', locale); // use short week days
  }

}

// in your component that uses the calendar
providers: [{
  provide: CalendarDateFormatter,
  useClass: CustomDateFormatter
}]
```

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

### All-Day Event Resize Started

Source: https://mattlewis92.github.io/angular-calendar/docs/interfaces/WeekViewAllDayEventResize.html

Initiates the resizing process for an all-day event. Stores the original offset and span, and determines the edge being resized.

```typescript
allDayEventResizeStarted(
    allDayEventsContainer: HTMLElement,
    allDayEvent: WeekViewAllDayEvent,
    resizeEvent: ResizeEvent,
  ): void {
    this.allDayEventResizes.set(allDayEvent, {
      originalOffset: allDayEvent.offset,
      originalSpan: allDayEvent.span,
      edge: typeof resizeEvent.edges.left !== 'undefined' ? 'left' : 'right',
    });
    this.resizeStarted(
      allDayEventsContainer,
      allDayEvent,
      this.getDayColumnWidth(allDayEventsContainer),
    );
  }
```

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

### Example Usage of Calendar Week View

Source: https://mattlewis92.github.io/angular-calendar/docs/interfaces/WeekViewAllDayEventResize.html

Demonstrates how to use the `mwl-calendar-week-view` component in your Angular application. Ensure you provide the `viewDate` and `events` inputs.

```html
<mwl-calendar-week-view
  [viewDate]="viewDate"
  [events]="events">
</mwl-calendar-week-view>
```

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

### Provide Moment for CalendarMomentDateFormatter

Source: https://mattlewis92.github.io/angular-calendar/docs/changelog.html

If using CalendarMomentDateFormatter, you must provide moment to the calendar. This example shows how to configure the providers.

```typescript
import * as moment from 'moment';
import {
  CalendarMomentDateFormatter,
  CalendarDateFormatter,
  MOMENT
} from './../angular2-calendar';

... 

providers: [
  {provide: CalendarDateFormatter, useClass: CalendarMomentDateFormatter},
  {provide: MOMENT, useValue: moment}
]
```

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

### Handling beforeViewRender Event

Source: https://mattlewis92.github.io/angular-calendar/docs/interfaces/CalendarMonthViewBeforeRenderEvent.html

Example of how to subscribe to the `beforeViewRender` event and dynamically add a CSS class to a specific day cell. This is useful for highlighting weekends or special dates.

```typescript
this.calendarMonthViewComponent.beforeViewRender.subscribe(
  ({ body }:
    CalendarMonthViewBeforeRenderEvent
  ) => {
    body.forEach((day) => {
      if (day.inMonth && day.date.getDay() === 0) {
        day.cssClass = 'cal-weekend';
      }
    });
  }
);
```

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

### Initiating Drag Operation

Source: https://mattlewis92.github.io/angular-calendar/docs/interfaces/CalendarWeekViewBeforeRenderEvent.html

Sets up the drag helper and validation logic when a drag operation starts. It calculates the day column width and defines how the drag should be validated, including potential event time changes.

```typescript
dragStarted(
    eventsContainerElement: HTMLElement,
    eventElement: HTMLElement,
    event: WeekViewTimeEvent | WeekViewAllDayEvent,
    useY: boolean,
  ): void {
    this.dayColumnWidth = this.getDayColumnWidth(eventsContainerElement);
    const dragHelper: CalendarDragHelper = new CalendarDragHelper(
      eventsContainerElement,
      eventElement,
    );
    this.validateDrag = ({ x, y, transform }) => {
      const isAllowed =
        this.allDayEventResizes.size === 0 &&
        this.timeEventResizes.size === 0 &&
        dragHelper.validateDrag({
          x,
          y,
          snapDraggedEvents: this.snapDraggedEvents,
          dragAlreadyMoved: this.dragAlreadyMoved,
          transform,
        });
      if (isAllowed && this.validateEventTimesChanged) {
        const newEventTimes = this.getDragMovedEventTimes(
          event,
          { x, y },
          this.dayColumnWidth,
          useY,
        );
        return this.validateEventTimesChanged({
          type: CalendarEventTimesChangedEventType.Drag,
          event: event.event,
          newStart: newEventTimes.start,
          newEnd: newEventTimes.end,
        });
      }

      return isAllowed;
    };
    this.dragActive = true;
    this.dragAlreadyMoved = false;
    this.lastDraggedEvent = null;
    this.eventDragEnterByType = {
      allDay: 0,
      time: 0,
    };
    if (!this.snapDraggedEvents && useY) {
      this.view.hourColumns.forEach((column) => {
        const linkedEvent = column.events.find(
          (columnEvent) =>
            columnEvent.event === event.event && columnEvent !== event,
        );
        // hide any linked events while dragging
        if (linkedEvent) {
          linkedEvent.width = 0;
          linkedEvent.height = 0;
        }
      });
    }
    this.cdr.markForCheck();
  }
```

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

### Month View Column Header Click Event

Source: https://mattlewis92.github.io/angular-calendar/docs/changelog.html

Example of how to handle the `columnHeaderClicked` event on the month view. The event now exposes the `isoDayNumber` directly.

```html
columnHeaderClicked="columnHeaderClicked($event.isoDayNumber)"
```

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

### CalendarDatePipe Usage Example

Source: https://mattlewis92.github.io/angular-calendar/docs/pipes/CalendarDatePipe.html

Demonstrates how to use the calendarDate pipe in a template to format the current view title. Ensure `viewDate` is a Date object and `view` is a valid calendar view string.

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

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

### Initiate Dragging Events

Source: https://mattlewis92.github.io/angular-calendar/docs/interfaces/WeekViewAllDayEventResize.html

Sets up the drag helper and validation logic when an event drag operation starts. It calculates the day column width and defines a validation function that checks for active resizes and optionally validates new event times.

```typescript
  dragStarted(
    eventsContainerElement: HTMLElement,
    eventElement: HTMLElement,
    event: WeekViewTimeEvent | WeekViewAllDayEvent,
    useY: boolean,
  ): void {
    this.dayColumnWidth = this.getDayColumnWidth(eventsContainerElement);
    const dragHelper: CalendarDragHelper = new CalendarDragHelper(
      eventsContainerElement,
      eventElement,
    );
    this.validateDrag = ({ x, y, transform }) => {
      const isAllowed =
        this.allDayEventResizes.size === 0 &&
        this.timeEventResizes.size === 0 &&
        dragHelper.validateDrag({
          x,
          y,
          snapDraggedEvents: this.snapDraggedEvents,
          dragAlreadyMoved: this.dragAlreadyMoved,
          transform,
        });
      if (isAllowed && this.validateEventTimesChanged) {
        const newEventTimes = this.getDragMovedEventTimes(
          event,
          { x, y },
          this.dayColumnWidth,
          useY,
        );
        return this.validateEventTimesChanged({
          type: CalendarEventTimesChangedEventType.Drag,
          event: event.event,
          newStart: newEventTimes.start,
          newEnd: newEventTimes.end,
        });
      }

      return isAllowed;
    };
    this.dragActive = true;
    this.dragAlreadyMoved = false;
    this.lastDraggedEvent = null;
    this.eventDragEnterByType = {
      allDay: 0,
      time: 0,
    };
    if (!this.snapDraggedEvents && useY) {
      this.view.hourColumns.forEach((column) => {
        const linkedEvent = column.events.find(
          (columnEvent) =>
            columnEvent.event === event.event && columnEvent !== event,
        );
        // hide any linked events while dragging
        if (linkedEvent) {
          linkedEvent.width = 0;
          linkedEvent.height = 0;
        }
      });
    }
    this.cdr.markForCheck();
  }
```

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

### Initiating Event Resize in Week View

Source: https://mattlewis92.github.io/angular-calendar/docs/components/CalendarWeekViewComponent.html

This function is called when an event resize operation starts in the week view. It sets up a CalendarResizeHelper to manage the resize interaction and validates the resize operation against boundaries and custom validation logic.

```typescript
protected resizeStarted(
    eventsContainer: HTMLElement,
    event: WeekViewTimeEvent | WeekViewAllDayEvent,
    dayWidth?: number,
  ) {
    this.dayColumnWidth = this.getDayColumnWidth(eventsContainer);
    const resizeHelper = new CalendarResizeHelper(
      eventsContainer,
      dayWidth,
      this.rtl,
    );
    this.validateResize = ({ rectangle, edges }) => {
      const isWithinBoundary = resizeHelper.validateResize({
        rectangle: { ...rectangle },
        edges,
      });

      if (isWithinBoundary && this.validateEventTimesChanged) {
        let newEventDates;
        if (!dayWidth) {
          newEventDates = this.getTimeEventResizedDates(event.event, {
            rectangle,
            edges,
          });
```

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

### CalendarWeekViewBeforeRenderEvent Example

Source: https://mattlewis92.github.io/angular-calendar/docs/interfaces/CalendarWeekViewBeforeRenderEvent.html

This snippet shows how to access and potentially modify the start and end dates of the week view before it renders. It's useful for adjusting the displayed date range based on custom logic.

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

@Component({
  selector: 'app-my-calendar',
  templateUrl: './my-calendar.component.html',
})
export class MyCalendarComponent {
  viewDate: Date = new Date();
  excludeDays: number[] = [0, 6]; // Exclude Saturday and Sunday

  beforeWeekViewRender(event: CalendarWeekViewBeforeRenderEvent) {
    const { start, end } = event;
    const daysDiff = 7; // Example: extend the view by 7 days

    // Adjust the end date
    const newEnd = addDaysWithExclusions(
      this.dateAdapter,
      end,
      daysDiff,
      this.excludeDays
    );

    // Update the event data
    event.end = newEnd;
  }
}

```

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

### CalendarModule.forRoot()

Source: https://mattlewis92.github.io/angular-calendar/docs/modules/CalendarModule.html

Provides the root module with necessary configurations and providers. It's recommended to use standalone components and `provideCalendar()` instead.

```APIDOC
## CalendarModule.forRoot()

### Description
Provides the root module with necessary configurations and providers. This method is deprecated and users should instead use `provideCalendar()` along with standalone components and directives.

### Method
Static

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
```typescript
import { NgModule, ModuleWithProviders, Provider } from '@angular/core';
import { CalendarModule } from 'angular-calendar';

@NgModule({
  imports: [
    CalendarModule.forRoot(dateAdapterProvider, calendarConfig)
  ]
})
class MyModule {}
```

### Response
#### Success Response
`ModuleWithProviders<CalendarModule>`

#### Response Example
```typescript
{
  "ngModule": "CalendarModule",
  "providers": [
    // providers based on dateAdapter and config
  ]
}
```
```

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

### Calculate Resized All-Day Event Dates

Source: https://mattlewis92.github.io/angular-calendar/docs/components/CalendarWeekViewComponent.html

This function calculates the new start and end dates for an all-day event after resizing. It takes the event, the number of days to adjust by, and a flag indicating whether the adjustment is before the start date.

```typescript
  protected getAllDayEventResizedDates(
    event: CalendarEvent,
    daysDiff: number,
    beforeStart: boolean,
  ) {
    let start: Date = event.start;
    let end: Date = event.end || event.start;
    if (beforeStart) {
      start = addDaysWithExclusions(
        this.dateAdapter,
        start,
        daysDiff,
        this.excludeDays,
      );
    } else {
      end = addDaysWithExclusions(
        this.dateAdapter,
        end,
        daysDiff,
        this.excludeDays,
      );
    }

    return { start, end };
  }
```

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

### Run Tests

Source: https://mattlewis92.github.io/angular-calendar/docs/index.html

Execute tests once or continuously. Use 'pnpm test:watch' for continuous testing.

```bash
pnpm test
```

```bash
pnpm test:watch
```

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

### weekViewTitle

Source: https://mattlewis92.github.io/angular-calendar/docs/injectables/CalendarNativeDateFormatter.html

Formats the title for the week view, displaying the start and end dates of the week.

```APIDOC
## weekViewTitle

### Description
Formats the title for the week view, displaying the start and end dates of the week.

### Method
`weekViewTitle(params: DateFormatterParams): string`

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Parameters
- **date** (Date) - The current date within the week.
- **locale** (string) - The locale to use for formatting.
- **weekStartsOn** (number) - The day of the week the week starts on (0 = Sunday, 1 = Monday, etc.).
- **excludeDays** (number[]) - An array of days to exclude from the week calculation.
- **daysInWeek** (number) - The number of days to display in the week view.

### Response
#### Success Response (string)
- The formatted week view title (e.g., "Jan 1 - Jan 7").
```

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

### System.js Configuration for angular-resizable-element

Source: https://mattlewis92.github.io/angular-calendar/docs/changelog.html

For System.js users, add this configuration to include the angular-resizable-element library.

```javascript
'angular-resizable-element': 'npm:angular-resizable-element/dist/umd/angular-resizable-element.js',
```

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

### Initialize Resize Operation

Source: https://mattlewis92.github.io/angular-calendar/docs/interfaces/WeekViewAllDayEventResize.html

Sets up the necessary variables and validation logic when a resize operation begins for a week view event. It determines the event type (time or all-day) and configures the validation callback.

```typescript
protected resizeStarted(
    eventsContainer: HTMLElement,
    event: WeekViewTimeEvent | WeekViewAllDayEvent,
    dayWidth?: number,
  ) {
    this.dayColumnWidth = this.getDayColumnWidth(eventsContainer);
    const resizeHelper = new CalendarResizeHelper(
      eventsContainer,
      dayWidth,
      this.rtl,
    );
    this.validateResize = ({ rectangle, edges }) => {
      const isWithinBoundary = resizeHelper.validateResize({
        rectangle: { ...rectangle },
        edges,
      });

      if (isWithinBoundary && this.validateEventTimesChanged) {
        let newEventDates;
        if (!dayWidth) {
          newEventDates = this.getTimeEventResizedDates(event.event, {
            rectangle,
            edges,
          });
        } else {
          const modifier = this.rtl ? -1 : 1;
          if (typeof edges.left !== 'undefined') {
            const diff = Math.round(+edges.left / dayWidth) * modifier;
            newEventDates = this.getAllDayEventResizedDates(
              event.event,
              diff,
              !this.rtl,
            );
          } else {
            const diff = Math.round(+edges.right / dayWidth) * modifier;
            newEventDates = this.getAllDayEventResizedDates(
              event.event,
              diff,
              this.rtl,
            );
          }
        }
        return this.validateEventTimesChanged({
          type: CalendarEventTimesChangedEventType.Resize,
          event: event.event,
          newStart: newEventDates.start,
          newEnd: newEventDates.end,
        });
      }

      return isWithinBoundary;
    };
    this.cdr.markForCheck();
  }
```

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

### forRoot

Source: https://mattlewis92.github.io/angular-calendar/docs/modules/CalendarCommonModule.html

Configures the CalendarCommonModule with a date adapter and optional configuration. This method is deprecated and suggests using `provideCalendar` instead.

```APIDOC
## forRoot

### Description
Configures the CalendarCommonModule with a date adapter and optional configuration. This method is deprecated and suggests using `provideCalendar` instead.

### Method
`static forRoot(dateAdapter: Provider, config: CalendarProviderConfig): ModuleWithProviders<CalendarCommonModule>`

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
None

### Response
#### Success Response (200)
`ModuleWithProviders<CalendarCommonModule>`

#### Response Example
None
```

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

### Initialize Dragging State

Source: https://mattlewis92.github.io/angular-calendar/docs/components/CalendarWeekViewComponent.html

Sets up the necessary state for an event drag operation, including calculating the day column width, initializing the drag helper, and defining validation logic for the drag.

```typescript
dragStarted(
    eventsContainerElement: HTMLElement,
    eventElement: HTMLElement,
    event: WeekViewTimeEvent | WeekViewAllDayEvent,
    useY: boolean,
  ): void {
    this.dayColumnWidth = this.getDayColumnWidth(eventsContainerElement);
    const dragHelper: CalendarDragHelper = new CalendarDragHelper(
      eventsContainerElement,
      eventElement,
    );
    this.validateDrag = ({ x, y, transform }) => {
      const isAllowed =
        this.allDayEventResizes.size === 0 &&
        this.timeEventResizes.size === 0 &&
        dragHelper.validateDrag({
          x,
          y,
          snapDraggedEvents: this.snapDraggedEvents,
          dragAlreadyMoved: this.dragAlreadyMoved,
          transform,
        });
      if (isAllowed && this.validateEventTimesChanged) {
        const newEventTimes = this.getDragMovedEventTimes(
          event,
          { x, y },
          this.dayColumnWidth,
          useY,
        );
        return this.validateEventTimesChanged({
          type: CalendarEventTimesChangedEventType.Drag,
          event: event.event,
          newStart: newEventTimes.start,
          newEnd: newEventTimes.end,
        });
      }

      return isAllowed;
    };
    this.dragActive = true;
    this.dragAlreadyMoved = false;
    this.lastDraggedEvent = null;
    this.eventDragEnterByType = {
      allDay: 0,
      time: 0,
    };
    if (!this.snapDraggedEvents && useY) {
      this.view.hourColumns.forEach((column) => {
        const linkedEvent = column.events.find(
          (columnEvent) =>

```

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

### Basic Day View Usage

Source: https://mattlewis92.github.io/angular-calendar/docs/components/CalendarDayViewComponent.html

Use this snippet to display a basic day view with events. Ensure you provide the `viewDate` and `events` inputs.

```html
<mwl-calendar-day-view
 [viewDate]="viewDate"
 [events]="events">
</mwl-calendar-day-view>
```

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

### Calendar Month View Component Usage

Source: https://mattlewis92.github.io/angular-calendar/docs/interfaces/CalendarMonthViewBeforeRenderEvent.html

Example of how to use the mwl-calendar-month-view component in your Angular templates. It demonstrates binding to the viewDate and events inputs.

```html
<mwl-calendar-month-view
 [viewDate]="viewDate"
 [events]="events">
</mwl-calendar-month-view>
```

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

### All-Day Event Rendering and Interaction

Source: https://mattlewis92.github.io/angular-calendar/docs/components/CalendarWeekViewComponent.html

This snippet illustrates the rendering of all-day events within the week view. It includes directives for resizing (mwlResizable) and dragging (mwlDraggable), along with event handlers for these interactions. Use this for displaying and interacting with all-day events.

```html
<div #eventRowContainer class="cal-events-row">
              @for (
                allDayEvent of eventRow.row;
                track allDayEvent.event.id ?? allDayEvent.event
              ) {
                <div
                  #event
                  class="cal-event-container"
                  [class.cal-draggable]="
                    allDayEvent.event.draggable && allDayEventResizes.size === 0
                  "
                  [class.cal-starts-within-week]="!allDayEvent.startsBeforeWeek"
                  [class.cal-ends-within-week]="!allDayEvent.endsAfterWeek"
                  [ngClass]="allDayEvent.event?.cssClass"
                  [style.width.%]="(100 / days.length) * allDayEvent.span"
                  [style.marginLeft.%]="
                    rtl ? null : (100 / days.length) * allDayEvent.offset
                  "
                  [style.marginRight.%]="
                    rtl ? (100 / days.length) * allDayEvent.offset : null
                  "
                  mwlResizable
                  [resizeCursors]="resizeCursors"
                  [resizeSnapGrid]="{
                    left: dayColumnWidth,
                    right: dayColumnWidth,
                  }"
                  [validateResize]="validateResize"
                  (resizeStart)=" 
                    allDayEventResizeStarted(
                      eventRowContainer,
                      allDayEvent,
                      $event
                    )
                  "
                  (resizing)=" 
                    allDayEventResizing(allDayEvent, $event, dayColumnWidth)
                  "
                  (resizeEnd)="allDayEventResizeEnded(allDayEvent)"
                  mwlDraggable
                  dragActiveClass="cal-drag-active"
                  [dropData]="{
                    event: allDayEvent.event,
                    calendarId: calendarId,
                  }"
                  [dragAxis]="{
                    x:
                      allDayEvent.event.draggable &&
                      allDayEventResizes.size === 0,
                    y:
                      !snapDraggedEvents &&
                      allDayEvent.event.draggable &&
                      allDayEventResizes.size === 0,
                  }"
                  [dragSnapGrid]="
                    snapDraggedEvents ? { x: dayColumnWidth } : {}
                  "
                  [validateDrag]="validateDrag"
                  [touchStartLongPress]="{ delay: 300, delta: 30 }"
                  (dragStart)=" 
                    dragStarted(eventRowContainer, event, allDayEvent, false)
                  "
                  (dragging)="allDayEventDragMove()"
                  (dragEnd)="dragEnded(allDayEvent, $event, dayColumnWidth)"
                >
                  @if (
                    allDayEvent.event?.resizable?.beforeStart &&
                    !allDayEvent.startsBeforeWeek
                  ) {
                    <div
                      class="cal-resize-handle cal-resize-handle-before-start"
                      mwlResizeHandle
                      [resizeEdges]="{ left: true }"
                    ></div>
                  }
                  <mwl-calendar-week-view-event
                    [locale]="locale"
                    [weekEvent]="allDayEvent"
                    [tooltipPlacement]="tooltipPlacement"
                    [tooltipTemplate]="tooltipTemplate"
                    [tooltipAppendToBody]="tooltipAppendToBody"
                    [tooltipDelay]="tooltipDelay"
                    [customTemplate]="eventTemplate"
                    [eventTitleTemplate]="eventTitleTemplate"
                    [eventActionsTemplate]="eventActionsTemplate"
                    [daysInWeek]="daysInWeek"
                    (eventClicked)=" 
                      eventClicked.emit({
                        event: allDayEvent.event,
                        sourceEvent: $event.sourceEvent,
                      })
                    "
                  />
                  @if (
                    allDayEvent.event?.resizable?.afterEnd &&
                    !allDayEvent.endsAfterWeek
                  ) {
                    <div
                      class="cal-resize-handle cal-resize-handle-after-end"
                      mwlResizeHandle
                      [resizeEdges]="{ right: true }"
                    ></div>
                  }
                </div>
              }
            </div>
```

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

### Registering French Locale Data

Source: https://mattlewis92.github.io/angular-calendar/docs/changelog.html

Example of how to register French locale data for use with Angular's date formatting. This is necessary when using locales other than English.

```typescript
import {
  registerLocaleData
} from '@angular/common';
import localeFr from '@angular/common/locales/fr'; // to register french

registerLocaleData(localeFr);
```

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

### Using CalendarMomentDateFormatter with Moment.js

Source: https://mattlewis92.github.io/angular-calendar/docs/injectables/CalendarMomentDateFormatter.html

To use the CalendarMomentDateFormatter, you need to provide Moment.js and the formatter class in your Angular module. This example shows the necessary injection tokens and class.

```typescript
import { InjectionToken, Injectable, inject } from '@angular/core';
import {
  CalendarDateFormatterInterface,
  DateFormatterParams,
} from '../calendar-date-formatter/calendar-date-formatter.interface';
import { getWeekViewPeriod } from '../util/util';
import { DateAdapter } from '../../../date-adapters/date-adapter';

export const MOMENT: InjectionToken<any> = new InjectionToken('Moment');

/**
 * This will use <a href="http://momentjs.com/" target="_blank">moment</a> to do all date formatting. To use this class:
 *
 * ```typescript
 * import { CalendarDateFormatter, CalendarMomentDateFormatter, MOMENT } from 'angular-calendar';
 * import moment from 'moment';
 *
 * // in your component
 * provide: [{
 *   provide: MOMENT, useValue: moment
 * }, {
 *   provide: CalendarDateFormatter, useClass: CalendarMomentDateFormatter
 * }]
 *
 * ```
 */
@Injectable()
export class CalendarMomentDateFormatter
  implements CalendarDateFormatterInterface
{
  protected moment = inject(MOMENT);

  protected dateAdapter = inject(DateAdapter);

  /**
   * The month view header week day labels
   */
  public monthViewColumnHeader({ date, locale }: DateFormatterParams): string {
    return this.moment(date).locale(locale).format('dddd');
  }

  /**
   * The month view cell day number
   */
  public monthViewDayNumber({ date, locale }: DateFormatterParams): string {
    return this.moment(date).locale(locale).format('D');
  }

  /**
   * The month view title
   */
  public monthViewTitle({ date, locale }: DateFormatterParams): string {

```

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

### Get Week View Data

Source: https://mattlewis92.github.io/angular-calendar/docs/components/CalendarWeekViewComponent.html

This method calculates and returns the week view data, including event placement and layout, based on the provided events and configuration.

```typescript
getWeekView(events: CalendarEvent[]) {
    return this.utils.getWeekView({
      events,
      viewDate: this.viewDate,
      weekStartsOn: this.weekStartsOn,
      excluded: this.excludeDays,
      precision: this.precision,
      absolutePositionedEvents: true,
      hourSegments: this.hourSegments,
      hourDuration: this.hourDuration,
      dayStart: {
        hour: this.dayStartHour,
        minute: this.dayStartMinute,
      },
      dayEnd: {
        hour: this.dayEndHour,
        minute: this.dayEndMinute,
      },
      segmentHeight: this.hourSegmentHeight,
      weekendDays: this.weekendDays,
      minimumEventHeight: this.minimumEventHeight,
      ...getWeekViewPeriod(
        this.dateAdapter,
        this.viewDate,
        this.weekStartsOn,
        this.excludeDays,
        this.daysInWeek,
      ),
    });
  }
```

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

### Angular Calendar: Calculating Dragged Event Times

Source: https://mattlewis92.github.io/angular-calendar/docs/interfaces/WeekViewAllDayEventResize.html

Calculates the new start and end times for an event being dragged in the week view, considering day and hour movements.

```typescript
protected getDragMovedEventTimes(
    weekEvent: WeekViewAllDayEvent | WeekViewTimeEvent,
    dragEndEvent: DragEndEvent | DragMoveEvent,
    dayWidth: number,
    useY: boolean,
  ) {
    const daysDragged =
      (roundToNearest(dragEndEvent.x, dayWidth) / dayWidth) *
      (this.rtl ? -1 : 1);
    const minutesMoved = useY
      ? getMinutesMoved(
          dragEndEvent.y,
          this.hourSegments,
          this.hourSegmentHeight,
          this.eventSnapSize,
          this.hourDuration,
        )
      : 0;

    const start = this.dateAdapter.addMinutes(
      addDaysWithExclusions(
        this.dateAdapter,
        weekEvent.event.start,
        daysDragged,
        this.excludeDays,
      ),
      minutesMoved,
    );
    let end: Date;
    if (weekEvent.event.end) {
      end = this.dateAdapter.addMinutes(
        addDaysWithExclusions(
          this.dateAdapter,
          weekEvent.event.end,
          daysDragged,
          this.excludeDays,
        ),
        minutesMoved,
      );
    }

    return { start, end };
  }
```

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

### System.js Configuration for angular-draggable-droppable

Source: https://mattlewis92.github.io/angular-calendar/docs/changelog.html

For System.js users, add this configuration to include the angular-draggable-droppable module.

```javascript
'angular-draggable-droppable': 'npm:angular-draggable-droppable/dist/umd/angular-draggable-droppable.js'
```

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

### CalendarEventTimesChangedEvent Interface

Source: https://mattlewis92.github.io/angular-calendar/docs/interfaces/CalendarMonthViewEventTimesChangedEvent.html

The base interface for events that signal a change in an event's times. It includes the event object, the new start and end times, and the event type.

```typescript
export interface CalendarEventTimesChangedEvent<EventMetaType = any> {
  event: CalendarEvent<EventMetaType>;
  newStart: Date;
  newEnd?: Date;
  type: CalendarEventTimesChangedEventType;
}
```

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

### Emit Before View Render Method

Source: https://mattlewis92.github.io/angular-calendar/docs/components/CalendarMonthViewComponent.html

Emits the beforeViewRender event with the current header, body days, and period information.

```typescript
emitBeforeViewRender(): void {
    if (this.columnHeaders && this.view) {
      this.beforeViewRender.emit({
        header: this.columnHeaders,
        body: this.view.days,
        period: this.view.period,
      });
    }
  }
```

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

### Angular Calendar: Getting Week View Data

Source: https://mattlewis92.github.io/angular-calendar/docs/interfaces/WeekViewAllDayEventResize.html

Generates the week view data, including event positioning and layout, based on provided events and view configurations.

```typescript
protected getWeekView(events: CalendarEvent[]) {
    return this.utils.getWeekView({
      events,
      viewDate: this.viewDate,
      weekStartsOn: this.weekStartsOn,
      excluded: this.excludeDays,
      precision: this.precision,
      absolutePositionedEvents: true,
      hourSegments: this.hourSegments,
      hourDuration: this.hourDuration,
      dayStart: {
        hour: this.dayStartHour,
        minute: this.dayStartMinute,
      },
      dayEnd: {
        hour: this.dayEndHour,
        minute: this.dayEndMinute,
      },
      segmentHeight: this.hourSegmentHeight,
      weekendDays: this.weekendDays,
      minimumEventHeight: this.minimumEventHeight,
      ...getWeekViewPeriod(
        this.dateAdapter,
        this.viewDate,
        this.weekStartsOn,
        this.excludeDays,
        this.daysInWeek,
      ),
    });
  }
```

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

### Calculate Dragged Event Times

Source: https://mattlewis92.github.io/angular-calendar/docs/components/CalendarWeekViewComponent.html

This utility function calculates the new start and end times for an event based on drag or move events, considering day and minute movements.

```typescript
getDragMovedEventTimes(
    weekEvent: WeekViewAllDayEvent | WeekViewTimeEvent,
    dragEndEvent: DragEndEvent | DragMoveEvent,
    dayWidth: number,
    useY: boolean,
  ) {
    const daysDragged =
      (roundToNearest(dragEndEvent.x, dayWidth) / dayWidth) *
      (this.rtl ? -1 : 1);
    const minutesMoved = useY
      ? getMinutesMoved(
          dragEndEvent.y,
          this.hourSegments,
          this.hourSegmentHeight,
          this.eventSnapSize,
          this.hourDuration,
        )
      : 0;

    const start = this.dateAdapter.addMinutes(
      addDaysWithExclusions(
        this.dateAdapter,
        weekEvent.event.start,
        daysDragged,
        this.excludeDays,
      ),
      minutesMoved,
    );
    let end: Date;
    if (weekEvent.event.end) {
      end = this.dateAdapter.addMinutes(
        addDaysWithExclusions(
          this.dateAdapter,
          weekEvent.event.end,
          daysDragged,
          this.excludeDays,
        ),
        minutesMoved,
      );
    }

    return { start, end };
  }
```

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

### All-Day Event Resizing and Dragging Directives

Source: https://mattlewis92.github.io/angular-calendar/docs/interfaces/WeekViewAllDayEventResize.html

This snippet shows the directives and event bindings for enabling resizing and dragging of all-day events. It includes configurations for resize cursors, snap grids, validation, and drag axis based on event properties and calendar state.

```html
<div
  class="cal-all-day-event"
  [style.width.%]="rtl ? null : (100 / days.length) * allDayEvent.offset"
  [style.marginRight.%]="
    rtl ? (100 / days.length) * allDayEvent.offset : null
  "
  mwlResizable
  [resizeCursors]="resizeCursors"
  [resizeSnapGrid]="{
    left: dayColumnWidth,
    right: dayColumnWidth,
  }"
  [validateResize]="validateResize"
  (resizeStart)="allDayEventResizeStarted(
    eventRowContainer,
    allDayEvent,
    $event
  )"
  (resizing)="allDayEventResizing(allDayEvent, $event, dayColumnWidth)"
  (resizeEnd)="allDayEventResizeEnded(allDayEvent)"
  mwlDraggable
  dragActiveClass="cal-drag-active"
  [dropData]="{
    event: allDayEvent.event,
    calendarId: calendarId,
  }"
  [dragAxis]="{
    x:
      allDayEvent.event.draggable &&
      allDayEventResizes.size === 0,
    y:
      !snapDraggedEvents &&
      allDayEvent.event.draggable &&
      allDayEventResizes.size === 0,
  }"
  [dragSnapGrid]="
    snapDraggedEvents ? { x: dayColumnWidth } : {}
  "
  [validateDrag]="validateDrag"
  [touchStartLongPress]="{ delay: 300, delta: 30 }"
  (dragStart)="dragStarted(eventRowContainer, event, allDayEvent, false)"
  (dragging)="allDayEventDragMove()"
  (dragEnd)="dragEnded(allDayEvent, $event, dayColumnWidth)"
>
  @if (
    allDayEvent.event?.resizable?.beforeStart &&
    !allDayEvent.startsBeforeWeek
  ) {
    <div
      class="cal-resize-handle cal-resize-handle-before-start"
      mwlResizeHandle
      [resizeEdges]="{ left: true }"
    ></div>
  }
  <mwl-calendar-week-view-event
    [locale]="locale"
    [weekEvent]="allDayEvent"
    [tooltipPlacement]="tooltipPlacement"
    [tooltipTemplate]="tooltipTemplate"
    [tooltipAppendToBody]="tooltipAppendToBody"
    [tooltipDelay]="tooltipDelay"
    [customTemplate]="eventTemplate"
    [eventTitleTemplate]="eventTitleTemplate"
    [eventActionsTemplate]="eventActionsTemplate"
    [daysInWeek]="daysInWeek"
    (eventClicked)="eventClicked.emit({
      event: allDayEvent.event,
      sourceEvent: $event.sourceEvent,
    })"
  />
  @if (
    allDayEvent.event?.resizable?.afterEnd &&
    !allDayEvent.endsAfterWeek
  ) {
    <div
      class="cal-resize-handle cal-resize-handle-after-end"
      mwlResizeHandle
      [resizeEdges]="{ right: true }"
    ></div>
  }
</div>
```

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

### Handling Event Drop

Source: https://mattlewis92.github.io/angular-calendar/docs/interfaces/CalendarWeekViewBeforeRenderEvent.html

This method is called when an event is dropped onto a date in the calendar. It checks if the drop is valid and emits an eventTimesChanged event with the new start date and type.

```typescript
eventDropped(
    dropEvent: Pick<
      DropEvent<{ event?: CalendarEvent; calendarId?: symbol }>, 
      'dropData'
    >,
    date: Date,
    allDay: boolean,
  ): void {
    if (
      shouldFireDroppedEvent(dropEvent, date, allDay, this.calendarId) &&
      this.lastDragEnterDate.getTime() === date.getTime() &&
      (!this.snapDraggedEvents ||
        dropEvent.dropData.event !== this.lastDraggedEvent)
    ) {
      this.eventTimesChanged.emit({
        type: CalendarEventTimesChangedEventType.Drop,
        event: dropEvent.dropData.event,
        newStart: date,
        allDay,
      });
    }
    this.lastDraggedEvent = null;
  }
```

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

### Release a New Version

Source: https://mattlewis92.github.io/angular-calendar/docs/index.html

Bump the version in package.json to release a new module version. This process will become automatic after version 1.0.

```bash
pnpm release
```

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

### Calculate All-Day Event Resized Dates

Source: https://mattlewis92.github.io/angular-calendar/docs/interfaces/WeekViewAllDayEventResize.html

Calculates the new start and end dates for an all-day event when it is resized. It accounts for the direction of the resize (left/right) and potential exclusions of days.

```typescript
protected getAllDayEventResizedDates(
    calendarEvent: CalendarEvent,
    daysDiff: number,
    isLeftResize: boolean,
  ): { start: Date; end: Date } {
    const newEventDates = {
      start: calendarEvent.start,
      end: calendarEvent.end,
    };

    if (isLeftResize) {
      newEventDates.start = addDaysWithExclusions(
        this.dateAdapter,
        calendarEvent.start,
        daysDiff,
        this.excludeDays,
      );
    } else {
      newEventDates.end = addDaysWithExclusions(
        this.dateAdapter,
        calendarEvent.end,
        daysDiff,
        this.excludeDays,
      );
    }

    return newEventDates;
  }
```

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

### CalendarDayViewComponent Inputs

Source: https://mattlewis92.github.io/angular-calendar/docs/components/CalendarDayViewComponent.html

Configuration options for the Calendar Day View Component.

```APIDOC
## CalendarDayViewComponent Inputs

### Description
This section details the various inputs available for the `CalendarDayViewComponent` to customize its behavior and appearance.

### Inputs

- **viewDate** (`Date`) - The current view date. This determines the specific day being displayed in the view.
- **tooltipPlacement** (`PlacementArray`) - Optional. Defaults to `'auto'`. The placement of the event tooltip. Can be customized to control where the tooltip appears relative to the event.
- **tooltipTemplate** (`TemplateRef<any>`) - Optional. A custom template to use for the event tooltips. Allows for rich, custom-designed tooltips.
- **tooltipDelay** (`number`) - Optional. The delay in milliseconds before the tooltip should be displayed. If not provided, the tooltip will be displayed immediately.
- **validateEventTimesChanged** (`function`) - Optional. Allows you to customize where events can be dragged and resized to. This function should return `true` to allow dragging and resizing to the new location, or `false` to prevent it.
```

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

### Week View Hour Segment Custom Template

Source: https://mattlewis92.github.io/angular-calendar/docs/changelog.html

Example of how to use a custom template for the `hourSegmentTemplate` in the week view. It shows how to access the `isTimeLabel` variable and conditionally apply styles.

```html
<div class="cal-time" *ngIf="isTimeLabel"></div>
```
Tokens:
Raw