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

经手了一个项目，要求前端实现一个带有农历、节假日、节气的前端日历，类似万年历的样子。当时查了一些资料，都是一些零零散散的，要么就只有农历，要么只有传统节假日，还有一些对于节气的判断，各种语言的都有，看的头大。正好项目所需，就把很多东西结合起来，封装了一个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]*60000)+Date.UTC(1900,0,6,2,5));var tmp2 = tmp1.getUTCDate();var solarTerms = "";if (tmp2==dd)solarTerms = solarTerm[mm*2+1];tmp1 = new Date((31556925974.7*(yyyy-1900)+sTermInfo[mm*2]*60000)+Date.UTC(1900,0,6,2,5));tmp2= tmp1.getUTCDate();if (tmp2==dd)solarTerms = solarTerm[mm*2];return solarTerms;
}

公历转农历

下面的是搜的一些如何处理公历转农历的一些关键东西，只是粘贴了部分：

let lunarYearArr = [0x0b557, //19490x06ca0, 0x0b550, 0x15355, 0x04da0, 0x0a5b0, 0x14573, 0x052b0, 0x0a9a8, 0x0e950, 0x06aa0, //1950-19590x0aea6, 0x0ab50, 0x04b60, 0x0aae4, 0x0a570, 0x05260, 0x0f263, 0x0d950, 0x05b57, 0x056a0, //1960-19690x096d0, 0x04dd5, 0x04ad0, 0x0a4d0, 0x0d4d4, 0x0d250, 0x0d558, 0x0b540, 0x0b6a0, 0x195a6, //1970-19790x095b0, 0x049b0, 0x0a974, 0x0a4b0, 0x0b27a, 0x06a50, 0x06d40, 0x0af46, 0x0ab60, 0x09570, //1980-19890x04af5, 0x04970, 0x064b0, 0x074a3, 0x0ea50, 0x06b58, 0x055c0, 0x0ab60, 0x096d5, 0x092e0, //1990-19990x0c960, 0x0d954, 0x0d4a0, 0x0da50, 0x07552, 0x056a0, 0x0abb7, 0x025d0, 0x092d0, 0x0cab5, //2000-20090x0a950, 0x0b4a0, 0x0baa4, 0x0ad50, 0x055d9, 0x04ba0, 0x0a5b0, 0x15176, 0x052b0, 0x0a930, //2010-20190x07954, 0x06aa0, 0x0ad50, 0x05b52, 0x04b60, 0x0a6e6, 0x0a4e0, 0x0d260, 0x0ea65, 0x0d530, //2020-20290x05aa0, 0x076a3, 0x096d0, 0x04afb, 0x04ad0, 0x0a4d0, 0x1d0b6, 0x0d250, 0x0d520, 0x0dd45, //2030-20390x0b5a0, 0x056d0, 0x055b2, 0x049b0, 0x0a577, 0x0a4b0, 0x0aa50, 0x1b255, 0x06d20, 0x0ada0, //2040-20490x14b63, 0x09370, 0x049f8, 0x04970, 0x064b0, 0x168a6, 0x0ea50, 0x06b20, 0x1a6c4, 0x0aae0, //2050-20590x0a2e0, 0x0d2e3, 0x0c960, 0x0d557, 0x0d4a0, 0x0da50, 0x05d55, 0x056a0, 0x0a6d0, 0x055d4, //2060-20690x052d0, 0x0a9b8, 0x0a950, 0x0b4a0, 0x0b6a6, 0x0ad50, 0x055a0, 0x0aba4, 0x0a5b0, 0x052b0, //2070-20790x0b273, 0x06930, 0x07337, 0x06aa0, 0x0ad50, 0x14b55, 0x04b60, 0x0a570, 0x054e4, 0x0d160, //2080-20890x0e968, 0x0d520, 0x0daa0, 0x16aa6, 0x056d0, 0x04ae0, 0x0a9d4, 0x0a2d0, 0x0d150, 0x0f252, //2090-20990x0d520 //2100],lunarMonth = ['正', '二', '三', '四', '五', '六', '七', '八', '九', '十', '冬', '腊'],lunarDay = ['一', '二', '三', '四', '五', '六', '七', '八', '九', '十', '初', '廿'],tianGan = ['甲', '乙', '丙', '丁', '戊', '己', '庚', '辛', '壬', '癸'],diZhi = ['子', '丑', '寅', '卯', '辰', '巳', '午', '未', '申', '酉', '戌', '亥'];

公历转农历的方法有很多，一开始参照着写了一下，功能也是能实现。后来还是查询下npm里面有没有的类似的包已经实现了类似的功能，后来果真发现了一个lunar-calendar这个npm包，已经实现了农历转公历，并且包含了传统节假日，非常简单直接cnpm i lunar-calendar --save 即可。

整合lunar-calendar和getJQ （实现农历、节假日、节气展示）

let LunarCalendar = require( "lunar-calendar")export function sloarToLunar(sy, sm, sd) {let jqStr = getJQ(sy,sm,sd) // 获取节气信息let lsStr = LunarCalendar.solarToLunar(sy,sm+1,sd).lunarFestival ?   LunarCalendar.solarToLunar(sy,sm+1,sd).lunarFestival :  LunarCalendar.solarToLunar(sy,sm+1,sd).lunarDayName //获取农历以及节假日信息，并做优先级判断return {lunarDay: jqStr ?  jqStr : lsStr }
}

实现一个农历、节气、节假日的前端日历就这样完成啦。

包含农历、节气、节假日的前端日历相关推荐

vue+js纯手写日历（包含农历，节假日）
vue+js纯手写日历(包含农历,节假日) 使用的js 地址 dataChange.js 插件使用了elementui //完整代码 <template><div><di ...
fullCalendar改造计划之带农历节气节假日的万年历
计划着要做一款万年历,作为自己小项目的便民功能. 作为一枚"资深"业余前端,本想着网上应该有现成的代码可用,一顿猛搜之后,倒是确实搜到几个,但是一看功能,跟我想的不一样:再看代码, ...
fullCalendar改造计划之带农历节气节假日的万年历(转)
http://feifei.im/archives/168 计划着要做一款万年历,作为自己小项目的便民功能. 作为一枚"资深"业余前端,本想着网上应该有现成的代码可用,一顿猛搜之后 ...
js日历（包含农历节假日）
原始地址vue封装了个日历组件(包含农历,节日)_m0_49159526的博客-CSDN博客_vue日历插件显示节日的实现样式层级 index.vue <!--* @Description: ...
电脑桌面日历云便签怎么通过日历查看节假日和农历节气？
一.打开Windows电脑桌面日历云便签,进入便签主界面: 二.点击主界面右上角的日历按钮,如开启了顶部简化模式,可在右上角的设置中找到"日历"功能并点击,打开便签日历页面: 三. ...
element ui 日历空控件添加农历节气和家假日
背景: 按照客户需求,需要在日历控件上添加农历和节气 ,但是element ui控件中无弄里控件只能引入外部js来完成该功能, 1.引入calendar.js 2.调用方法显示农历 2.1 // 公 ...
在win8日历显示农历和节假日
农历是中国长期采用的一种传统历法,也是最早使用的历法,是非常重要的,所以在Windows 8 Metro日历中显示农历和节假日是很有必要的,下面Win8迷教你如何在Windows 8 日历添加农历和节 ...
android 横向的日历,Andorid 日历控件库，可左右滑动，显示公历，农历，节假日等功能...
封面图: demo效果图源码目录结构 Features 日历左右滑动. 显示阳历,农历,节假日和二十四节气实现对某月日期的单选或者多选. 使用步骤 Gradle Dependency Add th ...
FullCalendar 七：FullCalendar应用——整合农历节气和节日
FullCalendar用来做日程管理功能非常强大,但是唯一不足的地方是没有将中国农历历法加进去,今天我将结合实例和大家分享如何将中国农历中的节气和节日整合到FullCalendar中,从而增强其实用 ...
oracle 判断节气,FullCalendar应用——整合农历节气和节日
如果您还不了解日程安排FullCalendar日历的相关知识,请先阅读本站系列文章: 日程安排FullCalendar的应用. HTML 首先是要载入jQuery库和fullcalendar插件. 然 ...

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

节气计算

公历转农历

整合lunar-calendar和getJQ （实现农历、节假日、节气展示）

包含农历、节气、节假日的前端日历相关推荐

最新文章

热门文章