日历 fullCalendar 整合农历

妖狐艹你老母 2022-12-22 09:00 272阅读 0赞

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

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

功能：

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

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

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

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

先上最后的效果图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xha2Vzb24_size_16_color_FFFFFF_t_70][]

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: `<label>${_dateF.cDay}</label>${_dateF.IDayCn}`
 }
 } else
 return {
 html: `<label>${_dateF.cDay}</label>${_dateF.IDayCn}`
 }
 }
 },
 },
 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][https_blog.csdn.net_ymnets_article_details_78661247]，我用的版本是最新的v5版本，有些api已经不适用了。

[https_fullcalendar.io_demos]: https://fullcalendar.io/#demos
[https_github.com_jjonline_calendar.js]: https://github.com/jjonline/calendar.js
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xha2Vzb24_size_16_color_FFFFFF_t_70]: /images/20221120/0711616336c844fc8bf0a5257459eb61.png
[https_blog.csdn.net_ymnets_article_details_78661247]: https://blog.csdn.net/ymnets/article/details/78661247