该示例为纯手写代码,暂无插件,不多说直接上代码
我们的实现思路:
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>
相信大家通过以上思路,再结合自己的需求应该可以自己做出符合自己心目中的日历插件或者签到
写的挺好,能把代码或者样式贴出来吗
组件view的data-handle属性有什么作用
signRecord这个方法您好像没有贴,这个方法是干嘛的呢
好巧 前几天我就是用这个思路写出来的
可以哦!你是怎么实现的呢?用的插件吗?把你的代码分享一下舍!我们也好学习一下呢
代码分享,就不去具体实现了,好费时间哦