关于vue-lunar-full-calendar的使用说明

 更新时间:2022年07月28日 08:40:52   作者:岩崎理奈  
这篇文章主要介绍了关于vue-lunar-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",

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。 

相关文章

  • vue3+vant4封装日期时间组件方式(年月日时分秒)

    vue3+vant4封装日期时间组件方式(年月日时分秒)

    这篇文章主要介绍了vue3+vant4封装日期时间组件方式(年月日时分秒),具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10
  • 封装一个更易用的Dialog组件过程详解

    封装一个更易用的Dialog组件过程详解

    这篇文章主要为大家介绍了封装一个更易用的Dialog组件过程详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-05-05
  • Vue实现移动端页面切换效果【推荐】

    Vue实现移动端页面切换效果【推荐】

    这篇文章主要介绍了Vue实现移动端页面切换效果,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-11-11
  • vue proxy 的优势与使用场景实现

    vue proxy 的优势与使用场景实现

    这篇文章主要介绍了vue proxy 的优势与使用场景实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-06-06
  • Vue中实现滚动加载与无限滚动

    Vue中实现滚动加载与无限滚动

    本文主要介绍了Vue中实现滚动加载与无限滚动,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-06-06
  • vue+vuex+axio从后台获取数据存入vuex实现组件之间共享数据

    vue+vuex+axio从后台获取数据存入vuex实现组件之间共享数据

    这篇文章主要介绍了vue+vuex+axio从后台获取数据存入vuex,组件之间共享数据,非常具有实用价值,需要的朋友可以参考下
    2017-04-04
  • Vue 3.0自定义指令的使用入门

    Vue 3.0自定义指令的使用入门

    在 Vue 的项目中,我们经常会遇到 v-if、v-show、v-for 或 v-model 这些内置指令,它们为我们提供了不同的功能。除了使用这些内置指令之外,Vue 也允许注册自定义指令。接下来,将使用Vue 3官方文档自定义指令章节中使用的示例,来一步步揭开自定义指令背后的秘密。
    2021-05-05
  • vue升降版本以及如何查看项目版本

    vue升降版本以及如何查看项目版本

    这篇文章主要给大家介绍了关于vue升降版本以及如何查看项目版本的相关资料,在开发和维护Vue.js应用程序时了解所使用的Vue.js版本非常重要,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2023-12-12
  • vue element封装form表单的实现

    vue element封装form表单的实现

    本文主要介绍了vue element封装form表单的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-06-06
  • 手把手教你使用electron将vue项目打包成exe

    手把手教你使用electron将vue项目打包成exe

    Electron相当于一个浏览器的外壳,可以把现有的vue程序嵌入到壳里面,下面这篇文章主要给大家介绍了关于如何使用electron将vue项目打包成exe的相关资料,需要的朋友可以参考下
    2023-01-01

最新评论