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>
  • 参数说明:
  1. plugins::绑定的控件
  2. initialView:‘dayGridMonth’ 默认显示视图,月视图
  3. locale:‘zh’ 国际化,中文
  4. firstDay:1 星期的第一列显示,周一(0周日 1周一 2周二…)
  5. buttonText:buttonText 按钮文本
  6. headerToolbar:header 头部工具条
    在这里插入图片描述
  7. height:日历高度
  8. validRange:validRange 全局日期范围;超出范围按钮会禁用
  • 数据来源:
  1. events: [] 日程数据存放在这里,使用this.calendarOptions.events调用
  • 事件说明:
  1. datesSet:修改日期范围后触发,即点击在这里插入图片描述这三个按钮时触发
  2. eventClick:点击任务时触发
  3. dateClick: 点击日期触发
  4. eventDrop: 拖动事件触发
  5. eventResize: 缩放事件触发

其他的事件和属性以后用到再来补充!!

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐