前言

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

一、vant日历

UI图如下

vant原图如下

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

开始加元素

html

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

// 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 element || vant 日历加农历、节日、节气，周六日改变颜色相关推荐

vxe-input vue 日期选择组件带农历节日、小圆点提醒
vxe-table vxe-input vue 日期选择组件带农历节日.小圆点提醒默认的日期选择是没有节日信息的可以通过 festival-method 方法自定义节日信息,接收一个对象,用于渲染 ...
vue之实现日历----显示农历，滚动日历监听年月改变
第一次手写日历,遇到很多坑,好在都解决,感谢度娘娘(微笑) gitHub源码(https://github.com/xqtian/calendar)让你满意记得给小星星哦功能包括显示星期公历,农历, ...
IOS获取农历节日.节气
获取农历节日的算法: +(NSString *)getLunarHoliDayDate:(NSDate *)date{ NSTimeInterval timeInterval_day = float( ...
IOS 获取农历节日节气
扩展了前一篇农历的内容转载请标明来自:http://blog.csdn.net/zhao_yin/ 获取农历节日的算法: [cpp]view plaincopyprint? +(NSString * ...
Vue + Element 实现请求加载数据时显示动效（ Loading 加载）
一.版本说明,参考 Element 官网 "vue": "^2.5.2", "axios": "^0.18.1", &q ...
vue element ui 日历教程以及源码已经整理好
Outlook中添加中国农历节日
Outlook中直接添加农历节日非常不方便, Google后找到解决办法如下: 一. ics文件导入法推荐下载如下农历日历: http://www.google.com/calendar/ical/ ...
c语言codeblock简单日历,vue实现简单日历
1 2 3 4 5 6 日历 7 8 * { 9 padding: 0; 10 margin: 0; 11 } 12 13 ul { 14 list-style-type: none; 15 } 16 ...
介绍一款贼美的Vue+Element开源后台管理UI
点击上方好好学java ,选择星标公众号重磅资讯.干货,第一时间送达今日推荐:又一程序员进了ICU:压垮一个家庭,一张结算单就够个人原创100W+访问量博客:点击前往,查看更多前言 Eu ...

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

前言