包含农历、节气、节假日的前端日历

本文介绍了如何在前端项目中创建一个包含农历、节气和传统节假日的日历。通过结合现有资源,如lunar-calendar库,实现了公历与农历的转换,并展示了详细的日历视图。文章内容包括节气计算、公历到农历的转换方法以及整合这些功能来展示完整的日历功能。
摘要由CSDN通过智能技术生成

经手了一个项目,要求前端实现一个带有农历、节假日、节气的前端日历,类似万年历的样子。当时查了一些资料,都是一些零零散散的,要么就只有农历,要么只有传统节假日,还有一些对于节气的判断,各种语言的都有,看的头大。正好项目所需,就把很多东西结合起来,封装了一个dateTransForm.js 这么一个方法。实现效果如下:
在这里插入图片描述
在这里插入图片描述
首先是日历的实现,之前我有写了一篇文章链接地址如下(https://blog.csdn.net/u013262823/article/details/90406953),这篇文章详细解释了如何实现一个如上图不包含农历等信息的前端的日历月视图。

节气计算

//计算节气
function getJQ(yyyy,mm,dd){
   
 var sTermInfo = new Array(0,21208,42467,63836,85337,107014,128867,150921,173149,195551,218072,240693,263343,285989,308563,331033,353350,375494,397447,419210,440795,462224,483532,504758);
 var solarTerm = new Array("小寒","大寒","立春","雨水","惊蛰","春分","清明","谷雨","立夏","小满","芒种","夏至","小暑","大暑","立秋","处暑","白露","秋分","寒露","霜降","立冬","小雪","大雪","冬至");
 var tmp1 = new Date((31556925974.7*(yyyy-1900)+sTermInfo[mm*2+1]
  • 2
    点赞
  • 33
    收藏
    觉得还不错? 一键收藏
  • 6
    评论
评论 6
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值