本文实例为大家分享了微信小程序实现日历效果的具体代码，供大家参考，具体内容如下

效果预览：

页面结构部分：

view class=' box1 ' style=' width : { { SysW * 7 } } px ' view class=' DateBox ' { year } }-{ { month } }/view block wx : for=' { { WeekArr } } ' view style=' width : { { SysW } } px；height : { { SysW } } pxline-height : { { SysW } } px；'{ { item } }/view/block block wx : for=“{ { arr } }”view style=“{ { index==0？左边距： ' SysW * Marlet ' px: ' ' } }宽度： { { sysW } }像素宽度： { { sysW } }像素高度： { { SysW } }像素；class='{{ item==getDate？dateOn ' : ' ' } } ' { { item } }/view/block/view wxss部分：方框1 .dateBox {宽度： 100%；高度： 50px线高： 50px文本对齐：中心；边距-top : 20px；font-size : 40 rpx} .box1 { display: flex柔性包装：包装；margin: 0 auto}。框1视图{高度： 30px线高： 30px文本对齐：中心；font-size : 34 rpx}.日期{边框半径：50%；背景-颜色：热粉色；color: # fff}js部分：

//页面/索引/索引。js页面({/* * *页面的初始数据*/data: { arr: []，sysW: null，lastDay: null，firstDay: null，weekArr: ['日', '一', '二', '三', '四', '五','六]，year: null }，//获取日历相关参数数据时间：函数(){ var Date=new Date()；var年份=日期。getfull year()；var month=日期。getmonth()；var月份=日期。get month()1；//获取现今年份这个。数据。年份=年份；//获取现今月份this.data.month=月；//获取今日日期这个。数据。getdate=date。getdate()；//最后一天是几号var d=新日期（年、月、0);这个。数据。last day=d . get date()；//第一天星期几让第一天=新日期（年、月、1);这个。数据。第一天。getday()；}，onLoad:函数（选项){这个。data time()；//根据得到今月的最后一天日期遍历得到所有日期for(var I=1；我喜欢这个。数据。最后一天1；我){这个。数据。由…改编推(我)；} var RES=wx。getsysteminfosync()；这个。setdata({ SysW : RES . WindowHeight/12，//更具屏幕宽度变化自动设置宽度marLet: this.data.firstDay，arr: this.data.arr，year: this.data.year，getDate: this.data.getDate，month : this .数据。月})；}})以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。