日历 fullCalendar 整合农历

上次做了一个需要用到日历组件的项目，在github找到一个比较符合我需求的插件： https://fullcalendar.io/#demos。可以npm引入，也可cdn引入。

其中农历可以通过引入另一个calendar.js文件转化显示，我用的是https://github.com/jjonline/calendar.js。

功能：

1. 把后台返回的可选的节日渲染到日历视图中，即效果图中红色底子的格子。

2. 通过calendar.js将当前日期转换成农历，然后根据calendar.js返回的对象获取农历日期跟新历日期重新渲染月视图。

3. 可根据年份选择器、月份选择器、节日选择器、日历视图，跳转到对应的节日。

4. 进入该页面时，默认勾选的是离"今天"最近的未来节日，因此在sessionStorage里记录这个格子，在日历初始化的时候渲染出来。即效果图中用黄色边框标记的格子。

先上最后的效果图：

calendarInit() {this.calendarEl = document.getElementById('calendar');this.calendar = new FullCalendar.Calendar(this.calendarEl, {views: {dayGridMonth: { //转农历dayCellContent(item) {let mark = sessionStorage.getItem('joinholiday')let _date = new Date(item.date).toLocaleDateString().split('/');let _dateF = calendarChinese.solar2lunar(_date[0], _date[1], _date[2]);if (item.dayNumberText == mark + '日') {return {html: `<p id='selectedHolidy'><label>${_dateF.cDay}</label></p><p><span>${_dateF.IDayCn}</span></p>`}} elsereturn {html: `<p><label>${_dateF.cDay}</label></p><p><span>${_dateF.IDayCn}</span></p>`}}},},initialDate: '', //指定当前日期weekNumberCalculation: 'iso', //周次的显示格式。contentHeight: 365,aspectRatio: 1,locale: 'zh-cn',selectable: false, //不允许用户可以长按鼠标选择多个区域(比如月视图，可以选中多天；日视图可以选中多个小时)events: function(start, callback) {// 高度固定，每月展示42天，从初始第一天往后加上42/2天，看这天是哪个月份，就是哪月。const MIDDLE_DAY = 21;var middleDayGet = new Date(start.startStr).getTime() + (MIDDLE_DAY * 24 * 60 * 60 * 1000);var temp = start.startStr.split('-');var monthTemp = Number(new Date(middleDayGet).getMonth() + 1);var yearTemp = temp[0];if (Number(temp[1]) < 9) {monthTemp = '0' + monthTemp} else if (Number(temp[1]) == 12) {monthTemp = '01'yearTemp = Number(temp[0]) + 1}var monthGet = String(yearTemp) + String(monthTemp);axios.get('/app/tool/getHolidayMonth', {params: {month: monthGet,from: 1,}}).then(doc => {if (doc.status == 200) {var events = [];$(doc.data.return_data.list).each(function(index, parameter) {events.push({classNames: ['holidayEvent'],color: 'FFFFFF', // an option!textColor: 'black', // an option!display: 'background',start: parameter.date,title: parameter.title,// url: '',extendedProps: {department: parameter.id, //专题的id添加到属性},});});callback(events);}}).catch(function(error) { // 请求失败处理console.log(error);});},eventClick: function(info) {let id = info.event.extendedProps.department;window.location.href = `/pc/article/holiday?hid=${id}`;},eventColor: 'red',eventBackgroundColor: '#212121',});this.calendar.render(); // 插件方法},

API文档可参考：https://blog.csdn.net/ymnets/article/details/78661247，我用的版本是最新的v5版本，有些api已经不适用了。

日历 fullCalendar 整合农历相关推荐

FullCalendar 七：FullCalendar应用——整合农历节气和节日
FullCalendar用来做日程管理功能非常强大,但是唯一不足的地方是没有将中国农历历法加进去,今天我将结合实例和大家分享如何将中国农历中的节气和节日整合到FullCalendar中,从而增强其实用 ...
oracle 判断节气,FullCalendar应用——整合农历节气和节日
如果您还不了解日程安排FullCalendar日历的相关知识,请先阅读本站系列文章: 日程安排FullCalendar的应用. HTML 首先是要载入jQuery库和fullcalendar插件. 然 ...
日历组件带农历及事件标记，绑定点击事件
前段时间需要做一个课程日历的记事,还需要带农历,网上查了一下现有的日历带农历的代码分享,整合了一下自己的事件业务逻辑,最终做了这么一个日历组件(农历使用紫金山天文台农历编码1921-2023,有没有大 ...
在Word中利用日历向导查农历
在Word中利用日历向导查农历主要操作步骤如下: 第一步,单击菜单"文件→新建",在"新建文档"窗口中选择"通用模板",马上弹出" ...
vue+js纯手写日历（包含农历，节假日）
vue+js纯手写日历(包含农历,节假日) 使用的js 地址 dataChange.js 插件使用了elementui //完整代码 <template><div><di ...
js日历（包含农历节假日）
原始地址vue封装了个日历组件(包含农历,节日)_m0_49159526的博客-CSDN博客_vue日历插件显示节日的实现样式层级 index.vue <!--* @Description: ...
JS 日历插件实现农历、节气可自定义加班和休假
最近因为项目需求,模仿别人的界面做了一个日历插件.代码有些地方可能写的不好,但功能都实现了.显示对应的农历.节气.天干地支年月日.并支持自定义加班和休假日期.可在IE8(包括)以上浏览器使用(低于IE ...
android万年历编程,Android 日历、Android 农历日历 Android 日历节假日
[实例简介] 昨天实现了一个日历控件,主要包含公历和农历的展示,今天将其完成全部功能,主要包含节假日的展示.二十四节气展示.支持手势滑动显示下一个月.如有实现不合理的地方希望大家提供宝贵的意见. [实 ...
苹果系统中国日历服务器,中国农历Mac版
此前给大家推荐过一款可以显示农历的Mac OS系统软件,但是小编总觉得不大好用,一个是时间不自动更新,第二个是升级版是收费的.今天,小编逛了许久的论坛之后终于找到一个免费.给力的 Mac农历万年历软件 ...

日历 fullCalendar 整合农历

日历 fullCalendar 整合农历相关推荐

最新文章

热门文章