基于Moment.js的CSS Grid日历开发，如何实现35块无空白的指定配色日历并正确填充日期

核心调整思路 #

• 直接换掉你现在靠grid-column-start给1号定位置的写法：这种写法本质是只渲染当月实际天数的DOM，网格流里没被填上内容的位置会露成纯白色，完全达不到无空白的要求。
• 把网格结构固定死：日历容器直接设成grid-template-columns: repeat(7, 1fr)的5行布局，提前一次性生成35个带统一配色的单元格，从根上杜绝空白块出现的可能。
• 日期按顺序对齐就好：先算清楚当月1号是星期几，按照固定顺序把日期填进35个格子——1号前面空出来的位置直接填上月最后几天的日期，当月的天排完之后，剩下的位置用下个月开头的日期补满，保证35个格子全有内容，全走你定的配色规则，没有一个纯白空块。

具体落地步骤 #

1. 用Moment.js算两个关键值
   • 先取当月1号的星期值：const firstDayWeek = moment().startOf('month').day()，注意周日返回0的边界值，别让列偏移算错。
   • 换算成起始偏移量：按照从周一开始的列排布规则，把星期值转成当月1号在35个格子里的对应索引，比如周一对应索引0、周二对应索引1，周日对应索引6。
2. 预生成固定数量的单元格
   写个循环直接生成35个带统一基础样式的div，一次性全部插进日历网格容器，别边判断日期边零散建节点，更别单独给1号加列起始的行内样式。
3. 顺着顺序填日期
   从索引0的第一个格子开始排：先填前面偏移量对应的上月末尾日期，接着顺次排当月1号到当月最后一天，剩下的格子从下月1号开始顺次补，凑满35个格子就行。给相邻月补的日期加个低透明度的样式做区分也可以，但绝对不要留没有样式的白色空槽。

现有代码的问题修正 #

你现在写的这段逻辑：

let calendarDay = document.createElement('div')
    if (day === 1) {
        calendarDay.setAttribute('style', `grid-column-start:${firstDay}`)
        console.log(`firstDay = ${firstDay}`)
    }

有两个关键问题：

• 动态给1号设grid-column-start的写法，会让1号前面的网格位置自动留出没内容的空槽，这些空槽没设背景色就会显示成白色，和你无空白的需求完全冲突。
• 只创建当月实际天数的DOM（最多31个），离要求的35个固定单元格数差了好几个，自然会漏出空白。

内容的提问来源于stack exchange，提问作者khabibiullin