vue element || vant 日历加农历、节日、节气，周六日改变颜色

前言

vue项目里产品要求实现日历加农历、节日、节气，周六日改变颜色 ，文章里会举两个例子（element and vant ） ，仔细看完就明白是怎么回事了

一、vant日历

UI图如下

vant原图如下

官方并 无 农历显示的介绍
日历区域可上下滑动， 故左右控制月份按钮去掉 ，且以平铺的形式展示

开始加元素

html

<van-calendar
     ref="calendars"
     :poppable="false"
     :default-date="defaultDate"
     :min-date="minDate"
     :max-date="maxDate"
     :style="{ height: '450px' }"
     :formatter="formatter"
     @month-show="getNowMonth"
   >
</van-calendar>

js

// Vant日历日期添加法定节假日以及24节气
    formatter(day) {
   
   
      const _time = new Date(day.date);
      const y = _time.getFullYear();
      const m = _time.getMonth() + 1;
      const d = _time.getDate();
      const w = _time.getDay();
      const info = Calendar.solar2lunar(y, m, d);
      //   改变周六周日显示颜色
      if (w === 0 || w === 6) {
   
   
        day.className = "weekendRed";
      }
      var mm = m;
      mm = m < 10 ? "0" + m : m;
      var dd = d;
      dd = d < 10 ? "0" + d : d;
      var nowDate = y + "-" + mm + "-" + dd;
      this.dutyList.forEach((item) => {
   
   
        if (item.dutyDate == nowDate) {
   
   
          if (item.dutyPeriod == "白班") {
   
   
            day.topInfo = "白";
          } else if (item.dutyPeriod == "夜班") {
   
   
            day.topInfo = "夜";
          }
        }
      });
      //   优先级:节日>节气>农历
      if (info.festival != null && info.festival != "") {
   
   
        day.bottomInfo = info.festival;
      } else if (info.Term != null && info.Term != "") {
   
   
        day.bottomInfo = info.Term;
      } else if (info.IDayCn != null && info.IDayCn != "") {
   
   
        day.bottomInfo = info.IDayCn;
      }
      return day;
    },

但是vant的month-show方法是有问题的 , 官网介绍如下

实际上,他只在第一次进入可视区域时触发 , 如果第二次进入 也就是鼠标回滚的时候是不触发的 , 查看源码就能发现问题所在


有兴趣的可以去提提Issues
目前我使用的是2.12.21版本 还没解决这个问题

二、基于Vue的农历日历面板

Demo链接

作者原文链接

😊 基于 vue 2.0 开发的轻量，高性能日历组件；
😘 支持农历，节气，假日显示；
😍 原生 js 开发，无第三方库；
😂 支持现代浏览器(IE >= 9)；
👍 感谢calendar.js；

三、element-ui 组件 el-calendar 农历显示

作者原文链接

最后总结

现在大多数都是在calendar.js使用上实现的农历、节日、节气 , 在使用上要注意调用的时候传入的日期格式是否和calendar.js里定义的格式相同

日历数据是1900年至2100年区间农历与公历的javascript库；来源于香港天文台

1900年至2100年公历、农历互转Js代码

GitHub项目地址

附上calendar.js源码

/**
* @1900-2100区间内的公历、农历互转
* @charset UTF-8
* @Author  [email protected]
* @Time    2014-7-21
* @Time    2016-8-13 Fixed 2033hex、Attribution Annals
* @Time    2016-9-25 Fixed lunar LeapMonth Param Bug
* @Time    2017-7-24 Fixed use getTerm Func Param Error.use solar year,NOT lunar year
* @Version 1.0.3
* @公历转农历：calendar.solar2lunar(1987,11,01); //[you can ignore params of prefix 0]
* @农历转公历：calendar.lunar2solar(1987,09,10); //[you can ignore params of prefix 0]
*/
 var calendar = {
   
   

    /**
      * 农历1900-2100的润大小信息表
      * @Array Of Property
      * @return Hex
      */
    lunarInfo:[0x04bd8,0x04ae0,0x0a570,0x054d5,0x0d260,0x0d950,0x16554,0x056a0,0x09ad0,0x055d2,//1900-1909
            0x04ae0,0x0a5b6,0x0a4d0,0x0d250,0x1d255,0x0b540,0x0d6a0,0x0ada2,0x095b0,0x14977,//1910-1919
            0x04970,0x0a4b0,0x0b4b5,0x06a50,0x06d40,0x1ab54,0x02b60,0x09570,0x052f2,0x04970,//1920-1929
            0x06566,0x0d4a0,0x0ea50,0x16a95,0x05ad0,0x02b60,0x186e3,0x092e0,0x1c8d7,0x0c950,//1930-1939
            0x0d4a0,0x1d8a6,0x0b550,0x056a0,0x1a5b4,0x025d0,0x092d0,0x0d2b2,0x0a950,0x0b557,//1940-1949
            0x06ca0,0x0b550,0x15355,0x04da0,0x0a5b0,0x14573,0x052b0,0x0a9a8,0x0e950,0x06aa0,//1950-1959
            0x0aea6,0x0ab50,0x04b60,0x0aae4,0x0a570,0x05260,0x0f263,0x0d950,0x05b57,0x056a0,//1960-1969
            0x096d0,0x04dd5,0x04ad0,0x0a4d0,0x0d4d4,0x0d250,0x0d558,0x0b540,0x0b6a0,0x195a6,//1970-1979
            0x095b0,0x049b0,0x0a974,0x0a4b0,0x0b27a,0x06a50,0x06d40,0x0af46,0x0ab60,0x09570,//1980-1989
            0x04af5,0x04970,0x064b0,0x074a3,0x0ea50,0x06b58,0x05ac0,0x0ab60,0x096d5,0x092e0,//1990-1999
            0x0c960,0x0d954,0x0d4a0,0x0da50,0x07552,0x056a0,0x0abb7,0x025d0,0x092d0,0x0cab5,//2000-2009
            0x0a950,0x0b4a0,0x0baa4,0x0ad50,0x055d9,0x04ba0,0x0a5b0,0x15176,0x052b0,0x0a930,//2010-2019
            0x07954,0x06aa0,0x0ad50,0x05b52,0x04b60,0x0a6e6,0x0a4e0,0x0d260,0x0ea65,0x0d530,//2020-2029
            0x05aa0,0x076a3,0x096d0,0x04afb,0x04ad0,0x0a4d0,0x1d0b6,0x0d250,0x0d520,0x0dd45,//2030-2039
            0x0b5a0,0x056d0,0x055b2,0x049b0,0x0a577,0x0a4b0,0x0aa50,0x1b255,0x06d20,0x0ada0,//2040-2049
            /**Add By [email protected]**/
            0x14b63,0x09370,0x049f8,0x04970,0x064b0,0x168a6,0x0ea50, 0x06b20,0x1a6c4,0x0aae0,//2050-2059
            0x092e0,0x0d2e3,0x0c960,0x0d557,0x0d4a0,0x0da50,0x05d55,0x056a0,0x0a6d0,0x055d4,//2060-2069
            0x052d0,0x0a9b8,0x0a950,0x0b4a0,0x0b6a6,0x0ad50,0x055a0,0x0aba4,0x0a5b0,0x052b0,//2070-2079
            0x0b273,0x06930,0x07337,0x06aa0,0x0ad50,0x14b55,0x04b60,0x0a570,0x054e4,0x0d160,//2080-2089
            0x0e968,0x0d520,0x0daa0,0x16aa6,0x056d0,0x04ae0,0x0a9d4,0x0a2d0,0x0d150,0x0f252,//2090-2099
            0x0d520],//2100

    /**
      * 公历每个月份的天数普通表
      * @Array Of Property
      * @return Number
      */
    solarMonth:[31,28,31,30,31,30,31,31,30,31,