vue2实现日历12个月平铺，显示工作日休息日

本文主要是介绍vue2实现日历12个月平铺，显示工作日休息日，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

参考：https://blog.csdn.net/weixin_40292154/article/details/125312368
1.组件DateCalendar.vue，sass改为less

<template><div class="cc-calendar"><div class="calendar-title"><span>{{ year }}年{{ month + 1 }}月</span></div><ul class="calendar-week"><liv-for="(item, index) in calendarTitleArr":key="index"class="week-item">{{ item }}</li></ul><ul class="calendar-view"><!-- 动态设置背景颜色 --><liv-for="(item, index) in visibleCalendar":key="index"class="date-view":style="{background:handleData(item.date) && isCurrentMonth(item.date)? handleData(item.date).color: !isCurrentMonth(item.date)? '#EAF2F2': '#BFBFBF',}"><spanclass="date-day":class="[{ 'opacity-class': !isCurrentMonth(item.date) }]">{{ item.day }}</span><span class="calendar-num">{{handleData(item.date) && isCurrentMonth(item.date)? handleData(item.date).pollution: ""}}</span></li></ul><!-- <div class="color-box"><div v-for="item in colorList" :key="item.value"><span :style="{ background: item.value }"></span><span>{{ item.name }}</span></div></div> --></div>
</template><script>
import {getNewDate,getDate,formatDate,colorList,handleAQIColor,
} from "@/util.js";
export default {name: "date-calendar",props: {year: {type: [String, Number],default: 2022,},month: {type: [String, Number],default: 0,},list: {type: Array,default() {return [];},},handleClick: Function,},data() {return {calendarTitleArr: ["一", "二", "三", "四", "五", "六", "日"],colorList,};},computed: {visibleCalendar() {let calendatArr = [];let { year, month } = getNewDate(getDate(this.year, this.month, 1));let currentFirstDay = getDate(year, month, 1);// 获取当前月第一天星期几let weekDay = currentFirstDay.getDay();let startTime = null;if (weekDay == 0) {// 当月第一天是星期天startTime = currentFirstDay - 6 * 24 * 60 * 60 * 1000;} else {startTime = currentFirstDay - (weekDay - 1) * 24 * 60 * 60 * 1000;}// let monthDayNum;// 当第一天是周五 周六 周日 这个月绘制42天数据 否则为35天// if (weekDay == 5 || weekDay == 6 || weekDay == 0) {//   monthDayNum = 42;// } else {//   monthDayNum = 35;// }// for (let i = 0; i < monthDayNum; i++) {// 为了页面整齐排列 一并绘制42天for (let i = 0; i < 42; i++) {calendatArr.push({date: new Date(startTime + i * 24 * 60 * 60 * 1000),// year: year,// month: month + 1,year: new Date(startTime + i * 24 * 60 * 60 * 1000).getFullYear(),month: new Date(startTime + i * 24 * 60 * 60 * 1000).getMonth() + 1,day: new Date(startTime + i * 24 * 60 * 60 * 1000).getDate(),});}return calendatArr;},},methods: {handleData(date) {// const data = [//   {//     time: "2023-08-01",//     pollution: "工作日",//     value: "1",//   },//   {//     time: "2023-05-02",//     pollution: "休息日",//     value: "0",//   },//   // {//   //   time: "2022-03-03",//   //   pollution: "PM10",//   //   value: "123",//   // },//   // {//   //   time: "2022-05-05",//   //   pollution: "SO2",//   //   value: "186",//   // },//   // {//   //   time: "2022-09-05",//   //   pollution: "NO",//   //   value: "256",//   // },//   // {//   //   time: "2022-12-12",//   //   pollution: "CO",//   //   value: "400",//   // },// ]const data = this.list;data.forEach((item) => {if (item.pollution === "无") item.pollution = "";if (!item.value && item.value !== 0) {item.color = "#bfbfbf";return;}let list = colorList.filter((itm) => itm.name == handleAQIColor(item.value));item.color = list[0].value;});let { year, month, day } = getNewDate(date);let dateTime = year + "-" + formatDate(month + 1) + "-" + formatDate(day);let list = null;data.forEach((item) => {if (item.time == dateTime) {list = item;}});return list;},// 是否是当前月isCurrentMonth(date) {let { year: currentYear, month: currentMonth } = getNewDate(getDate(this.year, this.month, 1));let { year, month } = getNewDate(date);return currentYear == year && currentMonth == month;},},created() {},
};
</script><style lang="less" scope>
body,
ul,
ol,
li {margin: 0;padding: 0;box-sizing: border-box;
}ul,
ol {list-style: none;
}.cc-calendar {width: 441px;height: 100%;box-sizing: border-box;margin-bottom: 29px;.calendar-title {width: 100%;font-size: 16px;font-family: "Source Han Sans CN";font-weight: 500;color: #061a19;text-align: center;margin-bottom: 19px;}.calendar-week {display: flex;height: 28px;line-height: 28px;border: 1px solid #14c3ba;border-right: none;border-left: none;margin-bottom: 2px;.week-item {width: 67px;text-align: center;font-size: 14px;font-family: "Source Han Sans CN";color: #061a19;font-weight: 400;}}.calendar-view {display: flex;flex-wrap: wrap;border-top: 2px solid #e4e7ea;.date-view {width: 63px;height: 38px;border-right: 2px solid #e4e7ea;border-bottom: 2px solid #e4e7ea;box-sizing: border-box;position: relative;.date-day {padding: 8px;font-size: 12px;font-family: "Source Han Sans CN";font-weight: 400;color: #062927;}.calendar-num {position: absolute;left: 14px;bottom: 0;font-size: 14px;font-family: "Source Han Sans CN";font-weight: 400;color: #062927;}}.opacity-class {opacity: 0.5;}}.color-box {margin-top: 7px;display: flex;align-items: center;justify-content: flex-end;> div {display: flex;align-items: center;justify-content: center;> span:first-child {width: 30px;height: 14px;}> span:last-child {font-size: 14px;font-weight: 500;color: #1d2f2e;}}span {display: inline-block;width: 30px;margin-right: 1px;text-align: center;}}
}
</style>

2.util.js

export const getNewDate = (date) => {let year = date.getFullYear();let month = date.getMonth();let day = date.getDate();return {year,month,day,};};export const getDate = (year, month, day) => {return new Date(year, month, day);};export const formatDate = (date) => {date = Number(date);return date < 10 ? `0${date}` : date;};export const colorList = [{name: "工作日",value: "#74B925",},{name: "休息日",value: "#F5E31C",}];export const handleAQIColor = (value) => {// value = +value;let grade = "工作日";switch (true) {case value == "1":grade = "工作日";break;case value == "0":grade = "休息日";break;default:grade = "无";break;}return grade;};

3.父组件引用

<template><div><!-- Your template code goes here --><h1>{{ message }}</h1><button @click="changeMessage">Change Message</button><!-- 渲染12个月 --><el-dialog :visible.sync="dialogVisble" width="80%" height="400px"><div class="dialog-content"><!-- 对话框中的内容 --><!-- 如果内容较多，超出对话框高度，将会出现滚动条 --><date-calendaryear="2023":month="index"v-for="(item, index) in 12":key="index":list="pollutionData"style="float: left; margin-right: 10px"/></div></el-dialog></div>
</template><script>
import DateCalendar from "@/components/DateCalendar.vue";
export default {components: {"date-calendar": DateCalendar,},data() {return {dialogVisble: false,message: [],pollutionData: [{time: "2023-01-02",pollution: "休息日",value: "0",},{time: "2023-01-01",pollution: "工作日",value: "1",},],};},methods: {changeMessage() {this.dialogVisble = true;},},
};
</script><style scoped>
/* Your component-specific styles go here */
h1 {color: blue;
}
.dialog-content {max-height: 300px; /* 设置最大高度，超过该高度将出现滚动条 */overflow-y: auto; /* 添加垂直滚动条 */padding: 10px; /* 可选：为内容添加一些内边距，使样式更美观 */
}
</style>

效果：

样式之后再调~~
参考文章开头的链接，实现按年度进行12个月的日历平铺，并且按数组给值标记工作日和休息日。