我正在尝试在角形材质日历中添加缺少的单元格。
下面是我的HTML
<mat-calendar
[dateClass]="dateClass()"
[startAt]="month"
[selected]="selectedDate"
(selectedChange)="onSelect($event)">
</mat-calendar>
我使用ViewChildern访问其dom
@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个单元格
最佳答案
我们是否可以做类似获取最后一行并将<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--;
}