vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > vue使用fullcalendar

vue下使用fullcalendar案例讲解

作者：林深时见鹿7

这篇文章主要介绍了vue下使用fullcalendar及简单案例,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧

ps：我真的感觉自己是个前端了，最近天天在写前端。不过很多复杂逻辑，后台处理起来比较麻烦，所以只让后台提供简单数据，前端封装处理数据确实比较方便！
引子：最近公司要做个人日程管理，故鄙人思前想后，选择了fullcalendar组件。但！官方文档全是英文，对于英语四级都没过的我，真是很心累。只能发扬面向百度编程的优良传统，找了好多案例做出来了。现总结如下：

vue下使用fullcalendar及简单案例

安装

在package.json中引入如下，运行“npm i”

    "@fullcalendar/daygrid": "^5.3.0",
    "@fullcalendar/interaction": "^5.3.0",
    "@fullcalendar/list": "^5.3.0",
    "@fullcalendar/timegrid": "^5.3.0",
    "@fullcalendar/vue": "^5.3.0",

或者直接 “npm install -save *****”
运行报错，多半是因为乱七八糟的依赖版本冲突，要更换依赖版本。对了！安装前请把npm改成阿里云依赖下载，否则卡死。
安装成功的话，在package-lock.json中会有一条记录：

无需再main.js中引入

使用

基本使用

创建vue文件，在script中引入fullcalendar（哪个页面用哪里引）

<template>
   <FullCalendar ref="fullCalendar"></FullCalendar>
</template>
<script>
import FullCalendar from '@fullcalendar/vue'
import dayGridPlugin from '@fullcalendar/daygrid'
import timeGridPlugin from '@fullcalendar/timegrid'
import interactionPlugin from '@fullcalendar/interaction'
import listPlugin from '@fullcalendar/list'
export default {
  //import引入的组件需要注入到对象中才能使用
  components: { FullCalendar }  
}
</script>

此时可以显示一个简单的日历了，但远远不是我们想要的。

注入事件和属性

代码：

<template>
   <FullCalendar ref="fullCalendar" :options="calendarOptions"></FullCalendar>
</template>
<script>
import FullCalendar from '@fullcalendar/vue'
import dayGridPlugin from '@fullcalendar/daygrid'
import timeGridPlugin from '@fullcalendar/timegrid'
import interactionPlugin from '@fullcalendar/interaction'
import listPlugin from '@fullcalendar/list'
export default {
  //import引入的组件需要注入到对象中才能使用
  components: { FullCalendar }  
  data() {
    return {
      calendarOptions: {
        plugins: [dayGridPlugin, timeGridPlugin, interactionPlugin, listPlugin],
        initialView: 'dayGridMonth',
        locale: 'zh',
        firstDay: 1,
        buttonText: {
          today: '今天',
          month: '月',
          week: '周',
          day: '日',
          list: '周列表',
        },
        headerToolbar: {
          left: 'prev,next today',
          center: 'title',
          right: 'dayGridMonth,timeGridWeek,timeGridDay listWeek',
        },
        height: 650,
        validRange: this.validRange,  //设置可显示的总日期范围
        events: [], //背景色 (添加相同时间的背景色时颜色会重叠) 
        datesSet: this.datesSet, //日期渲染；修改日期范围后触发
        eventClick: this.handleEventClick, //点击日程触发
        dateClick: this.handleDateClick, //点击日期触发
        eventDrop: this.calendarEventDropOrResize, //拖动事件触发
        eventResize: this.calendarEventDropOrResize, //缩放事件触发
        displayEventTime: false, //不显示具体时间
      },
      validRange: {
        start: '2021-09-01',
        end: moment().add(6, 'months').format('YYYY-MM-DD'),
      }
    }
  },
   methods: {
    datesSet(info) {   //注意：该方法在页面初始化时就会触发一次
        console.log(info)
        // this.search()  //请求本页数据
        //虚拟数据
        this.calendarOptions.events = [{
              id: 111,
              title: '任务1',
              start: ‘2021-10-01',
              end: ‘2021-10-11'
              color: ‘#ffcc99',
              editable: true, //允许拖动缩放，不写默认就是false
              overlap: true, //允许时间重叠，即可以与其他事件并存，不写默认就是false
          },{
			id: 222,
              title: '任务2',
              start: ‘2021-10-12',
              end: ‘2021-10-20'
              color: ‘#ffcc99',
              editable: true, //允许拖动缩放
		}] 
      },
    handleEventClick(info) {},
    handleDateClick(info){},
    calendarEventDropOrResize(info){}
  }
}
</script>

参数说明：

事件说明：

datesSet：修改日期范围后触发，即点击

这三个按钮时触发eventClick：点击任务时触发dateClick: 点击日期触发eventDrop: 拖动事件触发eventResize: 缩放事件触发

到此这篇关于vue下使用fullcalendar及简单案例的文章就介绍到这了,更多相关vue使用fullcalendar内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:
阅读全文