usage of disableDates option

Example below disable dates defined in the getDisabledStyles() method. It is also possible to disable dates by a default style. More information is here. Check the disableDates option.

<input angular-mydatepicker [(ngModel)]="model" [options]="myDatePickerOptions" 
    #dp="angular-mydatepicker">

import {IAngularMyDpOptions, IMyDisabledDates, IMyDate} from 'angular-mydatepicker';

export class MyApp {

    myDatePickerOptions: IAngularMyDpOptions = {
        stylesData: {
            selector: 'dp1',
            styles: this.getDisabledStyles()
        },
        disableDates: []
        // other options here
    }

    constructor() {}


    // calling this method disable dates
    disabledDates(): void {
      let copy: IAngularMyDpOptions = this.getCopyOfOptions();
      copy.disableDates = this.getDisabledDates();
      this.myDatePickerOptions = copy;
    }

    // CSS styles
    getDisabledStyles(): string {
      return `
      .dp1 .yogaDates {
          background: repeating-linear-gradient(-45deg, red 7px, #ccc 8px, 
                      transparent 7px, transparent 14px);
          font-weight: bold;
          color: green;
      }

      .dp1 .karateDates {
          background: repeating-linear-gradient(-45deg, blue 7px, #ccc 8px, 
                      transparent 7px, transparent 14px);
          font-weight: bold;
          color: green;
      }

      .dp1 .yogaAndKarateDates {
          background: #F08080;
          font-weight: bold;
          color: blue;
      }
    `;
  }

    // own style dates (10.6.2020 - 16.6.2020)
    getDisabledDates(): Array<IMyDisabledDates> {
      return [
            {dates: [
                      {year: 2020, month: 6, day: 10},
                      {year: 2020, month: 6, day: 11},
                      {year: 2020, month: 6, day: 15},
            ], styleClass: 'yogaDates'},
            {dates: [
                      {year: 2020, month: 6, day: 12},
                      {year: 2020, month: 6, day: 13},
                      {year: 2020, month: 6, day: 14},
            ], styleClass: 'karateDates'},
            {dates: [
                      {year: 2020, month: 6, day: 16}
            ], styleClass: 'yogaAndKarateDates'}
      ];
    }

    getCopyOfOptions(): IAngularMyDpOptions {
        return JSON.parse(JSON.stringify(this.myDatePickerOptions));
    }

}

Above options on calendar