详细思路可以看我的另一篇文章《前端：自制月历》，基本思路一致，只是元素布局略有差异
①获取起始位start=new Date(moment().format('yyyy-01-01')).getDay()
②获取总的格子数num=Math.ceil(365/7)*7,这里用365或者366计算结果都是一样的371
③获取数据,假设年份是YYYY
handleGetDate(){
let dateArr=\[\],time=moment().format('yyyy-01-01')
for(let i=0;i<num;i++){
if(i < start || time > moment( YYYY+ '-12').endOf('month').format('yyyy-MM-DD')){
dateArr.push(0)
}
else{ dateArr.push(time);time=moment(time).add(1,'days').format('yyyy-MM-DD') }
}
}
⑤视图绑定数据
<div class="calendar">
<header>
<span>1月</span><span>2月</span><span>3月</span><span>4月</span><span>5月</span><span>6月</span><span>7月</span><span>8月</span><span>9月</span><span>10月</span><span>11月</span><span>12月</span>
</header>
<section>
<span>日</span><span>一</span><span>二</span><span>三</span><span>四</span><span>五</span><span>六</span>
<span v-for="item,index in data.dateArr" :key="item+''+index">
<div v-if="item!= 0">{{ item }}</div>
</span>
</section>
</div>
⑥根据项目需求调整样式
section{
display:flex;flex-direction:column;flex-wrap:wrap;height:140px;
span{
height:20px;width:20px;
}
}
这是在某个项目中实现的效果：
