介绍 & lt; view 类=皊ign-wrapper"比;
,,,& lt; view 类=癱alendar"比;
,,,,,& lt; view 类=癿onth"比;
,,,,,,,& lt; view 类=癷tem",天气:为=皗{,week }}“比;
,,,,,,,,,,,{{,item }}
,,,,,,,& lt;/view>
,,,,,,,& lt; view 类=癷tem {{, item.type !=, & # 39;咕咕叫# 39;,?,& # 39;其他# 39;,:,& # 39;& # 39;,}}“,
,,,,,,,天气:为=皗{,dateData }}“比;
,,,,,,,,,,,{{,item.day }}
,,,,,,,& lt;/view>
,,,,,& lt;/view>
,,,& lt;/view>
& lt;才能/view> .calendar {
,,,margin-top: 10%;} .month {
,,,,,显示:,flex;
,,,,,flex-flow:, row 包装;
,,,,,,字体大小:1.1雷姆;,,}.item {
,,,,,宽度:,14.28%;
,,,,,text-align:,中心;
,,,,,行高:,3眼动;}.othe {
,,,颜色:灰色} //,/sing_in/页面sing_in.jsPage ({
,,数据:{
,,,dateData:, [],
,,,isSignin:,假的,
,,,:,(& # 39;日& # 39;& # 39;一& # 39;,& # 39;二& # 39;,& # 39;三& # 39;,& # 39;四& # 39;,& # 39;五& # 39;,& # 39;六& # 39;],
,,},
onLoad才能:function (选项),{
,,,,,this.initCurrMonthData ()
,,},
,/* *
*,才能year string 年,,如:2020,
*,才能month string 月,如:5
*,才能return array 所有天数,如:(1、2、3…,31)
,* */monthday才能(年、月){,
,,,,let days_count =, new 日期(年、月,0).getDate(),//月总天数,如:31
,,,,let days =,[];,//存放月的天数
,,,,,(let 小姐:=,1;,小姐:& lt;=, days_count;,我+ +)
,,,,days.push(我)
,,,,return 天;
,,},//才能初始化当月数据
initCurrMonthData才能(){
,,,,let currDate =, new 日期();,//当前日期
,,,,let currMonthDays =,, this.monthDays (currDate.getFullYear (), currDate.getMonth(), +, - 1),//当月,+ 1是因为月从0开始,,只有划分的
,,,,let lastMonthDays =, this.monthDays (currDate.getFullYear (), currDate.getMonth(),),//上个月
,,,,let currFirstWeek =, new 日期(currDate.getFullYear (), currDate.getMonth(),背后,1,1).getDay(), +, 1,,,,//这个月的1号是星期几,,1是因从0开始,
,,,,//月最后一天是星期几
,,,,let dateData =, [];
,,,,dateData =, currMonthDays.map (val =祝辞,this.formatDay (val)),//当月的数据
,,,,,(let 小姐:=,0;,小姐:& lt;, currFirstWeek;,我+ +),,//上月要显示的
,,,,dateData.unshift (,
,,,,,,this.formatDay (, lastMonthDays.pop() & # 39;这# 39;)
,,,,);
,,,let nextLenth =, 42,安康;dateData.length;,,//, 42是因为,6,*,7格式
,,,(var 小姐:=,1;,小姐:& lt;=, nextLenth;,我+ +),//下个月需要显示的日期
,,,dateData.push (
,,,,,,,this.formatDay(,我& # 39;第二,)
,,,);
,,,this.setData ({
,,,,,dateData :, dateData ,,,})
,,},
,,formatDay(天,type =, & # 39;咕咕叫# 39;){,//日期数据的格式化
,,,return {:天,类型:类型};
,,},
null
null
null
这篇文章主要介绍微信小程序如何实现签到的日历功能,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!
前言
因为要做签到,所以要写了个日历。
只有基础的日历,签到需要自行实现。
效果图
