##### employee.component.ts

import { ActivatedRoute, Router } from '@angular/router';
import { forkJoin, of } from 'rxjs';
import { BankHoliday } from '../../models/bank-holiday.model';
import { Vacations, VacationStatus } from '../../models/vacations.model';
import { BankHolidaysService } from '../../services/bank-holidays.service';
import { VacationsService } from '../../services/vacations.service';
import { OnInit, Component } from '@angular/core';
import { catchError } from 'rxjs/operators';

@Component({
  selector: 'vm-employee',
  templateUrl: './employee.component.html',
  styleUrls: ['./employee.component.styl'],
})
export class EmployeeComponent implements OnInit {
  public bankHolidays: BankHoliday[];
  public username: string;
  public year: number;
  public vacations: Vacations;

  public shouldDisableNextYear: boolean;
  public shouldDisablePreviousYear: boolean;

  constructor(
    private readonly router: Router,
    private readonly route: ActivatedRoute,
    private readonly bankHolidaysService: BankHolidaysService,
    private vacationsService: VacationsService,
  ) {}

  public ngOnInit(): void {
    this.route.params.subscribe((params) => {
      this.year = +params.year;
      this.username = params.username;
      this.vacations = new Vacations();
      // TODO: handle pre-data fetch with angular route resolvers
      //this.fetchData();
      //this.bankHolidays = this.route.data['bank-holiday'];
    });
  }

  public fetchData(): void {
    const getPreviousYearBankHolidays = this.bankHolidaysService
      .getBankHolidays(this.year - 1)
      .pipe(catchError(() => of([])));
    const getBankHolidays = this.bankHolidaysService
      .getBankHolidays(this.year)
      .pipe(catchError(() => of([])));
    const getNextYearBankHolidays = this.bankHolidaysService
      .getBankHolidays(this.year + 1)
      .pipe(catchError(() => of([])));
    const getVacations = this.vacationsService
      .get(this.year, this.username)
      .pipe(catchError(() => of(new Vacations())));
    forkJoin(
      getPreviousYearBankHolidays,
      getBankHolidays,
      getNextYearBankHolidays,
      getVacations,
    ).subscribe(
      ([
        previousYearBankHolidays,
        bankHolidays,
        nextYearBankHolidays,
        vacations,
      ]) => {
        this.bankHolidays = bankHolidays;
        this.vacations = vacations;
        this.shouldDisablePreviousYear = previousYearBankHolidays.length === 0;
        this.shouldDisableNextYear = nextYearBankHolidays.length === 0;
      },
    );
  }

  public saveVacations(): void {
    this.vacations.username = this.username;
    this.vacationsService.save(this.year, this.vacations).subscribe(
      (vacations) => {
        alert('Vacations saved');
        this.vacations = vacations;
      },
      (error) => {
        alert(error.message);
      },
    );
  }

  public submitVacations(): void {
    this.vacations.username = this.username;
    this.vacationsService
      .submit(this.year, this.username, this.vacations)
      .subscribe(
        (vacations) => {
          alert('Vacations submitted');
          this.vacations = vacations;
        },
        (error) => {
          alert(error.message);
        },
      );
  }

  public shouldShowSubmitButton(): boolean {
    return (
      this.vacations.dates.length &&
      !this.vacations.dates.some((date) => date.status !== VacationStatus.SAVED)
    );
  }

  public shouldShowSaveButton(): boolean {
    return (
      this.vacations.dates.length &&
      this.vacations.dates.some((date) => date.status === undefined)
    );
  }

  public handleYearChangeClick(number: 1 | -1): void {
    const navigateToYear = this.year + number;
    this.router.navigate(['/employee', navigateToYear, this.username]);
  }
}



########################################
########################################

import {
  Component,
  Input,
  OnChanges,
  OnInit,
  QueryList,
  ViewChildren,
} from '@angular/core';
import {
  MatCalendar,
  MatCalendarCellCssClasses,
} from '@angular/material/datepicker';
import * as moment from 'moment';
import { Class, Moment } from '../../../../typings/globals/app';
import { BankHoliday } from '../../models/bank-holiday.model';
import { Vacations } from '../../models/vacations.model';
import { CalendarHeaderComponent } from './calendar-header/calendar-header.component';
import { CalendarService } from './calendar.service';
@Component({
  selector: 'vm-calendar',
  templateUrl: './calendar.component.html',
  styleUrls: ['./calendar.component.styl'],
})
export class CalendarComponent implements OnInit, OnChanges {
  public get CalendarHeaderComponent(): Class {
    return CalendarHeaderComponent;
  }
  @Input()
  public year: number;
  @Input()
  public bankHolidays: BankHoliday[];
  @Input()
  public vacations: Vacations;
  @Input()
  public readonly: boolean;

  public calendarDates: Array<{
    startAt: Moment;
    selected: Moment;
  }>;

  @ViewChildren(MatCalendar)
  private calendars: QueryList<MatCalendar<Moment>>;

  constructor(private calendarService: CalendarService) {
    this.readonly = false;
    this.bankHolidays = [];
    this.vacations = new Vacations();
  }

  public ngOnChanges(): void {
    if (this.calendars) {
      this.calendarDates = this.getCalendarDates();
      this.updateCalendars();
    }
  }

  public ngOnInit(): void {
    this.calendarDates = this.getCalendarDates();
  }

  public ngAfterViewInit(): void {
    const els = document.querySelectorAll('.mat-calendar-body-cell');
    els.forEach((el) =>
      el.setAttribute('title', el.getAttribute('aria-label')),
    );
  }

  public onSelect(
    date: Moment,
    calendarDate: {
      startAt: Moment;
      selected: Moment;
    },
  ): void {
    if (
      this.calendarService.isWeekend(date) ||
      this.calendarService.isBankHoliday(this.bankHolidays, date)
    ) {
      return;
    }
    this.calendarService.toggleVacationDate(this.vacations, date);

    // Prevent the default mate-calendar date selection
    calendarDate.selected = undefined;
    this.updateCalendars();
  }

  // tslint:disable:cyclomatic-complexity
  public dateClass(): (date: Moment) => MatCalendarCellCssClasses {
    return (date: Moment): MatCalendarCellCssClasses => {
      const cssClasses = [];
      const shouldHighlightBackHolidays = this.calendarService.isBankHoliday(
        this.bankHolidays,
        date,
      );
      const isSaturday = this.calendarService.isSaturday(date);
      const isSunday = this.calendarService.isSunday(date);

      const isVacation = this.calendarService.isVacation(this.vacations, date);

      if (isVacation) {
        cssClasses.push('vacation');
        const statusClass = (
          this.vacations.getStatus(date) || ''
        ).toLocaleLowerCase();
        cssClasses.push(statusClass);
      }
      if (shouldHighlightBackHolidays) {
        cssClasses.push('bank-holiday');
      }
      if (isSaturday) {
        cssClasses.push('saturday');
      } else if (isSunday) {
        cssClasses.push('sunday');
      }
      return cssClasses.join(' ');
    };
  }

  /**
   * Render one calendar for each month,
   * each calendar needs to have it's own selected
   * date moment instance
   */
  public getCalendarDates(): Array<{
    startAt: Moment;
    selected: Moment;
  }> {
    return new Array(12).fill(0).map((curr, i) => {
      const startAt = moment(`${i + 1}/${this.year}`, 'MM/YYYY');
      const selected = undefined;
      return { startAt, selected };
    });
  }

  private updateCalendars(): void {
    this.calendars.forEach((calendar: MatCalendar<Moment>) => {
      calendar.updateTodaysDate();
    });
  }
}