angular-calendar

angular-calendar

Version 0.31.1
Published 9 months ago
1.71 MB
6 dependencies
MIT license

Install

npm i angular-calendar

yarn add angular-calendar

pnpm add angular-calendar

Overview

A calendar component for angular 15.0+ that can display events on a month, week or day view

Index

Variables

variable collapseAnimation

const collapseAnimation: AnimationTriggerMetadata;

variable MOMENT

const MOMENT: InjectionToken<string>;

Functions

function getWeekViewPeriod

getWeekViewPeriod: (
    dateAdapter: DateAdapter,
    viewDate: Date,
    weekStartsOn: number,
    excluded?: number[],
    daysInWeek?: number
) => { viewStart: Date; viewEnd: Date };

Classes

class CalendarA11y

class CalendarA11y {}

This class is responsible for adding accessibility to the calendar. You may override any of its methods via angulars DI to suit your requirements. For example:

import { A11yParams, CalendarA11y } from 'angular-calendar';
import { formatDate, I18nPluralPipe } from '@angular/common';
import { Injectable } from '@angular/core';

// adding your own a11y params
export interface CustomA11yParams extends A11yParams {
  isDrSuess?: boolean;
}

@Injectable()
export class CustomCalendarA11y extends CalendarA11y {
  constructor(protected i18nPlural: I18nPluralPipe) {
    super(i18nPlural);
  }

  // overriding a function
  public openDayEventsLandmark({ date, locale, isDrSuess }: CustomA11yParams): string {
    if (isDrSuess) {
      return `
        ${formatDate(date, 'EEEE MMMM d', locale)}
         Today you are you! That is truer than true! There is no one alive
         who is you-er than you!
      `;
    }
  }
}

// in your component that uses the calendar
providers: [{
 provide: CalendarA11y,
 useClass: CustomCalendarA11y
}]

constructor

constructor(i18nPlural: I18nPluralPipe);

property i18nPlural

protected i18nPlural: I18nPluralPipe;

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<CalendarA11y, never>;

property ɵprov

static ɵprov: i0.ɵɵInjectableDeclaration<CalendarA11y>;

method actionButtonLabel

actionButtonLabel: ({ action }: A11yParams) => string;

Aria label for the calendar event actions icons
Returns
'Edit' for fa-pencil icons, and 'Delete' for fa-times icons

method allDayEventDescription

allDayEventDescription: ({ event, locale }: A11yParams) => string;

Descriptive aria label for an all day event @example: Scott's Party, event spans multiple days: start time October 19 5:00pm, no stop time

method eventDescription

eventDescription: ({ event, locale }: A11yParams) => string;

Descriptive aria label for an event @example: Saturday October 19th, Scott's Pizza Party, from 11:00am to 5:00pm

method hideDayHourSegment

hideDayHourSegment: () => boolean;

Returns
true if hour segments in the day view should be aria-hidden

method hideEventTitle

hideEventTitle: () => boolean;

Returns
true if event titles should be aria-hidden (global)

method hideMonthCellEvents

hideMonthCellEvents: () => boolean;

Returns
true if the events inside the month cell should be aria-hidden

method hideWeekHourSegment

hideWeekHourSegment: () => boolean;

Returns
true if hour segments in the week view should be aria-hidden

method monthCell

monthCell: ({ day, locale }: A11yParams) => string;

Aria label for the badges/date of a cell @example: Saturday October 19 1 event click to expand

method monthCellTabIndex

monthCellTabIndex: () => number;

Returns
{number} Tab index to be given to month cells

method openDayEventsAlert

openDayEventsAlert: ({ date, locale }: A11yParams) => string;

Aria label for alert that a day in the month view was expanded @example: Saturday October 19 expanded

method openDayEventsLandmark

openDayEventsLandmark: ({ date, locale }: A11yParams) => string;

Aria label for the open day events start landmark @example: Saturday October 19 expanded view

class CalendarAngularDateFormatter

class CalendarAngularDateFormatter implements CalendarDateFormatterInterface {}

This will use the angular date pipe to do all date formatting. It is the default date formatter used by the calendar.

constructor

constructor(dateAdapter: DateAdapter);

property dateAdapter

protected dateAdapter: DateAdapter;

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<CalendarAngularDateFormatter, never>;

property ɵprov

static ɵprov: i0.ɵɵInjectableDeclaration<CalendarAngularDateFormatter>;

method dayViewHour

dayViewHour: ({ date, locale }: DateFormatterParams) => string;

The time formatting down the left hand side of the day view

method weekViewColumnSubHeader

weekViewColumnSubHeader: ({ date, locale }: DateFormatterParams) => string;

The week view sub header day and month labels

method weekViewHour

weekViewHour: ({ date, locale }: DateFormatterParams) => string;

The time formatting down the left hand side of the week view

class CalendarCommonModule

class CalendarCommonModule {}

Import this module to if you're just using a singular view and want to save on bundle size. Example usage:

import { CalendarCommonModule, CalendarMonthModule } from 'angular-calendar';

@NgModule({
  imports: [
    CalendarCommonModule.forRoot(),
    CalendarMonthModule
  ]
})
class MyModule {}

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<CalendarCommonModule, never>;

property ɵinj

static ɵinj: i0.ɵɵInjectorDeclaration<CalendarCommonModule>;

property ɵmod

static ɵmod: i0.ɵɵNgModuleDeclaration<
    CalendarCommonModule,
    [
        typeof i1.CalendarEventActionsComponent,
        typeof i2.CalendarEventTitleComponent,
        typeof i3.CalendarTooltipWindowComponent,
        typeof i3.CalendarTooltipDirective,
        typeof i4.CalendarPreviousViewDirective,
        typeof i5.CalendarNextViewDirective,
        typeof i6.CalendarTodayDirective,
        typeof i7.CalendarDatePipe,
        typeof i8.CalendarEventTitlePipe,
        typeof i9.CalendarA11yPipe,
        typeof i10.ClickDirective,
        typeof i11.KeydownEnterDirective
    ],
    [any],
    [
        typeof i1.CalendarEventActionsComponent,
        typeof i2.CalendarEventTitleComponent,
        typeof i3.CalendarTooltipWindowComponent,
        typeof i3.CalendarTooltipDirective,
        typeof i4.CalendarPreviousViewDirective,
        typeof i5.CalendarNextViewDirective,
        typeof i6.CalendarTodayDirective,
        typeof i7.CalendarDatePipe,
        typeof i8.CalendarEventTitlePipe,
        typeof i9.CalendarA11yPipe,
        typeof i10.ClickDirective,
        typeof i11.KeydownEnterDirective
    ]
>;

method forRoot

static forRoot: (
    dateAdapter: Provider,
    config?: CalendarModuleConfig
) => ModuleWithProviders<CalendarCommonModule>;

class CalendarDateFormatter

class CalendarDateFormatter extends CalendarAngularDateFormatter {}

This class is responsible for all formatting of dates. There are 3 implementations available, the CalendarAngularDateFormatter (default) which uses the angular date pipe to format dates, the CalendarNativeDateFormatter which will use the Intl API to format dates, or there is the CalendarMomentDateFormatter which uses moment.

If you wish, you may override any of the defaults via angulars DI. For example:

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
}]

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<CalendarDateFormatter, never>;

property ɵprov

static ɵprov: i0.ɵɵInjectableDeclaration<CalendarDateFormatter>;

class CalendarDayModule

class CalendarDayModule {}

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<CalendarDayModule, never>;

property ɵinj

static ɵinj: i0.ɵɵInjectorDeclaration<CalendarDayModule>;

property ɵmod

static ɵmod: i0.ɵɵNgModuleDeclaration<
    CalendarDayModule,
    [typeof i1.CalendarDayViewComponent],
    [any, typeof i3.CalendarCommonModule, typeof i4.CalendarWeekModule],
    [typeof i1.CalendarDayViewComponent]
>;

class CalendarDayViewComponent

class CalendarDayViewComponent {}

Shows all events on a given day. Example usage:

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

property allDayEventsLabelTemplate

allDayEventsLabelTemplate: TemplateRef<any>;

A custom template to use for the all day events label text

property beforeViewRender

beforeViewRender: EventEmitter<CalendarWeekViewBeforeRenderEvent>;

An output that will be called before the view is rendered for the current day. If you add the cssClass property to an hour grid segment it will add that class to the hour segment in the template

property currentTimeMarkerTemplate

currentTimeMarkerTemplate: TemplateRef<any>;

A custom template to use for the current time marker

property dayEndHour

dayEndHour: number;

The day end hours in 24 hour time. Must be 0-23

property dayEndMinute

dayEndMinute: number;

The day end minutes. Must be 0-59

property dayStartHour

dayStartHour: number;

The day start hours in 24 hour time. Must be 0-23

property dayStartMinute

dayStartMinute: number;

The day start minutes. Must be 0-59

property eventActionsTemplate

eventActionsTemplate: TemplateRef<any>;

A custom template to use for event actions

property eventClicked

eventClicked: EventEmitter<{
    event: CalendarEvent;
    sourceEvent: MouseEvent | KeyboardEvent;
}>;

Called when an event title is clicked

property events

events: CalendarEvent[];

An array of events to display on view The schema is available here: https://github.com/mattlewis92/calendar-utils/blob/c51689985f59a271940e30bc4e2c4e1fee3fcb5c/src/calendarUtils.ts#L49-L63

property eventSnapSize

eventSnapSize: number;

The grid size to snap resizing and dragging of events to

property eventTemplate

eventTemplate: TemplateRef<any>;

A custom template to use for day view events

property eventTimesChanged

eventTimesChanged: EventEmitter<CalendarEventTimesChangedEvent<any>>;

Called when an event is resized or dragged and dropped

property eventTitleTemplate

eventTitleTemplate: TemplateRef<any>;

A custom template to use for event titles

property hourDuration

hourDuration: number;

The duration of each segment group in minutes

property hourSegmentClicked

hourSegmentClicked: EventEmitter<{ date: Date; sourceEvent: MouseEvent }>;

Called when an hour segment is clicked

property hourSegmentHeight

hourSegmentHeight: number;

The height in pixels of each hour segment

property hourSegments

hourSegments: number;

The number of segments in an hour. Must divide equally into 60.

property hourSegmentTemplate

hourSegmentTemplate: TemplateRef<any>;

A custom template to use to replace the hour segment

property locale

locale: string;

The locale used to format dates

property minimumEventHeight

minimumEventHeight: number;

The minimum height in pixels of each event

property ɵcmp

static ɵcmp: i0.ɵɵComponentDeclaration<
    CalendarDayViewComponent,
    'mwl-calendar-day-view',
    never,
    {
        viewDate: 'viewDate';
        events: 'events';
        hourSegments: 'hourSegments';
        hourSegmentHeight: 'hourSegmentHeight';
        hourDuration: 'hourDuration';
        minimumEventHeight: 'minimumEventHeight';
        dayStartHour: 'dayStartHour';
        dayStartMinute: 'dayStartMinute';
        dayEndHour: 'dayEndHour';
        dayEndMinute: 'dayEndMinute';
        refresh: 'refresh';
        locale: 'locale';
        eventSnapSize: 'eventSnapSize';
        tooltipPlacement: 'tooltipPlacement';
        tooltipTemplate: 'tooltipTemplate';
        tooltipAppendToBody: 'tooltipAppendToBody';
        tooltipDelay: 'tooltipDelay';
        hourSegmentTemplate: 'hourSegmentTemplate';
        eventTemplate: 'eventTemplate';
        eventTitleTemplate: 'eventTitleTemplate';
        eventActionsTemplate: 'eventActionsTemplate';
        snapDraggedEvents: 'snapDraggedEvents';
        allDayEventsLabelTemplate: 'allDayEventsLabelTemplate';
        currentTimeMarkerTemplate: 'currentTimeMarkerTemplate';
        validateEventTimesChanged: 'validateEventTimesChanged';
        resizeCursors: 'resizeCursors';
    },
    {
        eventClicked: 'eventClicked';
        hourSegmentClicked: 'hourSegmentClicked';
        eventTimesChanged: 'eventTimesChanged';
        beforeViewRender: 'beforeViewRender';
    },
    never,
    never,
    false,
    never
>;

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<CalendarDayViewComponent, never>;

property refresh

refresh: Subject<any>;

An observable that when emitted on will re-render the current view

property resizeCursors

resizeCursors: Partial<Pick<ResizeCursors, 'leftOrRight' | 'topOrBottom'>>;

Customise the document cursor when dragging to resize an event

property snapDraggedEvents

snapDraggedEvents: boolean;

Whether to snap events to a grid when dragging

property tooltipAppendToBody

tooltipAppendToBody: boolean;

Whether to append tooltips to the body or next to the trigger element

property tooltipDelay

tooltipDelay: number;

The delay in milliseconds before the tooltip should be displayed. If not provided the tooltip will be displayed immediately.

property tooltipPlacement

tooltipPlacement: PlacementArray;

The placement of the event tooltip

property tooltipTemplate

tooltipTemplate: TemplateRef<any>;

A custom template to use for the event tooltips

property validateEventTimesChanged

validateEventTimesChanged: (event: CalendarEventTimesChangedEvent) => boolean;

Allow you to customise where events can be dragged and resized to. Return true to allow dragging and resizing to the new location, or false to prevent it

property viewDate

viewDate: Date;

The current view date

class CalendarEventTitleFormatter

class CalendarEventTitleFormatter {}

This class is responsible for displaying all event titles within the calendar. You may override any of its methods via angulars DI to suit your requirements. For example:

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
providers: [{
 provide: CalendarEventTitleFormatter,
 useClass: CustomEventTitleFormatter
}]

method day

day: (event: CalendarEvent, title: string) => string;

The day view event title.

method dayTooltip

dayTooltip: (event: CalendarEvent, title: string) => string;

The day view event tooltip. Return a falsey value from this to disable the tooltip.

method month

month: (event: CalendarEvent, title: string) => string;

The month view event title.

method monthTooltip

monthTooltip: (event: CalendarEvent, title: string) => string;

The month view event tooltip. Return a falsey value from this to disable the tooltip.

method week

week: (event: CalendarEvent, title: string) => string;

The week view event title.

method weekTooltip

weekTooltip: (event: CalendarEvent, title: string) => string;

The week view event tooltip. Return a falsey value from this to disable the tooltip.

class CalendarModule

class CalendarModule {}

The main module of this library. Example usage:

import { CalenderModule } from 'angular-calendar';

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

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<CalendarModule, never>;

property ɵinj

static ɵinj: i0.ɵɵInjectorDeclaration<CalendarModule>;

property ɵmod

static ɵmod: i0.ɵɵNgModuleDeclaration<
    CalendarModule,
    never,
    [
        typeof i1.CalendarCommonModule,
        typeof i2.CalendarMonthModule,
        typeof i3.CalendarWeekModule,
        typeof i4.CalendarDayModule
    ],
    [
        typeof i1.CalendarCommonModule,
        typeof i2.CalendarMonthModule,
        typeof i3.CalendarWeekModule,
        typeof i4.CalendarDayModule
    ]
>;

method forRoot

static forRoot: (
    dateAdapter: Provider,
    config?: CalendarModuleConfig
) => ModuleWithProviders<CalendarModule>;

class CalendarMomentDateFormatter

class CalendarMomentDateFormatter implements CalendarDateFormatterInterface {}

This will use moment to do all date formatting. To use this class:

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

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

constructor

constructor(moment: any, dateAdapter: DateAdapter);

property dateAdapter

protected dateAdapter: DateAdapter;

property moment

protected moment: any;

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<CalendarMomentDateFormatter, never>;

property ɵprov

static ɵprov: i0.ɵɵInjectableDeclaration<CalendarMomentDateFormatter>;

method dayViewHour

dayViewHour: ({ date, locale }: DateFormatterParams) => string;

The time formatting down the left hand side of the day view

method dayViewTitle

dayViewTitle: ({ date, locale }: DateFormatterParams) => string;

The day view title

method monthViewColumnHeader

monthViewColumnHeader: ({ date, locale }: DateFormatterParams) => string;

The month view header week day labels

method monthViewDayNumber

monthViewDayNumber: ({ date, locale }: DateFormatterParams) => string;

The month view cell day number

method monthViewTitle

monthViewTitle: ({ date, locale }: DateFormatterParams) => string;

The month view title

method weekViewColumnHeader

weekViewColumnHeader: ({ date, locale }: DateFormatterParams) => string;

The week view header week day labels

method weekViewColumnSubHeader

weekViewColumnSubHeader: ({ date, locale }: DateFormatterParams) => string;

The week view sub header day and month labels

method weekViewHour

weekViewHour: ({ date, locale }: DateFormatterParams) => string;

The time formatting down the left hand side of the week view

method weekViewTitle

weekViewTitle: ({
    date,
    locale,
    weekStartsOn,
    excludeDays,
    daysInWeek,
}: DateFormatterParams) => string;

The week view title

class CalendarMonthModule

class CalendarMonthModule {}

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<CalendarMonthModule, never>;

property ɵinj

static ɵinj: i0.ɵɵInjectorDeclaration<CalendarMonthModule>;

property ɵmod

static ɵmod: i0.ɵɵNgModuleDeclaration<
    CalendarMonthModule,
    [
        typeof i1.CalendarMonthViewComponent,
        typeof i2.CalendarMonthCellComponent,
        typeof i3.CalendarOpenDayEventsComponent,
        typeof i4.CalendarMonthViewHeaderComponent
    ],
    [any, any, typeof i7.CalendarCommonModule],
    [
        any,
        typeof i1.CalendarMonthViewComponent,
        typeof i2.CalendarMonthCellComponent,
        typeof i3.CalendarOpenDayEventsComponent,
        typeof i4.CalendarMonthViewHeaderComponent
    ]
>;

class CalendarMonthViewComponent

class CalendarMonthViewComponent implements OnChanges, OnInit, OnDestroy {}

Shows all events on a given month. Example usage:

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

constructor

constructor(
    cdr: ChangeDetectorRef,
    utils: CalendarUtils,
    locale: string,
    dateAdapter: DateAdapter
);

property activeDay

activeDay: Date;

If set will be used to determine the day that should be open. If not set, the viewDate is used

property activeDayIsOpen

activeDayIsOpen: boolean;

Whether the events list for the day of the viewDate option is visible or not

property beforeViewRender

beforeViewRender: EventEmitter<CalendarMonthViewBeforeRenderEvent>;

An output that will be called before the view is rendered for the current month. If you add the cssClass property to a day in the body it will add that class to the cell element in the template

property cdr

protected cdr: ChangeDetectorRef;

property cellTemplate

cellTemplate: TemplateRef<any>;

A custom template to use to replace the day cell

property columnHeaderClicked

columnHeaderClicked: EventEmitter<{
    isoDayNumber: number;
    sourceEvent: MouseEvent | KeyboardEvent;
}>;

Called when a header week day is clicked. Returns ISO day number.

property columnHeaders

columnHeaders: WeekDay[];

property dateAdapter

protected dateAdapter: DateAdapter;

property dayClicked

dayClicked: EventEmitter<{
    day: MonthViewDay;
    sourceEvent: MouseEvent | KeyboardEvent;
}>;

Called when the day cell is clicked

property eventActionsTemplate

eventActionsTemplate: TemplateRef<any>;

A custom template to use for event actions

property eventClicked

eventClicked: EventEmitter<{
    event: CalendarEvent;
    sourceEvent: MouseEvent | KeyboardEvent;
}>;

Called when the event title is clicked

property events

events: CalendarEvent[];

An array of events to display on view. The schema is available here: https://github.com/mattlewis92/calendar-utils/blob/c51689985f59a271940e30bc4e2c4e1fee3fcb5c/src/calendarUtils.ts#L49-L63

property eventTimesChanged

eventTimesChanged: EventEmitter<
    CalendarMonthViewEventTimesChangedEvent<any, any>
>;

Called when an event is dragged and dropped

property eventTitleTemplate

eventTitleTemplate: TemplateRef<any>;

A custom template to use for event titles

property excludeDays

excludeDays: number[];

An array of day indexes (0 = sunday, 1 = monday etc) that will be hidden on the view

property headerTemplate

headerTemplate: TemplateRef<any>;

A custom template to use to replace the header

property locale

locale: string;

The locale used to format dates

property openDay

openDay: MonthViewDay;

property openDayEventsTemplate

openDayEventsTemplate: TemplateRef<any>;

A custom template to use for the slide down box of events for the active day

property openRowIndex

openRowIndex: number;

property ɵcmp

static ɵcmp: i0.ɵɵComponentDeclaration<
    CalendarMonthViewComponent,
    'mwl-calendar-month-view',
    never,
    {
        viewDate: 'viewDate';
        events: 'events';
        excludeDays: 'excludeDays';
        activeDayIsOpen: 'activeDayIsOpen';
        activeDay: 'activeDay';
        refresh: 'refresh';
        locale: 'locale';
        tooltipPlacement: 'tooltipPlacement';
        tooltipTemplate: 'tooltipTemplate';
        tooltipAppendToBody: 'tooltipAppendToBody';
        tooltipDelay: 'tooltipDelay';
        weekStartsOn: 'weekStartsOn';
        headerTemplate: 'headerTemplate';
        cellTemplate: 'cellTemplate';
        openDayEventsTemplate: 'openDayEventsTemplate';
        eventTitleTemplate: 'eventTitleTemplate';
        eventActionsTemplate: 'eventActionsTemplate';
        weekendDays: 'weekendDays';
    },
    {
        beforeViewRender: 'beforeViewRender';
        dayClicked: 'dayClicked';
        eventClicked: 'eventClicked';
        columnHeaderClicked: 'columnHeaderClicked';
        eventTimesChanged: 'eventTimesChanged';
    },
    never,
    never,
    false,
    never
>;

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<CalendarMonthViewComponent, never>;

property refresh

refresh: Subject<any>;

An observable that when emitted on will re-render the current view

property refreshSubscription

refreshSubscription: Subscription;

property tooltipAppendToBody

tooltipAppendToBody: boolean;

Whether to append tooltips to the body or next to the trigger element

property tooltipDelay

tooltipDelay: number;

The delay in milliseconds before the tooltip should be displayed. If not provided the tooltip will be displayed immediately.

property tooltipPlacement

tooltipPlacement: PlacementArray;

The placement of the event tooltip

property tooltipTemplate

tooltipTemplate: TemplateRef<any>;

A custom template to use for the event tooltips

property trackByDate

trackByDate: (index: number, day: MonthViewDay) => string;

property trackByRowOffset

trackByRowOffset: (index: number, offset: number) => string;

property utils

protected utils: CalendarUtils;

property view

view: MonthView;

property viewDate

viewDate: Date;

The current view date

property weekendDays

weekendDays: number[];

An array of day indexes (0 = sunday, 1 = monday etc) that indicate which days are weekends

property weekStartsOn

weekStartsOn: number;

The start number of the week. If using the moment date adapter this option won't do anything and you'll need to set it globally like so:
moment.updateLocale('en', { week: { dow: 1, // set start of week to monday instead doy: 0, }, });

method checkActiveDayIsOpen

protected checkActiveDayIsOpen: () => void;

method emitBeforeViewRender

protected emitBeforeViewRender: () => void;

method eventDropped

eventDropped: (
    droppedOn: MonthViewDay,
    event: CalendarEvent,
    draggedFrom?: MonthViewDay
) => void;

method ngOnChanges

ngOnChanges: (changes: any) => void;

method ngOnDestroy

ngOnDestroy: () => void;

method ngOnInit

ngOnInit: () => void;

method refreshAll

protected refreshAll: () => void;

method refreshBody

protected refreshBody: () => void;

method refreshHeader

protected refreshHeader: () => void;

method toggleDayHighlight

toggleDayHighlight: (event: CalendarEvent, isHighlighted: boolean) => void;

class CalendarNativeDateFormatter

class CalendarNativeDateFormatter implements CalendarDateFormatterInterface {}

This will use Intl API to do all date formatting.
You will need to include a polyfill for older browsers.

constructor

constructor(dateAdapter: DateAdapter);

property dateAdapter

protected dateAdapter: DateAdapter;

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<CalendarNativeDateFormatter, never>;

property ɵprov

static ɵprov: i0.ɵɵInjectableDeclaration<CalendarNativeDateFormatter>;

method dayViewHour

dayViewHour: ({ date, locale }: DateFormatterParams) => string;

The time formatting down the left hand side of the day view

method dayViewTitle

dayViewTitle: ({ date, locale }: DateFormatterParams) => string;

The day view title

method monthViewColumnHeader

monthViewColumnHeader: ({ date, locale }: DateFormatterParams) => string;

The month view header week day labels

method monthViewDayNumber

monthViewDayNumber: ({ date, locale }: DateFormatterParams) => string;

The month view cell day number

method monthViewTitle

monthViewTitle: ({ date, locale }: DateFormatterParams) => string;

The month view title

method weekViewColumnHeader

weekViewColumnHeader: ({ date, locale }: DateFormatterParams) => string;

The week view header week day labels

method weekViewColumnSubHeader

weekViewColumnSubHeader: ({ date, locale }: DateFormatterParams) => string;

The week view sub header day and month labels

method weekViewHour

weekViewHour: ({ date, locale }: DateFormatterParams) => string;

The time formatting down the left hand side of the week view

method weekViewTitle

weekViewTitle: ({
    date,
    locale,
    weekStartsOn,
    excludeDays,
    daysInWeek,
}: DateFormatterParams) => string;

The week view title

class CalendarUtils

class CalendarUtils {}

constructor

constructor(dateAdapter: DateAdapter);

property dateAdapter

protected dateAdapter: DateAdapter;

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<CalendarUtils, never>;

property ɵprov

static ɵprov: i0.ɵɵInjectableDeclaration<CalendarUtils>;

method getMonthView

getMonthView: (args: GetMonthViewArgs) => MonthView;

method getWeekView

getWeekView: (args: GetWeekViewArgs) => WeekView;

method getWeekViewHeader

getWeekViewHeader: (args: GetWeekViewHeaderArgs) => WeekDay[];

class CalendarWeekModule

class CalendarWeekModule {}

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<CalendarWeekModule, never>;

property ɵinj

static ɵinj: i0.ɵɵInjectorDeclaration<CalendarWeekModule>;

property ɵmod

static ɵmod: i0.ɵɵNgModuleDeclaration<
    CalendarWeekModule,
    [
        typeof i1.CalendarWeekViewComponent,
        typeof i2.CalendarWeekViewHeaderComponent,
        typeof i3.CalendarWeekViewEventComponent,
        typeof i4.CalendarWeekViewHourSegmentComponent,
        typeof i5.CalendarWeekViewCurrentTimeMarkerComponent
    ],
    [any, any, any, typeof i9.CalendarCommonModule],
    [
        any,
        any,
        typeof i1.CalendarWeekViewComponent,
        typeof i2.CalendarWeekViewHeaderComponent,
        typeof i3.CalendarWeekViewEventComponent,
        typeof i4.CalendarWeekViewHourSegmentComponent,
        typeof i5.CalendarWeekViewCurrentTimeMarkerComponent
    ]
>;

class CalendarWeekViewComponent

class CalendarWeekViewComponent
    implements OnChanges, OnInit, OnDestroy, AfterViewInit {}

Shows all events on a given week. Example usage:

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

constructor

constructor(
    cdr: ChangeDetectorRef,
    utils: CalendarUtils,
    locale: string,
    dateAdapter: DateAdapter,
    element: ElementRef<HTMLElement>
);

property allDayEventResizes

allDayEventResizes: Map<WeekViewAllDayEvent, WeekViewAllDayEventResize>;

property allDayEventsLabelTemplate

allDayEventsLabelTemplate: TemplateRef<any>;

A custom template to use for the all day events label text

property beforeViewRender

beforeViewRender: EventEmitter<CalendarWeekViewBeforeRenderEvent>;

An output that will be called before the view is rendered for the current week. If you add the cssClass property to a day in the header it will add that class to the cell element in the template

property calendarId

calendarId: Symbol;

property cdr

protected cdr: ChangeDetectorRef;

property currentTimeMarkerTemplate

currentTimeMarkerTemplate: TemplateRef<any>;

A custom template to use for the current time marker

property dateAdapter

protected dateAdapter: DateAdapter;

property dayColumnWidth

dayColumnWidth: number;

property dayEndHour

dayEndHour: number;

The day end hours in 24 hour time. Must be 0-23

property dayEndMinute

dayEndMinute: number;

The day end minutes. Must be 0-59

property dayHeaderClicked

dayHeaderClicked: EventEmitter<{ day: WeekDay; sourceEvent: MouseEvent }>;

Called when a header week day is clicked. Adding a cssClass property on $event.day will add that class to the header element

property days

days: WeekDay[];

property daysInWeek

daysInWeek: number;

The number of days in a week. Can be used to create a shorter or longer week view. The first day of the week will always be the viewDate and weekStartsOn if set will be ignored

property dayStartHour

dayStartHour: number;

The day start hours in 24 hour time. Must be 0-23

property dayStartMinute

dayStartMinute: number;

The day start minutes. Must be 0-59

property dragActive

dragActive: boolean;

property dragAlreadyMoved

dragAlreadyMoved: boolean;

property element

protected element: ElementRef<HTMLElement>;

property eventActionsTemplate

eventActionsTemplate: TemplateRef<any>;

A custom template to use for event actions

property eventClicked

eventClicked: EventEmitter<{
    event: CalendarEvent;
    sourceEvent: MouseEvent | KeyboardEvent;
}>;

Called when an event title is clicked

property eventDragEnterByType

eventDragEnterByType: { allDay: number; time: number };

property events

events: CalendarEvent[];

An array of events to display on view The schema is available here: https://github.com/mattlewis92/calendar-utils/blob/c51689985f59a271940e30bc4e2c4e1fee3fcb5c/src/calendarUtils.ts#L49-L63

property eventSnapSize

eventSnapSize: number;

The grid size to snap resizing and dragging of hourly events to

property eventTemplate

eventTemplate: TemplateRef<any>;

A custom template to use for week view events

property eventTimesChanged

eventTimesChanged: EventEmitter<CalendarEventTimesChangedEvent<any>>;

Called when an event is resized or dragged and dropped

property eventTitleTemplate

eventTitleTemplate: TemplateRef<any>;

A custom template to use for event titles

property excludeDays

excludeDays: number[];

An array of day indexes (0 = sunday, 1 = monday etc) that will be hidden on the view

property headerTemplate

headerTemplate: TemplateRef<any>;

A custom template to use to replace the header

property hourDuration

hourDuration: number;

The duration of each segment group in minutes

property hourSegmentClicked

hourSegmentClicked: EventEmitter<{ date: Date; sourceEvent: MouseEvent }>;

Called when an hour segment is clicked

property hourSegmentHeight

hourSegmentHeight: number;

The height in pixels of each hour segment

property hourSegments

hourSegments: number;

The number of segments in an hour. Must divide equally into 60.

property hourSegmentTemplate

hourSegmentTemplate: TemplateRef<any>;

A custom template to use to replace the hour segment

property lastDraggedEvent

lastDraggedEvent: CalendarEvent;

property locale

locale: string;

The locale used to format dates

property minimumEventHeight

minimumEventHeight: number;

The minimum height in pixels of each event

property ɵcmp

static ɵcmp: i0.ɵɵComponentDeclaration<
    CalendarWeekViewComponent,
    'mwl-calendar-week-view',
    never,
    {
        viewDate: 'viewDate';
        events: 'events';
        excludeDays: 'excludeDays';
        refresh: 'refresh';
        locale: 'locale';
        tooltipPlacement: 'tooltipPlacement';
        tooltipTemplate: 'tooltipTemplate';
        tooltipAppendToBody: 'tooltipAppendToBody';
        tooltipDelay: 'tooltipDelay';
        weekStartsOn: 'weekStartsOn';
        headerTemplate: 'headerTemplate';
        eventTemplate: 'eventTemplate';
        eventTitleTemplate: 'eventTitleTemplate';
        eventActionsTemplate: 'eventActionsTemplate';
        precision: 'precision';
        weekendDays: 'weekendDays';
        snapDraggedEvents: 'snapDraggedEvents';
        hourSegments: 'hourSegments';
        hourDuration: 'hourDuration';
        hourSegmentHeight: 'hourSegmentHeight';
        minimumEventHeight: 'minimumEventHeight';
        dayStartHour: 'dayStartHour';
        dayStartMinute: 'dayStartMinute';
        dayEndHour: 'dayEndHour';
        dayEndMinute: 'dayEndMinute';
        hourSegmentTemplate: 'hourSegmentTemplate';
        eventSnapSize: 'eventSnapSize';
        allDayEventsLabelTemplate: 'allDayEventsLabelTemplate';
        daysInWeek: 'daysInWeek';
        currentTimeMarkerTemplate: 'currentTimeMarkerTemplate';
        validateEventTimesChanged: 'validateEventTimesChanged';
        resizeCursors: 'resizeCursors';
    },
    {
        dayHeaderClicked: 'dayHeaderClicked';
        eventClicked: 'eventClicked';
        eventTimesChanged: 'eventTimesChanged';
        beforeViewRender: 'beforeViewRender';
        hourSegmentClicked: 'hourSegmentClicked';
    },
    never,
    never,
    false,
    never
>;

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<CalendarWeekViewComponent, never>;

property precision

precision: 'days' | 'minutes';

The precision to display events. days will round event start and end dates to the nearest day and minutes will not do this rounding

property refresh

refresh: Subject<any>;

An observable that when emitted on will re-render the current view

property refreshSubscription

refreshSubscription: Subscription;

property resizeCursors

resizeCursors: Partial<Pick<ResizeCursors, 'leftOrRight' | 'topOrBottom'>>;

Customise the document cursor when dragging to resize an event

property rtl

rtl: boolean;

property snapDraggedEvents

snapDraggedEvents: boolean;

Whether to snap events to a grid when dragging

property timeEventResizes

timeEventResizes: Map<CalendarEvent, ResizeEvent>;

property tooltipAppendToBody

tooltipAppendToBody: boolean;

Whether to append tooltips to the body or next to the trigger element

property tooltipDelay

tooltipDelay: number;

The delay in milliseconds before the tooltip should be displayed. If not provided the tooltip will be displayed immediately.

property tooltipPlacement

tooltipPlacement: PlacementArray;

The placement of the event tooltip

property tooltipTemplate

tooltipTemplate: TemplateRef<any>;

A custom template to use for the event tooltips

property trackByHour

trackByHour: (index: number, hour: WeekViewHour) => string;

property trackByHourColumn

trackByHourColumn: (
    index: number,
    column: WeekViewHourColumn
) => string | WeekViewHourColumn;

property trackByHourSegment

trackByHourSegment: (index: number, segment: WeekViewHourSegment) => string;

property trackById

trackById: (index: number, row: WeekViewAllDayEventRow) => string;

property trackByWeekAllDayEvent

trackByWeekAllDayEvent: (
    index: number,
    weekEvent: WeekViewAllDayEvent
) => string | number | CalendarEvent<any>;

property trackByWeekDayHeaderDate

trackByWeekDayHeaderDate: (index: number, day: WeekDay) => string;

property trackByWeekTimeEvent

trackByWeekTimeEvent: (
    index: number,
    weekEvent: WeekViewTimeEvent
) => string | number | CalendarEvent<any>;

property utils

protected utils: CalendarUtils;

property validateDrag

validateDrag: ValidateDrag;

property validateEventTimesChanged

validateEventTimesChanged: (event: CalendarEventTimesChangedEvent) => boolean;

Allow you to customise where events can be dragged and resized to. Return true to allow dragging and resizing to the new location, or false to prevent it

property validateResize

validateResize: (args: any) => boolean;

property view

view: WeekView;

property viewDate

viewDate: Date;

The current view date

property weekendDays

weekendDays: number[];

An array of day indexes (0 = sunday, 1 = monday etc) that indicate which days are weekends

property weekStartsOn

weekStartsOn: number;

The start number of the week. This is ignored when the daysInWeek input is also set as the viewDate will be used as the start of the week instead. Note, you should also pass this to the calendar title pipe so it shows the same days: {{ viewDate | calendarDate:(view + 'ViewTitle'):locale:weekStartsOn }} If using the moment date adapter this option won't do anything and you'll need to set it globally like so:
moment.updateLocale('en', { week: { dow: 1, // set start of week to monday instead doy: 0, }, });

method allDayEventDragMove

allDayEventDragMove: () => void;

method allDayEventResizeEnded

allDayEventResizeEnded: (allDayEvent: WeekViewAllDayEvent) => void;

method allDayEventResizeStarted

allDayEventResizeStarted: (
    allDayEventsContainer: HTMLElement,
    allDayEvent: WeekViewAllDayEvent,
    resizeEvent: ResizeEvent
) => void;

method allDayEventResizing

allDayEventResizing: (
    allDayEvent: WeekViewAllDayEvent,
    resizeEvent: ResizeEvent,
    dayWidth: number
) => void;

method dateDragEnter

dateDragEnter: (date: Date) => void;

method dragEnded

dragEnded: (
    weekEvent: WeekViewAllDayEvent | WeekViewTimeEvent,
    dragEndEvent: DragEndEvent,
    dayWidth: number,
    useY?: boolean
) => void;

method dragEnter

dragEnter: (type: 'allDay' | 'time') => void;

method dragLeave

dragLeave: (type: 'allDay' | 'time') => void;

method dragMove

dragMove: (dayEvent: WeekViewTimeEvent, dragEvent: DragMoveEvent) => void;

method dragStarted

dragStarted: (
    eventsContainerElement: HTMLElement,
    eventElement: HTMLElement,
    event: WeekViewTimeEvent | WeekViewAllDayEvent,
    useY: boolean
) => void;

method emitBeforeViewRender

protected emitBeforeViewRender: () => void;

method eventDropped

eventDropped: (
    dropEvent: Pick<
        DropEvent<{ event?: CalendarEvent; calendarId?: symbol }>,
        'dropData'
    >,
    date: Date,
    allDay: boolean
) => void;

method getAllDayEventResizedDates

protected getAllDayEventResizedDates: (
    event: CalendarEvent,
    daysDiff: number,
    beforeStart: boolean
) => { start: Date; end: Date };

method getDayColumnWidth

getDayColumnWidth: (eventRowContainer: HTMLElement) => number;

method getDragMovedEventTimes

protected getDragMovedEventTimes: (
    weekEvent: WeekViewAllDayEvent | WeekViewTimeEvent,
    dragEndEvent: DragEndEvent | DragMoveEvent,
    dayWidth: number,
    useY: boolean
) => { start: Date; end: Date };

method getTimeEventResizedDates

protected getTimeEventResizedDates: (
    calendarEvent: CalendarEvent,
    resizeEvent: ResizeEvent
) => { start: Date; end: Date };

method getWeekView

protected getWeekView: (events: CalendarEvent[]) => WeekView;

method ngAfterViewInit

ngAfterViewInit: () => void;

method ngOnChanges

ngOnChanges: (changes: any) => void;

method ngOnDestroy

ngOnDestroy: () => void;

method ngOnInit

ngOnInit: () => void;

method refreshAll

protected refreshAll: () => void;

method refreshBody

protected refreshBody: () => void;

method refreshHeader

protected refreshHeader: () => void;

method resizeStarted

protected resizeStarted: (
    eventsContainer: HTMLElement,
    event: WeekViewTimeEvent | WeekViewAllDayEvent,
    dayWidth?: number
) => void;

method restoreOriginalEvents

protected restoreOriginalEvents: (
    tempEvents: CalendarEvent[],
    adjustedEvents: Map<CalendarEvent, CalendarEvent>,
    snapDraggedEvents?: boolean
) => void;

method timeEventResizeEnded

timeEventResizeEnded: (timeEvent: WeekViewTimeEvent) => void;

method timeEventResizeStarted

timeEventResizeStarted: (
    eventsContainer: HTMLElement,
    timeEvent: WeekViewTimeEvent,
    resizeEvent: ResizeEvent
) => void;

method timeEventResizing

timeEventResizing: (
    timeEvent: WeekViewTimeEvent,
    resizeEvent: ResizeEvent
) => void;

class DateAdapter

abstract class DateAdapter implements BaseDateAdapter {}

method addDays

abstract addDays: (date: Date | number, amount: number) => Date;

method addHours

abstract addHours: (date: Date | number, amount: number) => Date;

method addMinutes

abstract addMinutes: (date: Date | number, amount: number) => Date;

method addMonths

abstract addMonths: (date: Date | number, amount: number) => Date;

method addSeconds

abstract addSeconds: (date: Date | number, amount: number) => Date;

method addWeeks

abstract addWeeks: (date: Date | number, amount: number) => Date;

method differenceInDays

abstract differenceInDays: (
    dateLeft: Date | number,
    dateRight: Date | number
) => number;

method differenceInMinutes

abstract differenceInMinutes: (
    dateLeft: Date | number,
    dateRight: Date | number
) => number;

method differenceInSeconds

abstract differenceInSeconds: (
    dateLeft: Date | number,
    dateRight: Date | number
) => number;

method endOfDay

abstract endOfDay: (date: Date | number) => Date;

method endOfMonth

abstract endOfMonth: (date: Date | number) => Date;

method endOfWeek

abstract endOfWeek: (
    date: Date | number,
    options?: { weekStartsOn?: number }
) => Date;

method getDate

abstract getDate: (date: Date | number) => number;

method getDay

abstract getDay: (date: Date | number) => number;

method getHours

abstract getHours: (date: Date | number) => number;

method getISOWeek

abstract getISOWeek: (date: Date | number) => number;

method getMinutes

abstract getMinutes: (date: Date | number) => number;

method getMonth

abstract getMonth: (date: Date | number) => number;

method getTimezoneOffset

abstract getTimezoneOffset: (date: Date | number) => number;

method getYear

abstract getYear: (date: Date | number) => number;

method isSameDay

abstract isSameDay: (
    dateLeft: Date | number,
    dateRight: Date | number
) => boolean;

method isSameMonth

abstract isSameMonth: (
    dateLeft: Date | number,
    dateRight: Date | number
) => boolean;

method isSameSecond

abstract isSameSecond: (
    dateLeft: Date | number,
    dateRight: Date | number
) => boolean;

method max

abstract max: (dates: (Date | number)[]) => Date;

method setDate

abstract setDate: (date: Date | number, dayOfMonth: number) => Date;

method setHours

abstract setHours: (date: Date | number, hours: number) => Date;

method setMinutes

abstract setMinutes: (date: Date | number, minutes: number) => Date;

method setMonth

abstract setMonth: (date: Date | number, month: number) => Date;

method setYear

abstract setYear: (date: Date | number, year: number) => Date;

method startOfDay

abstract startOfDay: (date: Date | number) => Date;

method startOfMinute

abstract startOfMinute: (date: Date | number) => Date;

method startOfMonth

abstract startOfMonth: (date: Date | number) => Date;

method startOfWeek

abstract startOfWeek: (
    date: Date | number,
    options?: { weekStartsOn?: number }
) => Date;

method subDays

abstract subDays: (date: Date | number, amount: number) => Date;

method subMonths

abstract subMonths: (date: Date | number, amount: number) => Date;

method subWeeks

abstract subWeeks: (date: Date | number, amount: number) => Date;

class ɵCalendarA11yPipe

class CalendarA11yPipe implements PipeTransform {}

This pipe is primarily for rendering aria labels. Example usage:

// where `myEvent` is a `CalendarEvent` and myLocale is a locale identifier
{{ { event: myEvent, locale: myLocale } | calendarA11y: 'eventDescription' }}

constructor

constructor(calendarA11y: CalendarA11y, locale: string);

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<CalendarA11yPipe, never>;

property ɵpipe

static ɵpipe: i0.ɵɵPipeDeclaration<CalendarA11yPipe, 'calendarA11y', false>;

method transform

transform: (a11yParams: A11yParams, method: string) => string;

class ɵCalendarDatePipe

class CalendarDatePipe implements PipeTransform {}

This pipe is primarily for rendering the current view title. Example usage:

// where `viewDate` is a `Date` and view is `'month' | 'week' | 'day'`
{{ viewDate | calendarDate:(view + 'ViewTitle'):'en' }}

constructor

constructor(dateFormatter: CalendarDateFormatter, locale: string);

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<CalendarDatePipe, never>;

property ɵpipe

static ɵpipe: i0.ɵɵPipeDeclaration<CalendarDatePipe, 'calendarDate', false>;

method transform

transform: (
    date: Date,
    method: string,
    locale?: string,
    weekStartsOn?: number,
    excludeDays?: number[],
    daysInWeek?: number
) => string;

class ɵCalendarEventActionsComponent

class CalendarEventActionsComponent {}

property customTemplate

customTemplate: TemplateRef<any>;

property event

event: CalendarEvent;

property ɵcmp

static ɵcmp: i0.ɵɵComponentDeclaration<
    CalendarEventActionsComponent,
    'mwl-calendar-event-actions',
    never,
    { event: 'event'; customTemplate: 'customTemplate' },
    {},
    never,
    never,
    false,
    never
>;

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<CalendarEventActionsComponent, never>;

property trackByActionId

trackByActionId: (
    index: number,
    action: EventAction
) => string | number | EventAction;

class ɵCalendarEventTitleComponent

class CalendarEventTitleComponent {}

property customTemplate

customTemplate: TemplateRef<any>;

property event

event: CalendarEvent;

property ɵcmp

static ɵcmp: i0.ɵɵComponentDeclaration<
    CalendarEventTitleComponent,
    'mwl-calendar-event-title',
    never,
    { event: 'event'; customTemplate: 'customTemplate'; view: 'view' },
    {},
    never,
    never,
    false,
    never
>;

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<CalendarEventTitleComponent, never>;

property view

view: string;

class ɵCalendarEventTitlePipe

class CalendarEventTitlePipe implements PipeTransform {}

constructor

constructor(calendarEventTitle: CalendarEventTitleFormatter);

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<CalendarEventTitlePipe, never>;

property ɵpipe

static ɵpipe: i0.ɵɵPipeDeclaration<
    CalendarEventTitlePipe,
    'calendarEventTitle',
    false
>;

method transform

transform: (title: string, titleType: string, event: CalendarEvent) => string;

class ɵCalendarMonthCellComponent

class CalendarMonthCellComponent {}

property customTemplate

customTemplate: TemplateRef<any>;

property day

day: MonthViewDay;

property eventClicked

eventClicked: EventEmitter<{ event: CalendarEvent; sourceEvent: MouseEvent }>;

property highlightDay

highlightDay: EventEmitter<any>;

property locale

locale: string;

property openDay

openDay: MonthViewDay;

property ɵcmp

static ɵcmp: i0.ɵɵComponentDeclaration<
    CalendarMonthCellComponent,
    'mwl-calendar-month-cell',
    never,
    {
        day: 'day';
        openDay: 'openDay';
        locale: 'locale';
        tooltipPlacement: 'tooltipPlacement';
        tooltipAppendToBody: 'tooltipAppendToBody';
        customTemplate: 'customTemplate';
        tooltipTemplate: 'tooltipTemplate';
        tooltipDelay: 'tooltipDelay';
    },
    {
        highlightDay: 'highlightDay';
        unhighlightDay: 'unhighlightDay';
        eventClicked: 'eventClicked';
    },
    never,
    never,
    false,
    never
>;

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<CalendarMonthCellComponent, never>;

property tooltipAppendToBody

tooltipAppendToBody: boolean;

property tooltipDelay

tooltipDelay: number;

property tooltipPlacement

tooltipPlacement: PlacementArray;

property tooltipTemplate

tooltipTemplate: TemplateRef<any>;

property trackByEventId

trackByEventId: (
    index: number,
    event: CalendarEvent<any>
) => string | number | CalendarEvent<any>;

property unhighlightDay

unhighlightDay: EventEmitter<any>;

property validateDrag

validateDrag: ({ x, y }: { x: number; y: number }) => boolean;

class ɵCalendarMonthViewHeaderComponent

class CalendarMonthViewHeaderComponent {}

property columnHeaderClicked

columnHeaderClicked: EventEmitter<{
    isoDayNumber: number;
    sourceEvent: MouseEvent;
}>;

property customTemplate

customTemplate: TemplateRef<any>;

property days

days: WeekDay[];

property locale

locale: string;

property ɵcmp

static ɵcmp: i0.ɵɵComponentDeclaration<
    CalendarMonthViewHeaderComponent,
    'mwl-calendar-month-view-header',
    never,
    { days: 'days'; locale: 'locale'; customTemplate: 'customTemplate' },
    { columnHeaderClicked: 'columnHeaderClicked' },
    never,
    never,
    false,
    never
>;

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<CalendarMonthViewHeaderComponent, never>;

property trackByWeekDayHeaderDate

trackByWeekDayHeaderDate: (index: number, day: WeekDay) => string;

class ɵCalendarNextViewDirective

class CalendarNextViewDirective {}

Change the view date to the next view. For example:

<button
 mwlCalendarNextView
 [(viewDate)]="viewDate"
 [view]="view">
 Next
</button>

constructor

constructor(dateAdapter: DateAdapter);

property daysInWeek

daysInWeek: number;

The number of days in a week. If set will add this amount of days instead of 1 week

property excludeDays

excludeDays: number[];

Days to skip when going forward by 1 day

property ɵdir

static ɵdir: i0.ɵɵDirectiveDeclaration<
    CalendarNextViewDirective,
    '[mwlCalendarNextView]',
    never,
    {
        view: 'view';
        viewDate: 'viewDate';
        excludeDays: 'excludeDays';
        daysInWeek: 'daysInWeek';
    },
    { viewDateChange: 'viewDateChange' },
    never,
    never,
    false,
    never
>;

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<CalendarNextViewDirective, never>;

property view

view: CalendarView | 'month' | 'week' | 'day';

The current view

property viewDate

viewDate: Date;

The current view date

property viewDateChange

viewDateChange: EventEmitter<Date>;

Called when the view date is changed

method onClick

onClick: () => void;

class ɵCalendarOpenDayEventsComponent

class CalendarOpenDayEventsComponent {}

property customTemplate

customTemplate: TemplateRef<any>;

property date

date: Date;

property eventActionsTemplate

eventActionsTemplate: TemplateRef<any>;

property eventClicked

eventClicked: EventEmitter<{
    event: CalendarEvent;
    sourceEvent: MouseEvent | KeyboardEvent;
}>;

property events

events: CalendarEvent[];

property eventTitleTemplate

eventTitleTemplate: TemplateRef<any>;

property isOpen

isOpen: boolean;

property locale

locale: string;

property ɵcmp

static ɵcmp: i0.ɵɵComponentDeclaration<
    CalendarOpenDayEventsComponent,
    'mwl-calendar-open-day-events',
    never,
    {
        locale: 'locale';
        isOpen: 'isOpen';
        events: 'events';
        customTemplate: 'customTemplate';
        eventTitleTemplate: 'eventTitleTemplate';
        eventActionsTemplate: 'eventActionsTemplate';
        date: 'date';
    },
    { eventClicked: 'eventClicked' },
    never,
    never,
    false,
    never
>;

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<CalendarOpenDayEventsComponent, never>;

property trackByEventId

trackByEventId: (
    index: number,
    event: CalendarEvent<any>
) => string | number | CalendarEvent<any>;

property validateDrag

validateDrag: ({ x, y }: { x: number; y: number }) => boolean;

class ɵCalendarPreviousViewDirective

class CalendarPreviousViewDirective {}

Change the view date to the previous view. For example:

<button
 mwlCalendarPreviousView
 [(viewDate)]="viewDate"
 [view]="view">
 Previous
</button>

constructor

constructor(dateAdapter: DateAdapter);

property daysInWeek

daysInWeek: number;

The number of days in a week. If set will subtract this amount of days instead of 1 week

property excludeDays

excludeDays: number[];

Days to skip when going back by 1 day

property ɵdir

static ɵdir: i0.ɵɵDirectiveDeclaration<
    CalendarPreviousViewDirective,
    '[mwlCalendarPreviousView]',
    never,
    {
        view: 'view';
        viewDate: 'viewDate';
        excludeDays: 'excludeDays';
        daysInWeek: 'daysInWeek';
    },
    { viewDateChange: 'viewDateChange' },
    never,
    never,
    false,
    never
>;

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<CalendarPreviousViewDirective, never>;

property view

view: CalendarView | 'month' | 'week' | 'day';

The current view

property viewDate

viewDate: Date;

The current view date

property viewDateChange

viewDateChange: EventEmitter<Date>;

Called when the view date is changed

method onClick

onClick: () => void;

class ɵCalendarTodayDirective

class CalendarTodayDirective {}

Change the view date to the current day. For example:

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

constructor

constructor(dateAdapter: DateAdapter);

property ɵdir

static ɵdir: i0.ɵɵDirectiveDeclaration<
    CalendarTodayDirective,
    '[mwlCalendarToday]',
    never,
    { viewDate: 'viewDate' },
    { viewDateChange: 'viewDateChange' },
    never,
    never,
    false,
    never
>;

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<CalendarTodayDirective, never>;

property viewDate

viewDate: Date;

The current view date

property viewDateChange

viewDateChange: EventEmitter<Date>;

Called when the view date is changed

method onClick

onClick: () => void;

class ɵCalendarTooltipDirective

class CalendarTooltipDirective implements OnDestroy, OnChanges {}

constructor

constructor(
    elementRef: ElementRef,
    injector: Injector,
    renderer: Renderer2,
    componentFactoryResolver: ComponentFactoryResolver,
    viewContainerRef: ViewContainerRef,
    document: any
);

property appendToBody

appendToBody: boolean;

property contents

contents: string;

property customTemplate

customTemplate: TemplateRef<any>;

property delay

delay: number;

property event

event: CalendarEvent;

property ɵdir

static ɵdir: i0.ɵɵDirectiveDeclaration<
    CalendarTooltipDirective,
    '[mwlCalendarTooltip]',
    never,
    {
        contents: 'mwlCalendarTooltip';
        placement: 'tooltipPlacement';
        customTemplate: 'tooltipTemplate';
        event: 'tooltipEvent';
        appendToBody: 'tooltipAppendToBody';
        delay: 'tooltipDelay';
    },
    {},
    never,
    never,
    false,
    never
>;

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<CalendarTooltipDirective, never>;

property placement

placement: PlacementArray;

method ngOnChanges

ngOnChanges: (changes: SimpleChanges) => void;

method ngOnDestroy

ngOnDestroy: () => void;

method onMouseOut

onMouseOut: () => void;

method onMouseOver

onMouseOver: () => void;

class ɵCalendarTooltipWindowComponent

class CalendarTooltipWindowComponent {}

property contents

contents: string;

property customTemplate

customTemplate: TemplateRef<any>;

property event

event: CalendarEvent;

property ɵcmp

static ɵcmp: i0.ɵɵComponentDeclaration<
    CalendarTooltipWindowComponent,
    'mwl-calendar-tooltip-window',
    never,
    {
        contents: 'contents';
        placement: 'placement';
        event: 'event';
        customTemplate: 'customTemplate';
    },
    {},
    never,
    never,
    false,
    never
>;

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<CalendarTooltipWindowComponent, never>;

property placement

placement: string;

class ɵCalendarWeekViewCurrentTimeMarkerComponent

class CalendarWeekViewCurrentTimeMarkerComponent implements OnChanges {}

constructor

constructor(dateAdapter: DateAdapter, zone: NgZone);

property columnDate

columnDate: Date;

property columnDate$

columnDate$: BehaviorSubject<Date>;

property customTemplate

customTemplate: TemplateRef<any>;

property dayEndHour

dayEndHour: number;

property dayEndMinute

dayEndMinute: number;

property dayStartHour

dayStartHour: number;

property dayStartMinute

dayStartMinute: number;

property hourDuration

hourDuration: number;

property hourSegmentHeight

hourSegmentHeight: number;

property hourSegments

hourSegments: number;

property marker$

marker$: Observable<{ isVisible: boolean; top: number }>;

property ɵcmp

static ɵcmp: i0.ɵɵComponentDeclaration<
    CalendarWeekViewCurrentTimeMarkerComponent,
    'mwl-calendar-week-view-current-time-marker',
    never,
    {
        columnDate: 'columnDate';
        dayStartHour: 'dayStartHour';
        dayStartMinute: 'dayStartMinute';
        dayEndHour: 'dayEndHour';
        dayEndMinute: 'dayEndMinute';
        hourSegments: 'hourSegments';
        hourDuration: 'hourDuration';
        hourSegmentHeight: 'hourSegmentHeight';
        customTemplate: 'customTemplate';
    },
    {},
    never,
    never,
    false,
    never
>;

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<
    CalendarWeekViewCurrentTimeMarkerComponent,
    never
>;

method ngOnChanges

ngOnChanges: (changes: SimpleChanges) => void;

class ɵCalendarWeekViewEventComponent

class CalendarWeekViewEventComponent {}

property column

column: WeekViewHourColumn;

property customTemplate

customTemplate: TemplateRef<any>;

property daysInWeek

daysInWeek: number;

property eventActionsTemplate

eventActionsTemplate: TemplateRef<any>;

property eventClicked

eventClicked: EventEmitter<{ sourceEvent: MouseEvent | KeyboardEvent }>;

property eventTitleTemplate

eventTitleTemplate: TemplateRef<any>;

property locale

locale: string;

property ɵcmp

static ɵcmp: i0.ɵɵComponentDeclaration<
    CalendarWeekViewEventComponent,
    'mwl-calendar-week-view-event',
    never,
    {
        locale: 'locale';
        weekEvent: 'weekEvent';
        tooltipPlacement: 'tooltipPlacement';
        tooltipAppendToBody: 'tooltipAppendToBody';
        tooltipDisabled: 'tooltipDisabled';
        tooltipDelay: 'tooltipDelay';
        customTemplate: 'customTemplate';
        eventTitleTemplate: 'eventTitleTemplate';
        eventActionsTemplate: 'eventActionsTemplate';
        tooltipTemplate: 'tooltipTemplate';
        column: 'column';
        daysInWeek: 'daysInWeek';
    },
    { eventClicked: 'eventClicked' },
    never,
    never,
    false,
    never
>;

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<CalendarWeekViewEventComponent, never>;

property tooltipAppendToBody

tooltipAppendToBody: boolean;

property tooltipDelay

tooltipDelay: number;

property tooltipDisabled

tooltipDisabled: boolean;

property tooltipPlacement

tooltipPlacement: PlacementArray;

property tooltipTemplate

tooltipTemplate: TemplateRef<any>;

property weekEvent

weekEvent: any;

class ɵCalendarWeekViewHeaderComponent

class CalendarWeekViewHeaderComponent {}

property customTemplate

customTemplate: TemplateRef<any>;

property dayHeaderClicked

dayHeaderClicked: EventEmitter<{ day: WeekDay; sourceEvent: MouseEvent }>;

property days

days: WeekDay[];

property dragEnter

dragEnter: EventEmitter<{ date: Date }>;

property eventDropped

eventDropped: EventEmitter<{ event: CalendarEvent; newStart: Date }>;

property locale

locale: string;

property ɵcmp

static ɵcmp: i0.ɵɵComponentDeclaration<
    CalendarWeekViewHeaderComponent,
    'mwl-calendar-week-view-header',
    never,
    { days: 'days'; locale: 'locale'; customTemplate: 'customTemplate' },
    {
        dayHeaderClicked: 'dayHeaderClicked';
        eventDropped: 'eventDropped';
        dragEnter: 'dragEnter';
    },
    never,
    never,
    false,
    never
>;

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<CalendarWeekViewHeaderComponent, never>;

property trackByWeekDayHeaderDate

trackByWeekDayHeaderDate: (index: number, day: WeekDay) => string;

class ɵCalendarWeekViewHourSegmentComponent

class CalendarWeekViewHourSegmentComponent {}

property customTemplate

customTemplate: TemplateRef<any>;

property daysInWeek

daysInWeek: number;

property isTimeLabel

isTimeLabel: boolean;

property locale

locale: string;

property ɵcmp

static ɵcmp: i0.ɵɵComponentDeclaration<
    CalendarWeekViewHourSegmentComponent,
    'mwl-calendar-week-view-hour-segment',
    never,
    {
        segment: 'segment';
        segmentHeight: 'segmentHeight';
        locale: 'locale';
        isTimeLabel: 'isTimeLabel';
        daysInWeek: 'daysInWeek';
        customTemplate: 'customTemplate';
    },
    {},
    never,
    never,
    false,
    never
>;

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<
    CalendarWeekViewHourSegmentComponent,
    never
>;

property segment

segment: WeekViewHourSegment;

property segmentHeight

segmentHeight: number;

class ɵClickDirective

class ClickDirective implements OnInit, OnDestroy {}

constructor

constructor(renderer: Renderer2, elm: ElementRef<HTMLElement>, document: any);

property click

click: EventEmitter<MouseEvent>;

property clickListenerDisabled

clickListenerDisabled: boolean;

property ɵdir

static ɵdir: i0.ɵɵDirectiveDeclaration<
    ClickDirective,
    '[mwlClick]',
    never,
    { clickListenerDisabled: 'clickListenerDisabled' },
    { click: 'mwlClick' },
    never,
    never,
    false,
    never
>;

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<ClickDirective, never>;

method ngOnDestroy

ngOnDestroy: () => void;

method ngOnInit

ngOnInit: () => void;

class ɵKeydownEnterDirective

class KeydownEnterDirective implements OnInit, OnDestroy {}

constructor

constructor(host: ElementRef<HTMLElement>, ngZone: NgZone, renderer: Renderer2);

property keydown

keydown: EventEmitter<KeyboardEvent>;

property ɵdir

static ɵdir: i0.ɵɵDirectiveDeclaration<
    KeydownEnterDirective,
    '[mwlKeydownEnter]',
    never,
    {},
    { keydown: 'mwlKeydownEnter' },
    never,
    never,
    false,
    never
>;

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<KeydownEnterDirective, never>;

method ngOnDestroy

ngOnDestroy: () => void;

method ngOnInit

ngOnInit: () => void;

Interfaces

interface A11yParams

interface A11yParams {}

The parameters passed to the a11y methods.

property action

action?: EventAction;

Action button label e.g. 'Edit'

property date

date?: Date;

A date

property day

day?: MonthViewDay;

A day in the month view

property event

event?: CalendarEvent;

A calendar event

property locale

locale?: string;

Users preferred locale

interface CalendarDateFormatterInterface

interface CalendarDateFormatterInterface {}

If using a completely custom date formatter then it should implement this interface.

method dayViewHour

dayViewHour: (params: DateFormatterParams) => string;

The time formatting down the left hand side of the day view

method dayViewTitle

dayViewTitle: (params: DateFormatterParams) => string;

The day view title

method monthViewColumnHeader

monthViewColumnHeader: (params: DateFormatterParams) => string;

The month view header week day labels

method monthViewDayNumber

monthViewDayNumber: (params: DateFormatterParams) => string;

The month view cell day number

method monthViewTitle

monthViewTitle: (params: DateFormatterParams) => string;

The month view title

method weekViewColumnHeader

weekViewColumnHeader: (params: DateFormatterParams) => string;

The week view header week day labels

method weekViewColumnSubHeader

weekViewColumnSubHeader: (params: DateFormatterParams) => string;

The week view sub header day and month labels

method weekViewHour

weekViewHour: (params: DateFormatterParams) => string;

The time formatting down the left hand side of the day view

method weekViewTitle

weekViewTitle: (params: DateFormatterParams) => string;

The week view title

interface CalendarEventTimesChangedEvent

interface CalendarEventTimesChangedEvent<MetaType = any> {}

The output $event type when an event is resized or dragged and dropped.

property allDay

allDay?: boolean;

property event

event: CalendarEvent<MetaType>;

property newEnd

newEnd?: Date;

property newStart

newStart: Date;

property type

type: CalendarEventTimesChangedEventType;

interface CalendarModuleConfig

interface CalendarModuleConfig {}

a11y?: Provider;

property dateFormatter

dateFormatter?: Provider;

property eventTitleFormatter

eventTitleFormatter?: Provider;

property utils

utils?: Provider;

interface CalendarMonthViewBeforeRenderEvent

interface CalendarMonthViewBeforeRenderEvent {}

property body

body: MonthViewDay[];

header: WeekDay[];

property period

period: ViewPeriod;

interface CalendarMonthViewEventTimesChangedEvent

interface CalendarMonthViewEventTimesChangedEvent<
    EventMetaType = any,
    DayMetaType = any
> extends CalendarEventTimesChangedEvent<EventMetaType> {}

property day

day: MonthViewDay<DayMetaType>;

interface CalendarWeekViewBeforeRenderEvent

interface CalendarWeekViewBeforeRenderEvent extends WeekView {}

header: WeekDay[];

interface DateFormatterParams

interface DateFormatterParams {}

The parameter type passed to the date formatter methods.

property date

date: Date;

The date to format.

property daysInWeek

daysInWeek?: number;

The number of days in a week. Can be used to create a shorter or longer week view. The first day of the week will always be the viewDate

property excludeDays

excludeDays?: number[];

An array of day indexes (0 = sunday, 1 = monday etc) that will be hidden on the view

property locale

locale?: string;

The users preferred locale.

property weekStartsOn

weekStartsOn?: number;

The start day number of the week

Enums

enum CalendarEventTimesChangedEventType

enum CalendarEventTimesChangedEventType {
    Drag = 'drag',
    Drop = 'drop',
    Resize = 'resize',
}

member Drag

Drag = 'drag'

member Drop

Drop = 'drop'

member Resize

Resize = 'resize'

enum CalendarView

enum CalendarView {
    Month = 'month',
    Week = 'week',
    Day = 'day',
}

member Day

Day = 'day'

member Month

Month = 'month'

member Week

Week = 'week'

Type Aliases

type CalendarDayViewBeforeRenderEvent

type CalendarDayViewBeforeRenderEvent = CalendarWeekViewBeforeRenderEvent;

Package Files (40)

Dependencies (6)

Dev Dependencies (0)

No dev dependencies.

Peer Dependencies (1)

@angular/core

Badge

To add a badge like this oneto your package's README, use the codes available below.

You may also use Shields.io to create a custom badge linking to https://www.jsdocs.io/package/angular-calendar.

Markdown

[![jsDocs.io](https://img.shields.io/badge/jsDocs.io-reference-blue)](https://www.jsdocs.io/package/angular-calendar)

HTML

<a href="https://www.jsdocs.io/package/angular-calendar"><img src="https://img.shields.io/badge/jsDocs.io-reference-blue" alt="jsDocs.io"></a>

Updated 9 months ago.
Package analyzed in 9855 ms.
Missing or incorrect documentation? Open an issue for this package.

angular-calendar

Install

Overview

Index

Variables

Functions

Classes

Interfaces

Enums

Type Aliases

Variables

variable collapseAnimation

variable MOMENT

Functions

function getWeekViewPeriod

Classes

class CalendarA11y

constructor

property i18nPlural

property ɵfac

property ɵprov

method actionButtonLabel

Returns

method allDayEventDescription

method eventDescription

method hideDayHourSegment

Returns

method hideEventTitle

Returns

method hideMonthCellEvents

Returns

method hideWeekHourSegment

Returns

method monthCell

method monthCellTabIndex

Returns

method openDayEventsAlert

method openDayEventsLandmark

class CalendarAngularDateFormatter

constructor

property dateAdapter

property ɵfac

property ɵprov

method dayViewHour

method dayViewTitle

method monthViewColumnHeader

method monthViewDayNumber

method monthViewTitle

method weekViewColumnHeader

method weekViewColumnSubHeader

method weekViewHour

method weekViewTitle

class CalendarCommonModule

property ɵfac

property ɵinj

property ɵmod

method forRoot

class CalendarDateFormatter

property ɵfac

property ɵprov

class CalendarDayModule

property ɵfac

property ɵinj

property ɵmod

class CalendarDayViewComponent

property allDayEventsLabelTemplate

property beforeViewRender

property currentTimeMarkerTemplate

property dayEndHour

property dayEndMinute

property dayStartHour

property dayStartMinute

property eventActionsTemplate

property eventClicked

property events

property eventSnapSize

property eventTemplate

property eventTimesChanged

property eventTitleTemplate

property hourDuration