title: Add holiday or custom data into angular material date picker
body: <p>I have date wise amount which based on user search in flight sectors and save into cache so I can get from cache amount  date wise when user open date picker I want to show price in date wise in open calendar but I didn't find any Api or function to inject the data into calendar when user open and assign to calendar.</p>
  <pre><code>&lt;mat-form-field class=&quot;example-full-width&quot; appearance=&quot;fill&quot;&gt;
    &lt;mat-label&gt;Choose a date&lt;/mat-label&gt;
    &lt;input matInput [matDatepicker]=&quot;picker&quot;&gt;
    &lt;mat-datepicker-toggle matSuffix [for]=&quot;picker&quot;&gt;&lt;/mat-datepicker-toggle&gt;
    &lt;mat-datepicker [dateClass]=&quot;dateClass&quot; #picker&gt;&lt;/mat-datepicker&gt;
  &lt;/mat-form-field&gt;
  </code></pre>
  <p>datepicker.ts</p>
  <pre><code>import {Component, ViewEncapsulation} from '@angular/core';
  import {MatCalendarCellClassFunction} from '@angular/material/datepicker';
  
  /** @title Datepicker with custom date classes */
  @Component({
    selector: 'datepicker-date-class-example',
    templateUrl: 'datepicker-date-class-example.html',
    styleUrls: ['datepicker-date-class-example.css'],
    encapsulation: ViewEncapsulation.None,
  })
  export class DatepickerDateClassExample {
    dateClass: MatCalendarCellClassFunction&lt;Date&gt; = (cellDate, view) =&gt; {
      // Only highligh dates inside the month view.
      if (view === 'month') {
        const date = cellDate.getDate();
  
        // Highlight the 1st and 20th day of each month.
        return (date === 1 || date === 20) ? 'example-custom-date-class' : '';
      }
  
      return '';
    }
  }
  </code></pre>
  <p>css.</p>
  <pre><code>.example-custom-date-class {
    background: orange;
    border-radius: 100%;
  }
  </code></pre>
  <p>ref image
  <a href="https://i.stack.imgur.com/Zaps3.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Zaps3.jpg" alt="enter image description here" /></a></p>