vue-fullcalendar 用法详解 (vue 2.0的日历插件)

vue-fullcalendar 同时被 3 个专栏收录
1 篇文章 0 订阅
1 篇文章 0 订阅
13 篇文章 0 订阅

在这里介绍下vue框架中,vue-fullcalendar插件的使用

讲几个注意的地方:

  1. 首先需要下载vue-fullcalendarnpm:install vue-fullcalendar;
  2. 在vue页面中引用:import FullCalendar from 'vue-fullcalendar';
 <template>
    <div>
       <full-calendar :events="monthData" class="test-fc"
                         first-day='1' locale="fr"
                         @changeMonth="changeMonth"    // 切换月时的事件,可自己定义事件
                         @eventClick="eventClick"      // 点击当天的事件,可自己定义事件
                         @dayClick="dayClick"          // 点击当月的事件,可自己定义事件
                         @moreClick="moreClick"></full-calendar>    // 点击 more, 展示当天所有事件,可自己定义事件
    </div>
    </template>
    <script>
    import { FullCalendar } from 'vue-fullcalendar'
    export default {
      data() {
          return {
            monthData: []
          }
      },
      methods: {
         // 选择月份
          changeMonth (start, end, current) {
           console.log('changeMonth', start.format(), end.format(), current.format())
          },
          // 点击事件
          eventClick (event, jsEvent, pos) {
            console.log('eventClick', event, jsEvent, pos)
          },
          // 点击当天
          dayClick (day, jsEvent) {
             console.log('dayClick', day, jsEvent)
          },
          // 查看更多
          moreClick (day, events, jsEvent) {
            console.log('moreCLick', day, events, jsEvent)
          },
      },
      components: {
          'full-calendar': require('vue-fullcalendar')
      },
    </script>
  1. @changeMonth=“changeMonth” //改变月份
    @eventClick=“eventClick” //事件触发
    @dayClick=“dayClick” //点击某一天
    @moreClick=“moreClick”,//点击更多事件
    在这几个方法中写点击事件,实现与数据库的交互。
  2. 绑定数据

monthData: [
{
title : ‘eeeeeeeee’, // 事件内容
start : ‘2018-12-11’, // 事件开始时间
end : ‘2018-12-30’, // 事件结束时间
cssClass: ‘red’ // 事件的样式 class名(由后台返回数据) red为自己定义的class名
},
{
title : ‘sssss’,
start : ‘2018-12-25’,
end : ‘2018-12-30’,
cssClass: ‘blue’
},
{
title : ‘dddddddd’,
start : ‘2018-12-09’,
end : ‘2018-12-30’,
cssClass: ‘blue’
},
{
title : ‘cccccc’,
start : ‘2018-12-20’,
end : ‘2018-12-30’
cssClass: ‘red’
},
{
title : ‘aaaaaa’,
start : ‘2018-12-01’,
end : ‘2018-12-30’,
cssClass: ‘red’
},
{
title : ‘bbbbbb’,
start : ‘2018-12-05’,
end : ‘2019-1-10’,
cssClass: ‘blue’
} ]

最终效果:在这里插入图片描述
在这里插入图片描述
详情请看原文

  • 0
    点赞
  • 3
    评论
  • 2
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 1024 设计师:白松林 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值