使用Vue做一个自定义的日历小控件

最新推荐文章于 2024-04-16 16:41:33 发布

一脸聪明

最新推荐文章于 2024-04-16 16:41:33 发布

阅读量1.5k

点赞数

分类专栏：前端小玩意文章标签： vue.js javascript

本文链接：https://blog.csdn.net/qq_59843674/article/details/125491333

版权

前端小玩意专栏收录该内容

2 篇文章 0 订阅

订阅专栏

废话少说，先上效果图：

可以在效果图中看到，选择不同的月份的时候当月天数与星期几都是一一对应，非当月天数则是灰色显示，一目了然。

并且此日历控件支持自动确定当前时间，每次打开默认显示的就是最新的月份，用来做签到打卡的功能比较合适。

由于使用的是原生div进行制作，自定义功能非常强，可以自由的更换样式、背景、颜色、大小等等。

在与数据库的时候可以从数据库获得时间信息并填充到控件中，图中的色块就可以看出。

该控件使用了Vue、CSS、以及最原生的div实现了自定义的样式，不得不说，div在自定义这一块是真的太给力了

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>日历控件</title>
    <script src="./vue.js"></script>
</head>
<style>
    .writer-upper-right {
    float: left;
    width: 333px;
    height: 300px;
    border: 2px orange solid;
    border-radius: 7px;
}
.calendar-head {
    width: 100%;
    height: 15%;
    border-radius: 7px;
}
.calendar-body {
    width: 99.9%;
    height: 84.9%;
    border-radius: 7px;
    border-top: 1px orange solid;
}
.calendar-head-title {
    float: left;
    width: 100px;
    height: 79%;
    line-height: 33px;
    border-radius: 7px;
    border: 2px orange solid;
    margin-top: 2px;
    margin-left: 1px;
    text-align: center;
    color: orange;
    font-size: 21px;
}
.calendar-head-year {
    float: left;
    margin-left: 9px;
    width: 100px;
    height: 79%;
    border-radius: 7px;
    border: 2px orange solid;
    margin-top: 2px;
    color: orange;
    text-align: center;
}
.select-calendar-year {
    float: left;
    width: 100%;
    height: 100%;
    border: none;
    background: none;
    color: orange;
    text-indent: 0.7em;
    font-size: 20px;
}
.select-calendar-year:focus {
    outline: none;
}
.select-calendar-year:hover {
    cursor: pointer;
}
.calendar-body-week {
    width: 99.8%;
    height: 32px;
    margin: 0 auto;
    border-bottom: 1px orange solid;
}
.calendar-body-days {
    width: 99.8%;
    height: 199px;
    border-bottom: 1px orange solid;
    border-top: none;
    border-radius: 7px;
}
.calendar-body-info {
    width: 99.8%;
    height: 18px;
    border-radius: 7px;
}
.weekEveryDay {
    float: left;
    width: 40px;
    height: 23px;
    margin-left: 5px;
    margin-top: 4px;
    border: 1px orange solid;
    border-radius: 5px;
    line-height: 23px;
    text-align: center;
    font-size: 15px;
    color: orange;
}
.monthEveryDay {
    margin-top: 7px;
}
.not-now-month {
    border-color: gray;
    color: gray;
}
.now-day-writer {
    background-color: orange;
    color: black;
}
.now-day-not-writer {
    border-color: gray;
    background-color: gray;
    color: black;
}
.info-if-writer {
    float: left;
    width: 60px;
    height: 16px;
    margin-left: 5px;
    margin-top: 1px;
}
.color-span {
    float: left;
    width: 15px;
    height: 15px;
    margin-top: 1px;
    background-color: gray;
}
.color-info {
    float: left;
    width: 40px;
    height: 15px;
    margin-top: 1px;
    margin-left: 5px;
    line-height: 15px;
    text-align: left;
    font-size: 12px;
    color: gray;
}
.color-span2 {
    background-color: orange;
}
.color-info2 {
    color: orange;
}
</style>
<body style="background: url('./bg-xk.gif');margin: 100px 100px;">
	<div id="app">
		<div class="writer-upper-right">
			<div class="calendar-head">
				<div class="calendar-head-title">日历控件</div>
				<div class="calendar-head-year">
					<label>
						<select class="select-calendar-year" v-model="calendarYear" @change="SelectCalendarYear">
							<option v-for="year in calendarAllYear" :value="year" :key="year">{{year}}年</option>
						</select>
					</label>
				</div>
				<div class="calendar-head-year">
					<label>
						<select class="select-calendar-year" v-model="calendarMonth" @change="SelectCalendarMonth">
							<option v-for="month in calendarAllMonth" :value="month" :key="month">{{month}}月</option>
						</select>
					</label>
				</div>
			</div>
			<div class="calendar-body">
				<div class="calendar-body-week">
					<div class="weekEveryDay">SUN</div>
					<div class="weekEveryDay">MON</div>
					<div class="weekEveryDay">TUE</div>
					<div class="weekEveryDay">WED</div>
					<div class="weekEveryDay">THU</div>
					<div class="weekEveryDay">FRI</div>
					<div class="weekEveryDay">SAT</div>
				</div>
				<div class="calendar-body-days">
					<div class="weekEveryDay monthEveryDay not-now-month" v-for="day in calendarPrevDays" disabled>{{day}}</div>
					<div class="weekEveryDay monthEveryDay"
						 v-for="day in calendarNowDays"
						 :class="['weekEveryDay monthEveryDay', {'now-day-writer' : calendarHadWrite.includes(day)}, {'now-day-not-writer' : calendarNotWrite.includes(day)}]"
					>{{day}}</div>
					<div class="weekEveryDay monthEveryDay not-now-month" v-for="day in calendarNextDays" disabled>{{day}}</div>
				</div>
				<div class="calendar-body-info">
					<div class="info-if-writer">
						<div class="color-span"></div>
						<div class="color-info">未更新</div>
					</div>
					<div class="info-if-writer">
						<div class="color-span color-span2"></div>
						<div class="color-info color-info2">有更新</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</body>
</html>
<script>
var Main = {
	data() {
		return {
			calendarYear: 0,            // 日历部分的“年份“-选中的一年
			calendarMonth: 0,           // 日历部分的”月份”-选中的一月
			calendarAllYear:[],         // 日历部分的“年份”
			calendarAllMonth:[],        // 日历部分的“月份”
			calendarNowDays: [],        // 日历部分的当月日期
			calendarPrevDays: [],       // 日历部分的上月末尾
			calendarNextDays: [],       // 日历部分的下月开头
			calendarHadWrite: [],       // 日历部分的当月有更新的集合
			calendarNotWrite: [],       // 日历部分的当月未更新的集合
		}
	},
	methods: {
		/*网页加载时获取年份，自2021年开始的年份*/
		ConfirmYear() {
			let date = new Date();
			let nowYear = date.getFullYear();
			let nowMonth = date.getMonth() + 1;
			this.calendarYear = nowYear;
			this.calendarMonth = nowMonth;
			for (let j = nowYear; j >= 2021; j--) {
				this.calendarAllYear.push(j);
			}
		},
		/*根据年份的不同选择不同的月份，不允许出现未来的时间*/
		SelectCalendarYear() {
			this.calendarAllMonth = [];
			let year = this.calendarYear;
			let date = new Date();
			let nowYear = date.getFullYear();
			let nowMonth = date.getMonth() + 1;
			if (year < nowYear) {
				for (let i = 12; i > 0; i--) {
					if (i < 10) {
						this.calendarAllMonth.push("0"+i);
					} else {
						this.calendarAllMonth.push(i);
					}
				}
			} else {
				for (let i = nowMonth; i > 0; i--) {
					if (i < 10) {
						this.calendarAllMonth.push("0"+i);
					} else {
						this.calendarAllMonth.push(i);
					}
				}
			}
			this.calendarMonth = this.calendarAllMonth[0];
			this.SelectCalendarMonth();
		},
		/*根据月份的不同选择当月的天数*/
		SelectCalendarMonth() {
			this.calendarNowDays = [];
			this.calendarPrevDays = [];
			this.calendarNextDays = [];
			let year = this.calendarYear;
			let month = this.calendarMonth;
			// 获取当前月的最后一天，实际上是获取上个月最后一天，但是month没有减一，所以是这个月的最后一天
			let days = new Date(year,month,0).getDate();
			// 获取上月最后一天
			let prevDays = new Date(year,month-1,0).getDate();
			// 获取当前月的1号是星期几，这个不是返回上个月的，所以要减一，1就表示1号，数字几就表示星期几，0表示周日
			let week = new Date(year,month-1,1).getDay();
			// 获取下个月1号是星期几
			let nextWeek = new Date(year,month,1).getDay();
			// 填充当前月的日期数字
			for (let i = 1; i <= days; i++) {
				if (i < 10) {
					this.calendarNowDays.push("0"+i);
				} else {
					this.calendarNowDays.push(i);
				}
			}
			// 填充上月末尾的日期数字
			if (week > 0) {
				for (let i = prevDays - week + 1; i <= prevDays; i++) {
					this.calendarPrevDays.push(i);
				}
			}
			// 计算格子剩余数量
			let surplusDays = 42 - days - this.calendarPrevDays.length;
			// 填充下月月初的日期数字
			for (let i = 1; i <= surplusDays; i++) {
				if (i < 10) {
					this.calendarNextDays.push("0"+i);
				} else {
					this.calendarNextDays.push(i);
				}
			}
		},
	},
	created() {
		// 此处可以由数据库查询出来填充
		this.calendarHadWrite.push("07");
		this.calendarHadWrite.push(17);
		this.calendarNotWrite.push("03");
		this.calendarNotWrite.push(13);
		
		this.ConfirmYear();
		this.SelectCalendarYear();
	}
}
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')
</script>