当前位置：首页 > news >正文

自定义封装日历组件

news 2025/8/1 19:30:29

自定义日历

工作需要，但现有框架封装的日历无法满足需求，又找不到更好的插件，所以准备自己封装一个。

效果图和说明

在这里插入图片描述
一个很简易版的demo日历，本文只提供最基本的功能代码，便于阅读二开。

新建calendar.vue文件

<template>
<div class="calendar"><!-- 年月 --><div class="head"><div><span @click="setYear(false)">&lt;&lt;</span><span style="margin-left: 17px;" @click="setMonth(false)">&lt; </span></div><div> {{date.year}} 年 {{date.month}} 月</div><div><span style="margin-right: 17px;" @click="setMonth(true)">&gt; </span><span @click="setYear(true)">&gt;&gt;</span></div></div><!-- 星期 --><div class="weeks"><ul><li v-for="(item,index) of weeks" :key="index">{{item}}</li></ul></div><!-- 日 --><div class="days"><ul><li v-for="(item,index) of days" :key="index" :class="{'ash':item.cls}">{{item.val}}</li></ul></div>
</div>
</template><script>
export default {data(){return{date:{year:'',month:''},weeks:['日', '一', '二', '三', '四', '五', '六'],days:[],}},methods:{// 获取年、月getDate(){let date = new Date()this.date.year = date.getFullYear()this.date.month = date.getMonth()+1this.getViewDays()},// 获取界面中显示的天getViewDays(){let oneDayWeek = new Date(`${this.date.year}-${this.date.month}-01`).getDay()let lastMonth = this.date.month-1 > 0 ? this.date.month-1 : 12// 获取上月天数let lastMonthDays = this.getDays(lastMonth)this.days = []// 补齐上月天数for(let i=0; i<oneDayWeek; i++){this.days.push({val: lastMonthDays - oneDayWeek + i +1,cls:true})}let thisMonthDays = this.getDays(this.date.month)// 放入这月天数for(let i=1; i<=thisMonthDays; i++){this.days.push({val: i})}// 下月天数补齐let nextMonthDay = 42-this.days.lengthfor(let i=1; i<=nextMonthDay; i++){this.days.push({val: i,cls:true})}},  // 年份更改setYear(state){if(state){this.date.year++}else{this.date.year--}this.getViewDays()},// 月份更改setMonth(state){if(state){if(this.date.month == 12){this.date.year++this.date.month = 1}else{this.date.month++}}else{if(this.date.month == 1){this.date.year--this.date.month = 12}else{this.date.month--}}this.getViewDays()},  // 获取一个月有多少天getDays(month){if([1,3,5,7,8,10,12].indexOf(month) != -1){return 31}else if([4,6,9,11].indexOf(month) != -1){return 30}else{if((this.date.year % 4 === 0 && this.date.year % 100 != 0) || this.date.year % 400 ==0){return 29}else{return 28}}}},mounted(){this.getDate()}
}
</script><style lang="scss" scoped>
.calendar{width: 380px;box-shadow: 0px 0px 3px #ccc;margin: 0 auto;margin-top: 30px;border-radius: 5px;padding: 15px 25px;.head{display: flex;justify-content: space-between;span{cursor: pointer;}}.weeks > ul{display: flex;justify-content: space-around;border-bottom: 1px solid #ccc;padding: 10px 0;font-size: 13px;margin-top: 20px;}.days > ul{display: flex;flex-wrap: wrap;justify-content: space-between;li{width: 54px;height: 40px;line-height: 40px;text-align: center;}.ash{color: #ccc;}}
}
</style>