详细的写了一个日历组件，把遇到的问题整理在这里
目录
antd 的日历组件显示中文自写日历农历一开始打算用 antDesign 的日历组件稍作修改，但我要完成的日历组件需要周日历，现在 antD 没有这个功能，所以只好自己写一个
antd 的日历组件显示中文
import locale from 'antd/lib/calendar/locale/zh_CN.js'
<Calendarfullscreen={false}onPanelChange={this.onPanelChange}locale={locale}/>
自写日历
在网上查找了很多人写的日历，最后参考了这位大佬的写法
/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;}
效果图：
