如何高效使用vue-lunar-full-calendar实现农历日历功能？

本文共计541个文字，预计阅读时间需要3分钟。

目录- Vue-lunar-full-calendar 的使用及效果图- 使用 vue-full-calendar 时报错及解决- Vue-lunar-full-calendar 的使用及效果图- 首先安装：npm install --save vue-lunar-full-calendar- 在 main.js 中全局引入：import LunarFullCalendar from 'vue-lunar-full-calendar'

目录

• vue-lunar-full-calendar的使用
• 效果图
• 使用vue-full-calendar时报错及解决

vue-lunar-full-calendar的使用

效果图

首先安装：

npm install --save vue-lunar-full-calendar

在main.js中全局引入：

import LunarFullCalendar from "vue-lunar-full-calendar"; Vue.use(LunarFullCalendar);

在需要用到的页面引入组件

data() { let self = this; return { events:[], config: { eventLimitText: '更多', lunarCalendar: true,//控制中文日历是否显示为真 locale:'zh-cn',//中文 eventColor: 'white', header: { left: 'prevYear,prev,next,nextYear', center: 'title', right: 'hide,custom, today' }, eventLimit: true, // 一天中显示多少条事件，多了隐藏 firstDay: 0, // 控制周一周日那个在前面 defaultView: 'month', buttonText: { today: '今天', month: '月', week: '周', day: '日' }, //分页方法 viewRender(view, element) { self.viewRender(view, element); }, customButtons: { // 新增按钮 hide: { text: '隐藏农历', click: function () { self.$refs.calendar.fireMethod('option', { lunarCalendar: false }) self.$refs.calendar.fireMethod('option', { header: { left: 'prevYear,prev,next,nextYear', center: 'title', right: 'show,custom, today' } }) } }, show: { text: '显示农历', click: function () { self.$refs.calendar.fireMethod('option', { lunarCalendar: true }) self.$refs.calendar.fireMethod('option', { header: { left: 'prevYear,prev,next,nextYear', center: 'title', right: 'hide,custom, today' } }) } }, }, }, } }

//如果没有点击事件需求 此处可省略 viewRender (view, element) { //获取要查询月份的时间戳 var time = view.calendar.currentDate._i; this.years=this.$moment(time).format('YYYYMM') //initDta为初始化方法 是根据页面需求 调用接口 查询调转日期的方法 this.initData(this.years) },

//日历事件点击事件 eventClick (event, jsEvent, pos) { }, //背景点击事件 dayClick (date, jsEvent, view) { },

详细 可参考fullcalendar文档

使用vue-full-calendar时报错及解决

在使用2.8.1-0版本的vue-full-calendar报了很奇怪的错误：

TypeError: cal.fullCalendar is not a function

经过查阅之后，发现解决方案非常简单，只需要在package.json中增加如下引用：

// 放在dependencies里即可 "fullcalendar": "^3.10.2",

以上为个人经验，希望能给大家一个参考，也希望大家多多支持易盾网络。