角材质日历，添加了一个空的额外行，需要添加一些额外的单元格（td）

Question

我在日历的底部添加了额外的一行，以使其看起来像线框。现在，我需要为没有所有7个单元格的行添加cell（td）（例如，第31个日期位于第3个单元格上，之后没有看起来奇怪的单元格，请查看所附图片以了解单元格的状态丢失。我只需要添加空白单元格）

这是我以前使用额外行的代码。这是查找我的示例代码https://stackblitz.com/edit/am-all-imports-gx4xav

的stackblitz链接

 ngAfterViewInit() {
    this.calendars.forEach(calendarEl => {
      const tbody: HTMLElement = calendarEl.nativeElement.querySelector('tbody');
      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);
    })


  }

Answer 1

您可以这样做

const today = new Date();
let currentMonth = today.getMonth();
let currentYear = today.getFullYear();
const monthNames = ["January", "February", "March", "April", "May", "June",
  "July", "August", "September", "October", "November", "December"
];


let array = [];
for (let i = 0; i < 6; i++) {
  currentMonth++;
  if (currentMonth > 11) {
    currentMonth %= 12;
    currentYear += 1;
  }
  array.push({
    key: `${monthNames[currentMonth]} ${currentYear}`
  });
}
console.log(array);

Answer 2

像这样？ https://jsfiddle.net/flowtron/d3pnaL7f/5/

您的代码的核心行可能是：

monthNames[ monthIndex % 12 ] +" "+ year

Answer 3

 const options = [];
        const monthNames = ["January", "February", "March", "April", "May", "June",
      "July", "August", "September", "October", "November", "December"];

        function retKey(month, year){
            let key = month + " " + year;
            return {key};
        }

        let today = new Date();

        for(let i=1; i<=6; i++){
            let tmp = new Date();
            let month, year;

            tmp.setMonth(today.getMonth()+i);

            month = monthNames[tmp.getMonth()].substring(0,3);
            year = tmp.getFullYear();

            options.push(retKey(month,year));

        }
        console.log(options);

输出：

(6) [{…}, {…}, {…}, {…}, {…}, {…}]
0: {key: "May 2020"}
1: {key: "Jun 2020"}
2: {key: "Jul 2020"}
3: {key: "Aug 2020"}
4: {key: "Sep 2020"}
5: {key: "Oct 2020"}