【moment】moment生成日历图及日历事件展示

效果图：

项目中用到日历展示事件，但一些模板框架不太合适，就用原生写了。

首先HTML代码：

1. 日历：

<view class="ul">
	<view class="li-top">
		<view @click="nextLeft">&lang;</view>
		<view>{{ timeTitle }}</view>
		<view @click="nextRight">&rang;</view>
	</view>
	<view class="li-week">
		<view>日</view>
		<view>一</view>
		<view>二</view>
		<view>三</view>
		<view>四</view>
		<view>五</view>
		<view>六</view>
	</view>
	<view class="li-cont">
		<view v-for="(item, index) in dataArr" :key="index" @click="click(item)">
			<view :class="item.checkType == '出勤'?'green': item.checkType == '旷工'?'red':item.checkType== '请假'?'blue':item.checkType== '上班'?'yellow':item.checkType== '早退'?'orange':''">{{ item.day }}</view>
		</view>
	</view>
	<view class="sign">
		<view class="green" />
		出勤
		<view class="red" />
		旷工
		<view class="blue" />
		请假
		<view class="yellow" />
		缺卡
		<view class="orange" />
		早退
	</view>
</view>

2. 点击事件：

<view class="row">
	<view v-if="editData">
		<view class="col top">
			<view class="col-time">{{ editData.time ? editData.time : '' }}</view>
			<!-- <view class="col-modify" v-if="checkType" @click="modify">修改﹥</view> -->
		</view>
		<view class="col center">姓名：{{ staffName }}</view>
		<view class="col bottom" v-if="checkType">状态：
		<span>{{ editData.checkType=='上班'?'缺卡': editData.checkType }}</span> 
		</view>
		<view class="col bottom" v-else>状态：未出勤</view>
	</view>
</view>

CSS样式：

1. 日历

.ul {
	width: 90%;
	/* height: 460rpx; */
	border: 1px solid #9cc5f5;
	margin: 0 auto;
	border-radius: 8px;
	padding: 10px 0px;
	box-shadow: 0px 2px 8rpx rgba(0, 0, 0, 0.2);
	background: #fff;
}
.li-top,
.li-week {
	width: 95%;
	height: 60rpx;
	line-height: 60rpx;
	margin: 0 auto;
}
.li-top > view {
	text-align: center;
	display: inline-block;
}
.li-top > view:nth-child(1) {
	width: 10%;
	text-align: left;
}
.li-top > view:nth-child(2) {
	width: 80%;
	font-weight: bold;
}
.li-top > view:nth-child(3) {
	width: 10%;
	text-align: right;
}

.li-week > view {
	width: 14.285%;
	text-align: center;
	display: inline-block;
}

.li-cont {
	width: 95%;
	margin: 0 auto;
}
.li-cont > view {
	width: 14.285%;
	height: 80rpx;
	text-align: center;
	display: inline-block;
}
.li-cont > view > view {
	width: 60rpx;
	height: 60rpx;
	line-height: 60rpx;
	margin: 0 auto;
	border-radius: 50%;
}
.red {
	background: #f65050;
	color: #fff;
}
.blue {
	background: #4d63cf;
	color: #fff;
}
.green {
	background: #4dcf4d;
	color: #fff;
}
.yellow {
	background: #ffff00;
	color: #43287f;
}

.orange {
	background: #ffaa00;
	color: #fff;
}

.sign {
	width: 95%;
	height: 100rpx;
	margin: 0 auto;
	margin-top: 20rpx;
}
.sign > view {
	width: 80rpx;
	height: 26rpx;
	border-radius: 5px;
	margin: 0 16rpx;
	display: inline-block;
}

2. 日历事件

.row {
	width: 90%;
	height: auto;
	margin: 0 auto;
	margin-top: 20px;
	border-radius: 5px;
	padding: 5px 0;
	font-size: 14px;
	box-shadow: 0px 2px 8rpx rgba(0, 0, 0, 0.2);
	background: #fff;
}
.col {
	width: 90%;
	height: auto;
	margin: 0 auto;
	padding: 2px 0;
	font-size: 16px;
}
.top > view {
	width: 50%;
	display: inline-block;
}
.col-modify {
	text-align: right;
}
.top {
	height: 30px;
	line-height: 30px;
}
.center,
.bottom {
	/* height: 40rpx;
	    line-height: 40rpx; */
	font-size: 12px;
}

重点JS来啦

• 日历展示及事件全部代码

onLoad(e) {
	var date = new Date();
	var currentMoment = moment(date);
	this.currentMoment = currentMoment;
	this.munthDayNumber(currentMoment);
},
methods: {
	nextLeft(e) {
		this.currentMoment.add(-1, 'month');
		this.munthDayNumber(this.currentMoment);
	},
	nextRight(e) {
		this.currentMoment.add(1, 'month');
		this.munthDayNumber(this.currentMoment);
	},
	munthDayNumber(currentMoment) {
		this.timeTitle = currentMoment.format('YYYY年MM月')
		this.beginTime = currentMoment.startOf('month').format('YYYY-MM-DD');
		this.endTime = currentMoment.endOf('month').format('YYYY-MM-DD');
		var monthDay = currentMoment.daysInMonth();
		var eDay = moment(currentMoment.format('YYYY-MM') + '-01', 'YYYY-MM-DD').format('E');
		var eDayNumber = parseInt(eDay);
		// console.log(monthDay,eDay);
		var dataArr = [];
		if (eDayNumber != 7) {
			for (var i = 0; i < eDayNumber; i++) {
				dataArr.push({});
			}
		}

		var indexTitle = currentMoment.format('YYYY-MM-');

		for (var i = 1; i <= monthDay; i++) {
			var time = indexTitle;
			if (i <= 9) {
				var time = indexTitle + '0' + i;
			} else {
				var time = indexTitle + i;
			}

			dataArr.push({ day: i, time: time});
		}
		this.dataArr = dataArr
		this.findData(dataArr);
	},
	// 日期点击
	click(e) {
		// console.log(e, '日期点击');
		this.editData = e
		if (e.checkType) {
			this.checkType = true
		} else {
			this.checkType = false
	 }
	},
	// 修改
	modify(e) {
		// console.log(e, '修改');
		this.checkType = false
	},
	// 出勤
	Attendance(e) {
		// console.log(e, 'Attendance');
		this.staffCheckFun(e.time, '出勤');
	},
	// 旷工
	Absenteeism(e) {
		// console.log(e, 'Absenteeism');
		this.staffCheckFun(e.time, '旷工');
	},
	// 请假
	leave(e) {
		// console.log(e, 'leave');
		this.staffCheckFun(e.time, '请假');
	},
	staffCheckFun(date, type) {
		var request;
		var editData = Object.assign({}, this.editData);
		if (editData.checkType) {
			editData.ondutyInfo = type;
			editData.checkType = type;
			updateStaffCheck(editData).then(val => {
				// console.log(val, 'tahStaffCheck');
				if (val.code === 200) {
					this.checkType = true,
					this.editData = editData
					this.munthDayNumber(this.currentMoment);
				}
			});
		} else {
			editData.ondutyInfo = type;
			editData.checkType = type;
			editData.staffId = this.staffId;
			editData.checkDate = date;
			staffCheck(this.staffId, editData).then(val => {
				// console.log(val, 'tahStaffCheck');
				if (val.code === 200) {
					this.checkType = true,
					this.editData = editData
					this.munthDayNumber(this.currentMoment);
				}
			});
		}
	},
	findData(dataArr) {
		let data = {
			beginTime: this.beginTime,
			endTime: this.endTime,
			staffId: this.staffId
		}
		projectStaffCheck(data).then(val => {
			// console.log(val, '员工考勤记录');
			this.getDataL = val.data.data

			var mapData = new Map();

			val.data.data.forEach(item => {
				var key = parseInt(item.time.substr(8, 2));
				mapData.set(key, item);
			});

			var newdataArr = dataArr.map(item => {
				var key = item.day;
				var value = mapData.get(key);
				if (value) {
					item.id = value.id;
					item.time = value.time;
					if (value.checkType == '病假' || value.checkType == '事假') {
						item.checkType = '请假';
					} else {
						item.checkType = value.checkType;
					}
				}
				return item;
			});

			this.dataArr = newdataArr
		});
	}
}