angular-calendar

The recommended way to install the library is using the Angular CLI ng add command, which handles dependencies and configuration automatically.

ng add angular-calendar

When using ng add angular-calendar, you can specify several options to tailor the installation to your project structure:

• dateAdapter: Choose between 'moment' or 'date-fns'. This determines which date library and adapter factory are configured.
• standalone: A boolean flag. If true, the schematic attempts to install the calendar into a standalone component. If false (default), it installs into an NgModule.
• projectName: The name of the project in your workspace to install into.
• installToPath: An optional path to a specific component or module where the calendar imports and providers should be added.

You can customize how event titles and tooltips are displayed in different calendar views (month, week, day) by overriding the CalendarEventTitleFormatter class. To apply your custom logic, extend the CalendarEventTitleFormatter class and provide it in your component's providers array using the CalendarEventTitleFormatter token.

import { Injectable } from '@angular/core';
import { CalendarEventTitleFormatter, CalendarEvent } from 'angular-calendar';

@Injectable()
class CustomEventTitleFormatter extends CalendarEventTitleFormatter {

  month(event: CalendarEvent): string {
    return `Custom prefix: ${event.title}`;
  }

}

// In your component
@Component({
  // ...
  providers: [{
    provide: CalendarEventTitleFormatter,
    useClass: CustomEventTitleFormatter
  }]
})
class MyComponent {}

By default, ng add angular-calendar configures your application using NgModule. The schematic will:

1. Locate your root module (or a module at installToPath).
2. Add the calendar components and directives to the module's imports array.
3. Add the provideCalendar provider to the module's providers array.

If you run ng add angular-calendar --standalone, the schematic will:

1. Locate your standalone component (either at a specified installToPath or the default app component).
2. Add the following imports from angular-calendar to the component's imports array:
   • CalendarPreviousViewDirective
   • CalendarTodayDirective
   • CalendarNextViewDirective
   • CalendarMonthViewComponent
   • CalendarWeekViewComponent
   • CalendarDayViewComponent
   • CalendarDatePipe
   • DateAdapter
   • provideCalendar
3. Add the provideCalendar provider to the component's providers array using the appropriate factory for your chosen dateAdapter.

The mwlCalendarToday directive allows you to create a button or element that, when clicked, updates the calendar's view date to the current day. It uses two-way data binding with the viewDate property to ensure the calendar view synchronizes with the updated date.

To use it, apply the directive to an element (like a <button>) and bind it to your component's view date variable using [(viewDate)].

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

The mwl-calendar-day-view component displays all events for a single day. It is a wrapper around the week view configured for one day.

Basic usage requires providing a viewDate and an array of events.

To use Moment.js for all date formatting within the calendar, you must provide both the MOMENT injection token (with the moment library instance) and the CalendarMomentDateFormatter class as the CalendarDateFormatter. This allows the calendar to use Moment's locale and formatting capabilities for all view headers, titles, and time labels.

import { CalendarDateFormatter, CalendarMomentDateFormatter, MOMENT } from 'angular-calendar';
import moment from 'moment';

// in your component or module providers
provide: [{
  provide: MOMENT, useValue: moment
}, {
  provide: CalendarDateFormatter, useClass: CalendarMomentDateFormatter
}]

The mwl-calendar-month-view component displays a monthly calendar view with events. You can pass in a viewDate to control which month is shown and an events array to populate the calendar.

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