（本人前端小白，功能和代码的实现上都还有存在很多的问题，欢迎各位探讨指正）
前端小白最近根据需求编写了一个通过日历的形式来展示员工考勤打卡的功能，要求实现的功能是，可以在日历上查看近三个月的考勤信息，不能查看未来月份以及三个月份前的内容。同时在日历的上方显示用户这周没有上线的次数以及用户每天上线的时间。这里我们主要对其中日历功能的实现进行说明
上需求图：
1.首先先写好月份选择以及星期的内容
2.日期和星期相对应的功能实现。
因为实现的功能不仅仅是简单的日历，还要包括当天用户的打卡考勤信息，所以数据的获取是通过当前月份（2019-6）这样的格式请求，获取到的数据就是当前一个月的考勤信息的数组，这样问题就来了，如何让每个月份的第一天和相对应的日期位置对应起来，首先看一看后台返回的参数。可以看到返回的数据是包括当天的天数的。
这个问题那时候困扰了我很久，因为不同的月份第一天对应的是不同的，所以最后我想了一个最笨的办法，对于返回给我的这个月的数据，第一天对应的是周几，前面就补上多少个空格，这样循环到前端页面，每个月的第一天就会听到相应的星期下了。
```
if (firstDayWeek === "星期一") {
calendarList = obj
} else if (firstDayWeek === "星期二") {
calendarList = [""].concat(obj)
} else if (firstDayWeek === "星期三") {
calendarList = ["", ""].concat(obj)
} else if (firstDayWeek === "星期四") {
calendarList = ["", "", ""].concat(obj)
} else if (firstDayWeek === "星期五") {
calendarList = ["", "", "", ""].concat(obj)
} else if (firstDayWeek === "星期六") {
calendarList = ["", "", "", "", ""].concat(obj)
} else if (firstDayWeek === "星期日") {
calendarList = ["", "", "", "", "", ""].concat(obj)
}
```
这真的是用最蠢的办法来实现这个功能了，如果有更好的办法，希望大家能够分享交流
3.只能查看最近三个月的考勤也不能查看未来考勤的实现
刚开始想这个需求的时候以为很简单，想着点击减的按钮的时候，只要获取到当前的月份，然后再减去1就好了，再进行个判断，请求的月份如果小于当前的月份2以上，那就不允许用户点击按钮，但是在编写的过程中发现没那么简单，因为如果当前的月份是1月的话，那么减去一个月的话就应该变成上一年的12月，这样的话就无法用之前的方法进行判断了，所以为了实现这个功能，我也用了最蠢最暴力的办法
```
<view class="dateChoose">
<view class="changeMonth" bindtap="getAnotherMonth" data-changetype="last">
<image src="/img/last.png" class="lastIcon"></image>
</view>
<view class="thisMonth">
<text>{{thisMonth}}</text>
</view>
<view class="changeMonth" bindtap="getAnotherMonth" data-changetype="next">
<image src="/img/next.png" class="nextIcon"></image>
</view>
</view>
```
```
getAnotherMonth: function(event) {
var that = this;
//获取到点击的类别，点击的是上一月还是下一月
let changeType = event.currentTarget.dataset.changetype;
//获取现在正在查看的年月
let thisMonth = that.data.thisMonth;
//获取当前年份
let nowYear = date.getFullYear();
//获取当前月份
let nowMonth = date.getMonth() + 1;
let year = Number(thisMonth.split("-")[0]);
let month = Number(thisMonth.split("-")[1]);
//如果点击了上一个月的按钮
if (changeType === "last") {
//如果当前月是1月
if (nowMonth === 1) {
if (nowMonth - month <= -10) {
that.lastNextMonth(year, month, thisMonth)
}
//如果当前月是2月
} else if (nowMonth === 2) {
if (nowMonth - month === 1 || nowMonth - month === -10) {
that.lastNextMonth(year, month, thisMonth)
}
//其他的就不用管了
} else {
if (nowMonth - month < 2) {
that.lastNextMonth(year, month, thisMonth)
}
}
// 点击下一个月的按钮
} else if (changeType === "next") {
if (nowMonth !== month) {
year = month > 11 ? year + 1 : year;
month = month > 11 ? 1 : month + 1;
if (month < 10) {
month = "0" + month
}
thisMonth = year + "-" + month;
that.setData({
thisMonth: thisMonth
})
that.getCalendarList(thisMonth)
}
}
},
```
最终也总算实现了这个功能，虽然也是用最蠢的办法，经历了上面的几个难点后，这个需求也总算被我实现了，附上最后的效果图
这是本人写的第一篇文章，为了记录在平时工作生活中遇到的一些问题以及最后是如何解决的，希望读过的各位能在代码和思路上的书写提出意见，也希望能够为各位代码的开发中提供一点思路，谢谢！
