Add holiday or custom data into angular material date picker

Question

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.

<mat-form-field class="example-full-width" appearance="fill">
  <mat-label>Choose a date</mat-label>
  <input matInput [matDatepicker]="picker">
  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-datepicker [dateClass]="dateClass" #picker></mat-datepicker>
</mat-form-field>

datepicker.ts

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<Date> = (cellDate, view) => {
    // 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 '';
  }
}

css.

.example-custom-date-class {
  background: orange;
  border-radius: 100%;
}

ref image

Answer 1

Mannage a date-picker to make a "custom day" is a little nightmare. Really you can not make much with this. The only is "play" with the .css. So if you imagine a css like

.example-custom-date-class {
  width:40px;
  height:60px;
}
.example-custom-date-class:after {
  counter-increment: section; 
  content:attr(aria-label);
  position: absolute;
  left: 0;
  top: 34px;
  width: 40px;
  text-align:center;
  color: #000000;
  font-size: 14px;
  z-index: 1;
}

You can change the aria-label attribute to store the prices

Some like,e.g.

export class DatepickerDateClassExample {
  constructor(private renderer: Renderer2) {}
  dates = [
    { date: "2021-10-01", price: 100 },
    { date: "2021-10-02", price: 110 },
    { date: "2021-10-03", price: 120 },
    { date: "2021-10-14", price: 100 },
    { date: "2021-10-05", price: 110 },
    { date: "2021-10-06", price: 130 },
  ];
  dateClass = (d: Date) => {
    const dateSearch = this.dateToString(d);
    return this.dates.find(f => f.date == dateSearch)
      ? "example-custom-date-class"
      : undefined;
  };


  displayMonth() {
    let elements = document.querySelectorAll(".endDate");
    let x = elements[0].querySelectorAll(".mat-calendar-body-cell");
    x.forEach(y => {
      const dateSearch = this.dateToString(
        new Date(y.getAttribute("aria-label"))
      );
      const data = this.dates.find(f => f.date == dateSearch);
      if (data) {
        y.setAttribute("aria-label", ''+data.price);
      }
    });
  }
  streamOpened(event) {
    setTimeout(() => {
      let buttons = document.querySelectorAll("mat-calendar .mat-icon-button");

      buttons.forEach(btn =>
        this.renderer.listen(btn, "click", () => {
          setTimeout(() => {
            //debugger
            this.displayMonth();
          });
        })
      );
      this.displayMonth();
    });
  }
  dateToString(date: any) {
    return (
      date.getFullYear() +
      "-" +
      ("0" + (date.getMonth() + 1)).slice(-2) +
      "-" +
      ("0" + date.getDate()).slice(-2)
    );
  }

As this stackblitz but you can think in another approach or library

NOTE: Is a little change of this another SO