// (undocumented)

readonly _changeDetectorRef: ChangeDetectorRef;

comparisonEnd: D | null;

comparisonStart: D | null;

// (undocumented)

_dateAdapter: DateAdapter<D, any>;

protected _dragEnded(event: MatCalendarUserEvent<D | null>): void;

readonly dragStarted: EventEmitter<MatCalendarUserEvent<D>>;

endDateAccessibleName: string | null;

_focusActiveCell(movePreview?: boolean): void;

_focusActiveCellAfterViewChecked(): void;

_handleCalendarBodyKeydown(event: KeyboardEvent): void;

_handleCalendarBodyKeyup(event: KeyboardEvent): void;

_init(): void;

_matCalendarBody: MatCalendarBody;

get maxDate(): D | null;

set maxDate(value: D | null);

get minDate(): D | null;

set minDate(value: D | null);

// (undocumented)

ngAfterContentInit(): void;

// (undocumented)

ngOnChanges(changes: SimpleChanges): void;

// (undocumented)

ngOnDestroy(): void;

_previewChanged({ event, value: cell }: MatCalendarUserEvent<MatCalendarCell<D> | null>): void;

get selected(): DateRange<D> | D | null;

set selected(value: DateRange<D> | D | null);

readonly selectedChange: EventEmitter<D | null>;

startDateAccessibleName: string | null;

_updateActiveDate(event: MatCalendarUserEvent<number>): void;

readonly _userSelection: EventEmitter<MatCalendarUserEvent<D | null>>;

long: string;

narrow: string;

id: number;

// (undocumented)

static ɵcmp: i0.ɵɵComponentDeclaration<MatMonthView<any>, "mat-month-view", ["matMonthView"], { "activeDate": { "alias": "activeDate"; "required": false; }; "selected": { "alias": "selected"; "required": false; }; "minDate": { "alias": "minDate"; "required": false; }; "maxDate": { "alias": "maxDate"; "required": false; }; "dateFilter": { "alias": "dateFilter"; "required": false; }; "dateClass": { "alias": "dateClass"; "required": false; }; "comparisonStart": { "alias": "comparisonStart"; "required": false; }; "comparisonEnd": { "alias": "comparisonEnd"; "required": false; }; "startDateAccessibleName": { "alias": "startDateAccessibleName"; "required": false; }; "endDateAccessibleName": { "alias": "endDateAccessibleName"; "required": false; }; "activeDrag": { "alias": "activeDrag"; "required": false; }; }, { "selectedChange": "selectedChange"; "_userSelection": "_userSelection"; "dragStarted": "dragStarted"; "dragEnded": "dragEnded"; "activeDateChange": "activeDateChange"; }, never, never, true, never>;

// (undocumented)

get selected(): DateRange<D> | D | null;

set selected(value: DateRange<D> | D | null);

readonly selectedChange: EventEmitter<D>;

_updateActiveDate(event: MatCalendarUserEvent<number>): void;

readonly yearSelected: EventEmitter<D>;

_yearSelected(event: MatCalendarUserEvent<number>): void;

// (undocumented)

set maxDate(value: D | null);

get minDate(): D | null;

set minDate(value: D | null);

readonly monthSelected: EventEmitter<D>;

_monthSelected(event: MatCalendarUserEvent<number>): void;

// (undocumented)

get selected(): DateRange<D> | D | null;

set selected(value: DateRange<D> | D | null);

readonly selectedChange: EventEmitter<D>;

_updateActiveDate(event: MatCalendarUserEvent<number>): void;

// (undocumented)

static ɵcmp: i0.ɵɵComponentDeclaration<MatYearView<any>, "mat-year-view", ["matYearView"], { "activeDate": { "alias": "activeDate"; "required": false; }; "selected": { "alias": "selected"; "required": false; }; "minDate": { "alias": "minDate"; "required": false; }; "maxDate": { "alias": "maxDate"; "required": false; }; "dateFilter": { "alias": "dateFilter"; "required": false; }; "dateClass": { "alias": "dateClass"; "required": false; }; }, { "selectedChange": "selectedChange"; "monthSelected": "monthSelected"; "activeDateChange": "activeDateChange"; }, never, never, true, never>;

// (undocumented)

<table class="mat-calendar-table" role="grid">

<thead class="mat-calendar-table-header">

<tr>

<th scope="col">

<span class="cdk-visually-hidden">{{day.long}}</span>

<span aria-hidden="true">{{day.narrow}}</span>

<tr aria-hidden="true"><th class="mat-calendar-table-header-divider" colspan="7"></th></tr>

</thead>

<tbody mat-calendar-body

[labelMinRequiredCells]="3"

[activeCell]="_dateAdapter.getDate(activeDate) - 1"

[startDateAccessibleName]="startDateAccessibleName"

SimpleChanges,

OnChanges,

inject,

} from '@angular/core';

import {DateAdapter, MAT_DATE_FORMATS, MatDateFormats} from '../core';

import {Directionality} from '@angular/cdk/bidi';

@ViewChild(MatCalendarBody) _matCalendarBody: MatCalendarBody;

/** The label for this month (e.g. "January 2017"). */

/** Grid of calendar cells representing the dates of the month. */

/** The number of blank cells in the first row before the 1st of the month. */

/** Start value of the currently-shown date range. */

/** End value of the currently-shown date range. */

/** Start value of the currently-shown comparison date range. */

/** End value of the currently-shown comparison date range. */

/** Start of the preview range. */

/** End of the preview range. */

/** Whether the user is currently selecting a range of dates. */

/** The date of the month that today falls on. Null if today is in another month. */

/** The names of the weekdays. */

constructor(...args: unknown[]);

return;

case ESCAPE:

// Abort the current range selection if the user presses escape mid-selection.

this._clearPreview();

// If a drag is in progress, cancel the drag without changing the

// current selection.

/** Initializes this month view. */

_init() {

this._setRanges(this.selected);

let firstOfMonth = this._dateAdapter.createDate(

this._dateAdapter.getYear(this.activeDate),

this._dateAdapter.getMonth(this.activeDate),

1,

);

(DAYS_PER_WEEK +

this._dateAdapter.getDayOfWeek(firstOfMonth) -

this._dateAdapter.getFirstDayOfWeek()) %

this._initWeekdays();

this._createWeekCells();

this.selected as DateRange<D>,

event,

);

if (this.activeDrag && value) {

const dragRange = this._rangeStrategy.createDrag?.(

);

if (dragRange) {

}

}

}

const longWeekdays = this._dateAdapter.getDayOfWeekNames('long');

// Rotate the labels for days of the week based on the configured first day of the week.

return {long, narrow: narrowWeekdays[i], id: uniqueIdCounter++};

});

}

/** Creates MatCalendarCells for the dates in this month. */

private _createWeekCells() {

const daysInMonth = this._dateAdapter.getNumDaysInMonth(this.activeDate);

const dateNames = this._dateAdapter.getDateNames();

if (cell == DAYS_PER_WEEK) {

cell = 0;

}

const date = this._dateAdapter.createDate(

const ariaLabel = this._dateAdapter.format(date, this._dateFormats.display.dateA11yLabel);

const cellClasses = this.dateClass ? this.dateClass(date, 'month') : undefined;

new MatCalendarCell<D>(

i + 1,

dateNames[i],

),

);

}

}

/** Date filter for the month */

/** Sets the current range based on a model value. */

private _setRanges(selectedValue: DateRange<D> | D | null) {

if (selectedValue instanceof DateRange) {

} else {

}

}

/** Gets whether a date can be selected in the month view. */

/** Clears out preview state. */

private _clearPreview() {

}

<tr><th class="mat-calendar-table-header-divider" colspan="4"></th></tr>

</thead>

<tbody mat-calendar-body

[numCols]="4"

[cellAspectRatio]="4 / 7"

[activeCell]="_getActiveCell()"