小程序之日历签到积分
[图片]
该示例为纯手写代码，暂无插件，不多说直接上代码
我们的实现思路：
JS部分
1、获取当前年月
const date = new Date();
cur_year = date.getFullYear();
cur_month = date.getMonth() + 1;
const weeks_ch = [‘日’, ‘一’, ‘二’, ‘三’, ‘四’, ‘五’, ‘六’];
this.setData({
cur_year,
cur_month,
weeks_ch,
})
2、获取当月共多少天
getThisMonthDays: function (year, month) {
return new Date(year, month, 0).getDate()
},
3、获取当月第一天星期几
getFirstDayOfWeek: function (year, month) {
return new Date(Date.UTC(year, month - 1, 1)).getDay();
},
4、计算当月1号前空了几个格子，把它填充在days数组的前面
calculateEmptyGrids: function (year, month) {
var that = this;
//计算每个月时要清零
that.setData({ days: [] });
const firstDayOfWeek = this.getFirstDayOfWeek(year, month);
if (firstDayOfWeek > 0) {
for (let i = 0; i < firstDayOfWeek; i++) {
var obj = {
date: null,
isSign: false
}
that.data.days.push(obj);
}
this.setData({
days: that.data.days
});
//清空
} else {
this.setData({
days: []
});
}
},
5、绘制当月天数占的格子，并把它放到days数组中
calculateDays: function (year, month, sign) {
var that = this;
var isSign;
const thisMonthDays = this.getThisMonthDays(year, month);
for (var i = 1; i <= thisMonthDays; i++) {
var obj = {
date: i,
isSign: ‘’
}
for (var j = 0; j < sign.length; j++) {
if (i == parseInt(sign[j].create_time.substr(8, 2))) {
obj.isSign = true;
break;
}
}
that.data.days.push(obj);
}
this.setData({
days: that.data.days
});
},
6、切换控制年月，上一个月，下一个月
handleCalendar: function (e) {
const handle = e.currentTarget.dataset.handle;
const cur_year = this.data.cur_year;
const cur_month = this.data.cur_month;
if (handle === ‘prev’) {
let newMonth = cur_month - 1;
let newYear = cur_year;
if (newMonth < 1) {
newYear = cur_year - 1;
newMonth = 12;
}
this.signRecord(newYear, newMonth);
this.setData({
cur_year: newYear,
cur_month: newMonth,
imgType: ‘cnext.png’
})
} else {
if (cur_month + 1 > month) {
this.setData({
imgType: ‘next.png’
})
} else {
let newMonth = cur_month + 1;
let newYear = cur_year;
if (newMonth > 12) {
newYear = cur_year + 1;
newMonth = 1;
}
this.signRecord(newYear, newMonth);
if (cur_month + 1 == month) {
this.setData({
cur_year: newYear,
cur_month: newMonth,
imgType: ‘next.png’
})
} else {
this.setData({
cur_year: newYear,
cur_month: newMonth,
imgType: ‘cnext.png’
})
}
}
}
},
wxml部分：
<view class=‘all’>
<view class=“bar”>
<!-- 上一个月 -->
<view class=“previous” bindtap=“handleCalendar” data-handle=“prev”>
<image src=‘https://www.***.com/weChatImg/pre.png’></image>
</view>
<!-- 显示年月 -->
<view class=“date”>{{cur_year || “–”}} / {{filter.fill(cur_month) || “–”}}</view>
<!-- 下一个月 -->
<view class=“next” bindtap=“handleCalendar” data-handle=“next”>
<image src=‘https://www.***.com/weChatImg/{{imgType}}’></image>
</view>
</view>
<view class=‘xxian’>
<image src=‘weChatImg/huan.png’></image>
<image src=‘weChatImg/huan.png’></image>
</view>
<!-- 显示星期 -->
<view class=“week”>
<view wx:for="{{weeks_ch}}" wx:key="{{index}}" data-idx="{{index}}">{{item}}</view>
</view>
<view class=‘days’>
<!-- 列 -->
<view class=“columns” wx:for="{{days.length/7}}" wx:for-index=“i” wx:key=“i”>
<view wx:for="{{days}}" wx:for-index=“j” wx:key=“j”>
<!-- 行 -->
<view class=“rows” wx:if="{{j/7 == i}}">
<view class=“rows” wx:for="{{7}}" wx:for-index=“k” wx:key=“k”>
<!-- 每个月份的空的单元格 -->
<view class=‘cell’ wx:if="{{days[j+k].date == null}}">
<text decode="{{true}}"> </text>
</view>
<!-- 每个月份的有数字的单元格 -->
<view class=‘cell’ wx:else>
<!-- 当前日期已签到 -->
<view wx:if="{{days[j+k].isSign == true}}" style=‘color:#acacac’ class=‘cell’>
{{days[j+k].date}}
<image src=‘https://www.***.com/weChatImg/sgin.png’></image>
</view>
<!-- 当前日期未签到 -->
<view wx:else>
<text>{{days[j+k].date}}</text>
</view>
</view>
</view>
</view>
</view>
</view>
</view>
</view>
相信大家通过以上思路，再结合自己的需求应该可以自己做出符合自己心目中的日历插件或者签到
