iis服务器助手广告广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >关于vue-lunar-full-calendar的使用说明
  • 342
分享到

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

2024-04-02 19:04:59 342人浏览 八月长安
摘要

目录Vue-lunar-full-calendar的使用效果图 使用vue-full-calendar时报错及解决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",

以上为个人经验,希望能给大家一个参考,也希望大家多多支持编程网。 

--结束END--

本文标题: 关于vue-lunar-full-calendar的使用说明

本文链接: https://www.lsjlt.com/news/165438.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作