Angular Dom: - Добавить недостающие ячейки (td) в календарь угловых материалов

Question

Я пытаюсь добавить недостающие ячейки в календарь угловых материалов. Ниже мой html

<mat-calendar
    [dateClass]="dateClass()"
    [startAt]="month"
    [selected]="selectedDate"
    (selectedChange)="onSelect($event)">
  </mat-calendar>

Я использовал ViewChildern для доступа к его домену

@ViewChildren(MatCalendar, { read: ElementRef }) calendars: QueryList<ElementRef>;

Мне удалось добавить пустую дополнительную строку в конец календаря угловых материалов

 this.calendars.forEach(calendarEl => {
          const tbody: HTMLElement = calendarEl.nativeElement.querySelector('tbody');

   //ToDO:-- identify last row, count number of cells in last row,if its less than 7  add missing cells

//Added extra row to the bottom

const tr = (document.createElement('tr') as HTMLTableRowElement);
          tr.className = 'date-class';
          for (let i = 0; i < 7; i++) {
            tr.appendChild(document.createElement('td'));
          }
          tbody.appendChild(tr);
        });

Вот изображение календаря, которое у меня есть, без добавления недостающих ячеек (td). Необходимо добавить еще 4 ячейки

Answer 1

Можем ли мы сделать что-то вроде получения последней строки и добавить к ней строку добавления <td>, чтобы общее число <td> детей стало 7.

let lastRow = calendarEl.nativeElement.querySelector('tbody tr:last-child');
let  vaccantColCount = 7 - lastRow.querySelectorAll('td').length;
console.log(vaccantColCount);
while(vaccantColCount > 0) {
    lastRow.appendChild(document.createElement('td'));
    vaccantColCount--;
}