本篇文章给大家带来了关于前端日历的相关知识，其中主要跟大家聊一聊如何封装一个自定义日历组件，感兴趣的朋友下面一起来看一下吧，希望对大家有帮助。
前言众所周知啊，一般来说，如果项目中有需要用到日历组件，往往是找第三方ui库中的组件来使用，或者是找现成的其他第三方插件。对于很多小伙伴来说，第一眼看到日历组件，下意识的就会觉得很复杂，无从下手。但是当我阅读了这个日历插件的源码之后，发现并没有我想象中的复杂。我以前傻傻得认为，想要做一个日历组件，得需要把距离现在年份前后至少十年的日历数据都获取到，然后才能进行下一步的开发。
然而，在我尝试着阅读了dycalendar.js这个库的源码之后，一方面感觉自己太笨了，把问题想得太复杂了。另外也感慨作者思路之清晰。看完之后感觉受益匪浅。
在将作者的思路逻辑梳理完毕后，我依据这个思路开发了一个vue组件。如下图所示：
接下来，就随着我一起看看如何开发一个自己的日历组件吧。
核心代码实现1、梳理思路获取到目标日期数据获取到当前日期的各项重要属性，诸如当前年，当前月，当前日期，当前星期几，当前月一共有几天，当前月的第一天对应的是星期几，上个月总共有多少天等。根据这些属性，来生成具体的日历日期数据列表，然后将其循环渲染到模板中。当切换月份的时候，获取到新的目标日期对应的各项关键数据。vue检测到日历属性变化之后，通知页面进行更新。2、初始化所需要的数据一般来说，成熟的日历组件，日期都是一个双向绑定的变量。为了方便使用，我们也采用双向绑定的方式。
<script setup>import { reactive, ref, computed, watch } from "vue";const props = defineprops({ modelvalue: date,});const emits = defineemits(["update:modelvalue"]);/** * 最小年份 */const min_year = 1900;/** * 最大年份 */const max_year = 9999;/** * 目标日期 */const targetdate = ref(props.modelvalue);
接下来，我们还需要初始化一些常量用来表示月份和日期：
/** * 有关月度的名称列表 */const monthnamelist = { chinesefullname: [ "一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月", ], fullname: [ "january", "february", "march", "april", "may", "june", "july", "august", "september", "october", "november", "december", ], mmm: [ "jan", "feb", "mar", "apr", "may", "jun", "jul", "aug", "sep", "oct", "nov", "dec", ],};/** * 有关周几的名称列表 */const daynamelist = [ { chinesefullname: "周日", chineseshortname: "日", fullname: "sunday", shortname: "sun", daynumber: 0, }, { chinesefullname: "周一", chineseshortname: "一", fullname: "monday", shortname: "mon", daynumber: 1, }, { chinesefullname: "周二", chineseshortname: "二", fullname: "tuesday", shortname: "tue", daynumber: 2, }, { chinesefullname: "周三", chineseshortname: "三", fullname: "wednesday", shortname: "wed", daynumber: 3, }, { chinesefullname: "周四", chineseshortname: "四", fullname: "thursday", shortname: "thu", daynumber: 4, }, { chinesefullname: "周五", chineseshortname: "五", fullname: "friday", shortname: "fri", daynumber: 5, }, { chinesefullname: "周六", chineseshortname: "六", fullname: "saturday", shortname: "sat", daynumber: 6, },];
接下来，准备几个vue的响应式数据：
/** * 今日 */const today = new date();/** * 日历的各项属性 */const calendarprops = reactive({ target: { year: null, month: null, date: null, day: null, monthshortname: null, monthfullname: null, monthchinesefullname: null, firstday: null, firstdayindex: null, totaldays: null, }, previous: { totaldays: null, },});/** * 用于展现的日历数据 */const calendardata = ref([]);
3、初始化日历的各项属性接下来，通过setcalendarprops方法获取日历的各个属性，逐个填充calendarprops中的数据：
function setcalendarprops() { if (!targetdate.value) { targetdate.value = today; } // 获取目标日期的年月日星期几数据 calendarprops.target.year = targetdate.value.getfullyear(); calendarprops.target.month = targetdate.value.getmonth(); calendarprops.target.date = targetdate.value.getdate(); calendarprops.target.day = targetdate.value.getday(); if ( calendarprops.target.year < min_year || calendarprops.target.year > max_year ) { console.error("无效的年份，请检查传入的数据是否是正常"); return; } // 获取到目标日期的月份【中文】名称 let datestring; datestring = targetdate.value.tostring().split(" "); calendarprops.target.monthshortname = datestring[1]; calendarprops.target.monthfullname = monthnamelist.fullname[calendarprops.target.month]; calendarprops.target.monthchinesefullname = monthnamelist.chinesefullname[calendarprops.target.month]; // 获取目标月份的第一天是星期几，和在星期几中的索引值 const targetmonthfirstday = new date( calendarprops.target.year, calendarprops.target.month, 1 ); calendarprops.target.firstday = targetmonthfirstday.getday(); calendarprops.target.firstdayindex = daynamelist.findindex( (day) => day.daynumber === calendarprops.target.firstday ); // 获取目标月份总共多少天 const targetmonthlastday = new date( calendarprops.target.year, calendarprops.target.month + 1, 0 ); calendarprops.target.totaldays = targetmonthlastday.getdate(); // 获取目标月份的上个月总共多少天 const previousmonth = new date( calendarprops.target.year, calendarprops.target.month, 0 ); calendarprops.previous.totaldays = previousmonth.getdate();}
需要注意的一个知识点是，在获取本月多少天和上个月多少天的时候，都将date值设置为了0。这是因为当date值为0的时候，返回的date对象是上个月的最后一天。所以说，为了获取本月多少天，需要将本月的month值加1。
执行这个方法之后，此时calendarprops的值为：
4、根据日历属性生成日历日期的数据当我们已经知道本月第一天对应的周几索引值、本月一共有多少天和上个月一共有多少天这三个核心数据之后，就可以开始生成对应的日历数据了。
思路如下：
由于大部分情况下，本月的第一天不是从头开始的，之前的部分是上个月的日期。所以第一行要单独进行处理。设置一个公用的date数值，初始值设置为1。然后从本月第一天对应的周几索引值开始进行递增。本月之前的日期和之后的日期设置一个算法进行计算。为了方便之后进行日期切换、样式区分，将生成的数据加工成一个对象，其中包含日期类型——datetype，表示是本月还是上月还是下月；/** * 生成日历的数据 */function setcalendardata() { let i; let date = 1; const origindata = []; const firstrow = []; // 设置第一行数据 for (i = 0; i <= 6; i++) { // 设置目标月份之前月份的日期数据 if (i < calendarprops.target.firstdayindex) { const previousdate = calendarprops.previous.totaldays - calendarprops.target.firstdayindex + (i + 1); firstrow.push({ dateobj: new date( calendarprops.target.year, calendarprops.target.month - 1, previousdate ), datenumber: previousdate, datetype: "previous" }); } else { // 设置目标月份当月的日期数据 firstrow.push({ dateobj: new date( calendarprops.target.year, calendarprops.target.month, date ), datenumber: date, datetype: "current" }); date++; } } origindata.push(firstrow); // 设置后面五行的数据 for (let j = 0; j <= 4; j++) { const rowdata = []; for (let k = 0; k <= 6; k++) { // 设置目标月份剩下的日期数据 if (date <= calendarprops.target.totaldays) { rowdata.push({ dateobj: new date( calendarprops.target.year, calendarprops.target.month, date ), datenumber: date, datetype: "current" }); } else { // 设置目标月份下个月的日期数据 const nextdate = date - calendarprops.target.totaldays; rowdata.push({ dateobj: new date( calendarprops.target.year, calendarprops.target.month + 1, nextdate ), datenumber: nextdate, datetype: "next" }); } date++; } origindata.push(rowdata); } calendardata.value = origindata;}
至此，这个日历组件的核心部分的逻辑就已经实现了。你看，是不是很简单？
接下来，我们只需要根据calendardata中的数据渲染出相应的html模板和添加上样式就可以了。
5、添加模板和样式部分一般来说，日历组件都是网格状的结构，所以我选择table的方式进行渲染。不过你要是问我还有没有别的方式，那还是有的，比如使用flex布局或者grid布局，但是如果采用这种方式的话，calendardata的数据结构就不是现在这个样子了。
dom结构如下图：
至于按钮边框的流动效果，是我参照苏苏的文章做的，详情请见：
clip-path实现按钮流动边框动画 juejin.cn/post/719877…
然后剩下的样式部分，即兴发挥或者根据ui设计图绘制即可。想必各位都领教过ui姐姐们精美的设计图吧（嘻嘻
具体的代码部分就不贴在文章中了，如有需要可以直接查看下方的完整源码
gitee.com/wushengyuan…
结语有些感觉很麻烦的组件，可能核心逻辑往往不是那么复杂。有些时候，可能仅仅是需要一些耐心，将代码一行一行的拆解出来阅读，理清楚其中的思路。
推荐学习：《vue视频教程》
以上就是深析如何封装一个vue自定义日历组件的详细内容。