三亚h5网站定制开发公司,免费书画网站怎么做的,电子商城网站建设报告,友情链接检测这是一个没有套路的前端博主#xff0c;热衷各种前端向的骚操作#xff0c;经常想到哪就写到哪#xff0c;如果有感兴趣的技术和前端效果可以留言#xff5e;博主看到后会去代替大家踩坑的#xff5e; 主页: oliver尹的主页 格言: 跌倒了爬起来就好#xff5e; 目录
一、… 这是一个没有套路的前端博主热衷各种前端向的骚操作经常想到哪就写到哪如果有感兴趣的技术和前端效果可以留言博主看到后会去代替大家踩坑的 主页: oliver尹的主页 格言: 跌倒了爬起来就好 目录
一、前言
二、效果图
三、核心思路
四、代码实现
4.1 本月日期计算
4.2 上月日期补齐
4.3 下个月日期补齐
4.4 转化成二位数组
4.5 使用v-for生成日历
4.6 农历假期等
五、小结 一、前言
近来项目中需要用到一个日历组件由于找了找没有找到合适的因此决定自己简单动手做一个项目中肯定比这个复杂的多这里只是给各个小伙伴一个思路或者说是开发的方向
耐心看完也许有所收获......PS如果要源码留下邮箱博主看到后会发送的
二、效果图
大致效果图如下 三、核心思路
日历的核心个人觉得就是 算出指定月份的第一天是星期几为什么因为从形态上来说 日历展现出来就是这么一个7*6的矩形如果知道1号是星期几那么就可以把这个矩形在1号之前的日期补齐最后一天后的日期也可以补齐 因此日历的计算一共可以分为三段
第一段本月计算计算的是当前1号是周几接着计算本月一共多少天第二段上月计算计算1号之前一共有几天第三段下月计算计算的是本月之后一共有多少天
这样三段连在一起就是一组完整的当前数组如果还不清楚那再具体举一个例子吧以2023年7月为例7月的1号是周六那么它应该在矩形的这个位置 那么在周六前面应该还有6天需要取6月的最后6天来补齐这个矩形的前半段
接着计算7月最后一天7月31号是周一那么它应该在这个位置 这样一个完整的矩形日历在数据的角度上来说就齐全了
四、代码实现
4.1 本月日期计算
关于本月日期的计算分为两部分第一部分获取当前日期第二部分 获取本月1号的星期
先是获取当前日期
// 获取当前日期
function getCurrent() {const date new Date();return [date.getFullYear(), date.getMonth() 1, date.getDate()];
}
先是获取本月很简单
/*** 获取公历某一天是星期几* param {number} y 年* param {number} m 月* param {number} d 日* returns {number} 返回星期数字[0-6]*/
function solarWeek(y: number, m: number, d: number) {let date new Date(y, m - 1, d);let week date.getDay();return week;
}const currentDate getCurrent()
// 使用
this.solarWeek(currentDate[0], currentDate[1], 1)
这样我们就获取到了第一天是周几了
4.2 上月日期补齐
关于上月数据获取有一点是需要注意的是那就是如果当前是1月份那么要获取的上上一年度的12月份因此在计算前首先要对当前月份进行确定
// 判断年度
const y date[1] 1 ? date[0] - 1 : date[0];
// 判断月份
const m date[1] 1 ? 12 : date[1] - 1;
接着就是判断需要补齐日期的数量了很简单我们只需要根据周几来判断如果是周六那么就是补齐6天周一到周五加上周日如果是周五那么就是补齐5天周一到周四加上周日 /*** 获取当月前面需补齐的数组*/
beforDays(date: number[], last: number) {const y date[1] 1 ? date[0] - 1 : date[0];const m date[1] 1 ? 12 : date[1] - 1;const arr: dateBase[] [];for (let i 0; i last; i) {arr.push({...});}return arr;
}
这个last就是就是1号的星期也就是需要循环的次数
4.3 下个月日期补齐
接着补齐下个月和上个月计算一样首先要判断当前是不是12月如果是12月那么下个月就是下一年的1月份
const y date[1] 12 ? date[0] 1 : date[0];
const m date[1] 12 ? 1 : date[1] 1;
接着由于我们知道了当前月的天数和上个月补齐的天数那么自然下个月需要补齐多少天也能算出来42-当前月天数-上个月天数下个月补齐天数
/*** 获取当月后面需补齐的数组*/
afterDays(day: dateBase[], date: number[]) {const arr: dateBase[] [];const y date[1] 12 ? date[0] 1 : date[0];const m date[1] 12 ? 1 : date[1] 1;for (let i 1; i 42 - day.length 1; i) {arr.push({...});}return [...day, ...arr];
}
到这里我们就可以获得一个长度为42的数组这个数组代表从上月的倒数某一天到这个月再到下个月正数的某一天一共42天
4.4 转化成二位数组
为什么要转成二位数组原因很简单因为我们的这个日历从布局上来说它就是一个二位数组....一共有6行每行都7格对吧因此需要转一下转的代码也很简单
const dateArray [];
for (let row 0; row 6; row) {dateArray.push(allDate.splice(0, 7));
}
4.5 使用v-for生成日历
基本数据整理完成后只需要通过Vue的v-for指令去批量生成格子即可
template v-ifTBody.lengthdivclasst-calendar-rowv-for(item, index) in TBody:keyindexdivclasst-calendar-colv-for(col, colIdx) in item:keycolIdxCalendarItem:colcol:timeselectedTimechangeTargetDatechangeDate/CalendarItem/div/div
/template
template v-elsediv classno-date抱歉,暂无数据/div
/template
至于每一个格子的样式可以根据需求进行定制化
4.6 农历假期等
真正的日历肯定远不止这些基础数据肯定还有包括农历节日假期等等不同标注这些都可以在计算的时候将当前日期对应的值一并算好在通过v-for渲染的时候将对应的CSS样式渲染上去即可比如在进行数据push的时候可以
arr.push({// 日期title: w - i,// 是否本月isCurrent: false,// 是否节假日isHolidays: DateClass.getHolidays([y, m, w - i]),date: ${y}-${clockFactory(m)}-${clockFactory(w - i)},// 阴历lunars: lun,isNow: false,// 阳历节日如国庆元旦solarDay: DateClass.getSolarDay(m, w - i),// 农历节日如中秋春节端午lunarDay: DateClass.getlunarDay(Number(l[0]), Number(l[1]), Number(l[2])),// 生肖animal: DateClass.getAnimal(Number(l[0])),// 星座astro: DateClass.toAstro(y, m, w - i),// 节气term: getTerm(Number(l[0]), m, w - i)
});
等等都是可以在数据处理的时候一并处理好
五、小结
其实知道了日历的生成原理后居然觉得日历也没有那么难实现就是稍微麻烦了点最终要实现成什么样子还需要根据实际需求而定
