柳市做网站,团购小程序,公司广告推广,拓者设计吧课程详细思路可以看我的另一篇文章《前端#xff1a;自制月历》#xff0c;基本思路一致#xff0c;只是元素布局略有差异
①获取起始位startnew Date(moment().format(yyyy-01-01)).getDay()
②获取总的格子数numMath.ceil(365/7)*7,这里用365或者366计算结果都是一样的371
…详细思路可以看我的另一篇文章《前端自制月历》基本思路一致只是元素布局略有差异
①获取起始位startnew Date(moment().format(yyyy-01-01)).getDay()
②获取总的格子数numMath.ceil(365/7)*7,这里用365或者366计算结果都是一样的371
③获取数据,假设年份是YYYY
handleGetDate(){ let dateArr[],timemoment().format(yyyy-01-01) for(let i0;inum;i){ if(i start || time moment( YYYY -12).endOf(month).format(yyyy-MM-DD)){ dateArr.push(0) } else{ dateArr.push(time);timemoment(time).add(1,days).format(yyyy-MM-DD) } }
}
⑤视图绑定数据
div classcalendar header span1月/spanspan2月/spanspan3月/spanspan4月/spanspan5月/spanspan6月/spanspan7月/spanspan8月/spanspan9月/spanspan10月/spanspan11月/spanspan12月/span /header section span日/spanspan一/spanspan二/spanspan三/spanspan四/spanspan五/spanspan六/span span v-foritem,index in data.dateArr :keyitemindex div v-ifitem! 0{{ item }}/div /span /section /div
⑥根据项目需求调整样式
section{ display:flex;flex-direction:column;flex-wrap:wrap;height:140px; span{ height:20px;width:20px; }
}
这是在某个项目中实现的效果
