@angular/material/datepicker#MatCalendarCell TypeScript Examples

The following examples show how to use @angular/material/datepicker#MatCalendarCell. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: month-view.ts    From angular-material-components with MIT License 6 votes vote down vote up 
/** Creates MatCalendarCells for the dates in this month. */
  private _createWeekCells() {
    const daysInMonth = this._dateAdapter.getNumDaysInMonth(this.activeDate);
    const dateNames = this._dateAdapter.getDateNames();
    this._weeks = [[]];
    for (let i = 0, cell = this._firstWeekOffset; i < daysInMonth; i++, cell++) {
      if (cell == DAYS_PER_WEEK) {
        this._weeks.push([]);
        cell = 0;
      }
      const date = this._dateAdapter.createDate(
        this._dateAdapter.getYear(this.activeDate),
        this._dateAdapter.getMonth(this.activeDate), i + 1);
      const enabled = this._shouldEnableDate(date);
      const ariaLabel = this._dateAdapter.format(date, this._dateFormats.display.dateA11yLabel);
      const cellClasses = this.dateClass ? this.dateClass(date) : undefined;

      this._weeks[this._weeks.length - 1]
        .push(new MatCalendarCell(i + 1, dateNames[i], ariaLabel, enabled, cellClasses));
    }
  }
Example #2
Source File: month-view.ts    From ngx-mat-datetime-picker with MIT License 6 votes vote down vote up 
/** Creates MatCalendarCells for the dates in this month. */
  private _createWeekCells() {
    const daysInMonth = this._dateAdapter.getNumDaysInMonth(this.activeDate);
    const dateNames = this._dateAdapter.getDateNames();
    this._weeks = [[]];
    for (let i = 0, cell = this._firstWeekOffset; i < daysInMonth; i++ , cell++) {
      if (cell == DAYS_PER_WEEK) {
        this._weeks.push([]);
        cell = 0;
      }
      const date = this._dateAdapter.createDate(
        this._dateAdapter.getYear(this.activeDate),
        this._dateAdapter.getMonth(this.activeDate), i + 1);
      const enabled = this._shouldEnableDate(date);
      const ariaLabel = this._dateAdapter.format(date, this._dateFormats.display.dateA11yLabel);
      const cellClasses = this.dateClass ? this.dateClass(date) : undefined;

      this._weeks[this._weeks.length - 1]
        .push(new MatCalendarCell(i + 1, dateNames[i], ariaLabel, enabled, cellClasses));
    }
  }
Example #3
Source File: month-view.ts    From angular-material-components with MIT License 5 votes vote down vote up 
/** Grid of calendar cells representing the dates of the month. */
  _weeks: MatCalendarCell[][];
Example #4
Source File: multi-year-view.ts    From angular-material-components with MIT License 5 votes vote down vote up 
/** Creates an MatCalendarCell for the given year. */
  private _createCellForYear(year: number) {
    let yearName = this._dateAdapter.getYearName(this._dateAdapter.createDate(year, 0, 1));
    return new MatCalendarCell(year, yearName, yearName, this._shouldEnableYear(year));
  }
Example #5
Source File: multi-year-view.ts    From angular-material-components with MIT License 5 votes vote down vote up 
/** Grid of calendar cells representing the currently displayed years. */
  _years: MatCalendarCell[][];
Example #6
Source File: year-view.ts    From angular-material-components with MIT License 5 votes vote down vote up 
/** Creates an MatCalendarCell for the given month. */
  private _createCellForMonth(month: number, monthName: string) {
    let ariaLabel = this._dateAdapter.format(
      this._dateAdapter.createDate(this._dateAdapter.getYear(this.activeDate), month, 1),
      this._dateFormats.display.monthYearA11yLabel);
    return new MatCalendarCell(
      month, monthName.toLocaleUpperCase(), ariaLabel, this._shouldEnableMonth(month));
  }
Example #7
Source File: year-view.ts    From angular-material-components with MIT License 5 votes vote down vote up 
/** Grid of calendar cells representing the months of the year. */
  _months: MatCalendarCell[][];
Example #8
Source File: month-view.ts    From ngx-mat-datetime-picker with MIT License 5 votes vote down vote up 
/** Grid of calendar cells representing the dates of the month. */
  _weeks: MatCalendarCell[][];
Example #9
Source File: year-view.ts    From ngx-mat-datetime-picker with MIT License 5 votes vote down vote up 
/** Creates an MatCalendarCell for the given month. */
  private _createCellForMonth(month: number, monthName: string) {
    let ariaLabel = this._dateAdapter.format(
      this._dateAdapter.createDate(this._dateAdapter.getYear(this.activeDate), month, 1),
      this._dateFormats.display.monthYearA11yLabel);
    return new MatCalendarCell(
      month, monthName.toLocaleUpperCase(), ariaLabel, this._shouldEnableMonth(month));
  }
Example #10
Source File: year-view.ts    From ngx-mat-datetime-picker with MIT License 5 votes vote down vote up 
/** Grid of calendar cells representing the months of the year. */
  _months: MatCalendarCell[][];