日历 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>`
                                    }
                                } else
                                    return {
                                        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 整合农历所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。