自写日历（周日历，农历节日节气）

详细的写了一个日历组件，把遇到的问题整理在这里

antd 的日历组件显示中文

import locale from 'antd/lib/calendar/locale/zh_CN.js'

<Calendarfullscreen={false}onPanelChange={this.onPanelChange}locale={locale}
/>

自写日历

在网上查找了很多人写的日历，最后参考了这位大佬的写法
https://blog.csdn.net/liuyuhua666
链接中有几个小地方代码打错了，都是这个方法里的，我还给改成了周日到周六的显示：

// 日期展示文本getDayText(line, weekIndex, weekDay, monthDays, mode) {let year = this.state.year;let month = this.state.month;//                  日 一 二 三 四 五 六// getDay()对应的值： 0  1  2  3  4  5  6let _weekDay = weekDay;// 如果月份的第一天为周日，那么调整该值if (weekDay === 0) {_weekDay = 7;}let number;// 月模式if (mode === 'month') {number = line * 7 + weekIndex - _weekDay + 1;if (number <= 0 ) { // 上一个月// 如果是一月份， 那么上个月就是去年的12月份if (month === 0) {year = year - 1;month = 11;} else {month = month - 1;}// 获取上一个月的总天数let preMonthDays = CalenderUtil.getCurrentMonthDays(year, month);number = preMonthDays + number;} else if (number > monthDays) { // 下个月if (month === 11) {year = year + 1;month = 0;} else {month = month + 1;}number = number - monthDays;}} else { // 周模式const day = this.state.day;number = line * 7 + weekIndex - _weekDay + day;if (number > monthDays && number <= (day + 6)) {if (month === 11) {year = year + 1;month = 0;} else {month = month + 1;}number = number - monthDays;} else if (number < day || number > (day + 6)) {return '';}}return year + '-' + month + '-' + number;}

其他就是样式细节的调整，改完之后的效果图：

农历

使用 solarLunar 库

import solarLunar from 'solarLunar';

自定义方法（节气，节日）：
ps: 注意除夕是春节的前一天而不是腊月三十，比如今年就没有腊月三十

// 农历日期对应节日转化getlunarDayCn = (year_, month_, day_) => {let lunar = solarLunar.solar2lunar(year_, month_ + 1, day_);// console.log(lunar);let JudgeLunar = solarLunar.solar2lunar(year_, month_ + 1, day_ + 1);let { isTerm, term, monthCn, dayCn, cMonth, cDay, ncWeek } = lunarlet showDay = isTerm ? term : dayCn;if (showDay === '初一') {showDay = monthCn}// 判断是否有腊月三十if (JudgeLunar.monthCn === '正月' && JudgeLunar.dayCn === '初一') return '除夕';// 节日const lunarFestivalMap = {'正月_初一' : '春节','正月_十五' : '元宵节','五月_初五' : '端午节','七月_初七' : '七夕节','八月_十五' : '中秋节','九月_初九' : '重阳节'}const solarFestivalMap = {'1.1' : '元旦','3.8' : '妇女节','5.1' : '劳动节','5.4' : '青年节','6.1' : '儿童节','7.1' : '建党节','8.1' : '建军节','9.10': '教师节','10.1': '国庆节','12.25': '圣诞节'}const lunarFestival = lunarFestivalMap[`${monthCn}_${dayCn}`];const solarFestival = solarFestivalMap[`${cMonth}.${cDay}`];// 父亲节母亲节if(cMonth === 5 && cDay > 7 && cDay < 15 && ncWeek === '星期日') return '母亲节';if(cMonth === 6 && cDay > 14 && cDay < 22 && ncWeek === '星期日') return '父亲节';      return lunarFestival ? lunarFestival : solarFestival ? solarFestival : showDay;}

效果图：

自写日历（周日历，农历节日节气）相关推荐

JS 日历插件实现农历、节气可自定义加班和休假
最近因为项目需求,模仿别人的界面做了一个日历插件.代码有些地方可能写的不好,但功能都实现了.显示对应的农历.节气.天干地支年月日.并支持自定义加班和休假日期.可在IE8(包括)以上浏览器使用(低于IE ...
IOS获取农历节日.节气
获取农历节日的算法: +(NSString *)getLunarHoliDayDate:(NSDate *)date{ NSTimeInterval timeInterval_day = float( ...
IOS 获取农历节日节气
扩展了前一篇农历的内容转载请标明来自:http://blog.csdn.net/zhao_yin/ 获取农历节日的算法: [cpp]view plaincopyprint? +(NSString * ...
vue+js纯手写日历（包含农历，节假日）
vue+js纯手写日历(包含农历,节假日) 使用的js 地址 dataChange.js 插件使用了elementui //完整代码 <template><div><di ...
小程序:这是一款可以显示农历和节气、加班，休息的小程序日历插件
小程序:这是一款可以显示农历和节气.加班,休息的小程序日历插件 wxml  <view class="container"> ...
C#实现万年历(农历、节气、节日、星座、星宿、属相、生肖、闰年月、时辰)
C# 万年历农历节气节日星座星宿属相生肖闰年月时辰地址:http://www.cnblogs.com/txw1958/archive/2013/01/27/csharp-calen ...
公历农历显示节日节气星期等万年历
先看效果,如果当日有二十四节气,或者特殊的节日(公历和农历都行),会显示出来这里是日期处理类 public class ChineseCalendar{#region ChineseCalendar ...
js日历（包含农历节假日）
原始地址vue封装了个日历组件(包含农历,节日)_m0_49159526的博客-CSDN博客_vue日历插件显示节日的实现样式层级 index.vue <!--* @Description: ...
C#实现万年历(农历、节气、节日、星座、属相、生肖、闰年等)
// 调用: //DateTime dt = DateTime.Now; //ChineseCalendar cc = new ChineseCalendar(dt); //Console.W ...
在Word中利用日历向导查农历
在Word中利用日历向导查农历主要操作步骤如下: 第一步,单击菜单"文件→新建",在"新建文档"窗口中选择"通用模板",马上弹出" ...

自写日历（周日历，农历节日节气）

目录

antd 的日历组件显示中文

自写日历

农历

自写日历（周日历，农历节日节气）相关推荐

最新文章

热门文章