前端：自制月历

总体思路：利用vue数据驱动视图的特性，月历中的每个格子需要一个数据与之对应，月历每排有七个，所以我把总的格子数设置成了7的倍数，在月历1号之前和最后一天之后用没有实际意义的数据0来占位

①获取1号的位置：start=new Date(moment().format('yyyy-MM-01')).getDay()

②获取最后一天的位置：end=moment().daysInMonth()

③获取总的格子数：num=Math.ceil((start+end)/7)*7

④获取数据

handleGetDate(){

        let dateArr=[]

        for(let i=0;i<num;i++){

                if(i<start||i>=start+end){ dateArr.push(i) }

                else{ dateArr.push(i-start+1) } 

        }

}

⑤视图绑定数据

<div class="calendar">
    <header>
       <span>日</span><span>一</span><span>二</span><span>三</span><span>四</span><span>五</span><span>六</span>
    </header>
    <section>
        <div v-for="item,index in data.dateArr" :key="item+''+index">
          <div v-if="item!= 0">{{ item }}</div>
        </div>
    </section>
</div>

⑥根据项目需求调整样式

月历中的小格子可以直接使用width:14.2%,元素并行inline-block会有多余的空白，使用float更佳；父元素添加display:flex;flex-wrap:wrap;应该也可以，没试过。

这是在某个项目中实现的效果。