移动端日历---纯**自己写的

有什么需求怎么办？插件！
自己不想写咋办？插件！
……
欠的总要还的~终于还是要自己写，因为没有满足需求的插件，移动端的更少。但实际上我写的并不是插件，而是功能。嘻嘻。另外这个功能不像插件的，因为是查看个人值班的，所以需要显示整月的日期，所以并非像插件日历日期闭合的很好。但是原理都是一样的。

先上图：

开始……

1、布局：

<h1>
	<span class="left" @click="left">
		<span></span>
	</span>{{defaultMonth}}月值班表 {{defaultYear}}
	<span class="right" @click="right">
		<span></span>
	</span>
</h1>
 <div class="zhiban-box">
	<ol class="week">
		<li v-for="week in weekday" :class="week.class">{{week.week}}</li>
	</ol>
	<div class="day-box">
		<ul class="day">
			<li v-for="item in dayArry" :class="item.class">	
				<span :class="item.ban">{{item.item}}
					<span>{{item.txt}}</span>
				</span>
			</li>
		</ul>
	</div>
 </div>

2、数据(以下数据初始化需要使用，所以声明时就初始化赋值了)

data(){
	return {
		defaultMonth:new Date().getMonth()+1,
		defaultYear:new Date().getFullYear(),
	}
}

3、逻辑代码
大概逻辑写一下：

1. 渲染日历表。初始化需要渲染一次，每次点击按钮切换时，重新加载一次当前选中月份的日历表。
2. 周六日变色。根据一般的日历习惯，需要对周六周日变色显示。
3. 填充补位。举例：假如本月的第一天是周三，那么就说明日历表中”周日“、”周一“、”周二“应该是空出来的，不应该排列日期。

以下代码中可以看出push了新的字段，请忽略，因为本人项目中需要用。
重新渲染日历表（包括初始化日历表的函数）

//重新渲染日历表
createDay(currentYear, currentMonth){
	var curDate = new Date(currentYear, currentMonth, 0);
	for (var k = 1; k <= curDate.getDate(); k++) {
		this.dayArry.push({"item":k,"class":"","ban":"","txt":""});
	}
}

重新给周六日染色，并且补位

//重新给周六周日染色
changeColorWeek(currentYear, currentMonth){
	var date = new Date(currentYear, currentMonth, 0);
	date.setDate(1);
	//补充月份前面的空位
	if(this.weekday[date.getDay()].id == "7"){
		return false;
	}else{
		for(let i = 0; i<this.weekday[date.getDay()].id; i++){
			this.dayArry.unshift({"item":"","class":"","ban":"","txt":""});
		}
	}
	//改变周六日颜色
	for(var i=0;i<this.dayArry.length;i++){
		if(i%7 == 0 && i/7 !=0 ){
			this.dayArry[i].class = "defaultWeek";
			this.dayArry[i-1].class = "defaultWeek";
		}
	}
}

左右按钮点击的过程：

left(){
	if(this.defaultMonth == 1){
		this.defaultMonth = 12;
		this.defaultYear -- ;
		this.dayArry = [];
		this.createDay(this.defaultYear, this.defaultMonth);
		this.changeColorWeek(this.defaultYear, this.defaultMonth);
	}else{
		this.defaultMonth -- ;
		this.dayArry = [];//需要在每次加载新月份的日历时，清空原来的日历列表
		this.createDay(this.defaultYear, this.defaultMonth);
		this.changeColorWeek(this.defaultYear, this.defaultMonth);
		//改变按钮颜色
		document.querySelector(".right > span").style.borderLeft = '6px solid #5a5a5a';
	}
	
}

right(){
	if(this.defaultMonth == new Date().getMonth()+1 && this.defaultYear == new Date().getFullYear()){
		return false;
	}else{
		if(this.defaultMonth == 12){
			this.defaultMonth = 1;
			this.defaultYear ++ ;
			this.dayArry = [];
			this.createDay(this.defaultYear, this.defaultMonth);
		}else{
			this.defaultMonth ++ ;
			this.dayArry = [];
			this.createDay(this.defaultYear, this.defaultMonth);
			this.changeColorWeek(this.defaultYear, this.defaultMonth);
			if(this.defaultMonth == new Date().getMonth()+1){
				document.querySelector(".right > span").style.borderLeft = '6px solid #b5b5b5';
			}
		}
		
	}
}

好了，大概就是这个样子。如果有什么问题，还需要大神们指出。谢谢各位。

如果对您有帮助，给点个赞。谢谢，嘻嘻。

最近在感冒，蓝瘦……