vue下使用fullcalendar及简单案例

最新推荐文章于 2024-07-23 11:18:48 发布

林深时见鹿7

最新推荐文章于 2024-07-23 11:18:48 发布

阅读量1.4w

点赞数 6

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/qq_41460077/article/details/121158394

版权

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

vue下使用fullcalendar及简单案例

使用版本：5.3.0
效果图

安装

在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>