用Vue完成fullcalendar增删改查

前言:

fullcalendar的官网:https://fullcalendar.io/

Vue2项目的地址:https://github.com/fullcalendar/fullcalendar-example-projects.git

将下载好的文件cd 到vue目录下。

npm i     //下载好相关的依赖

启动的命令

npm run  start   //启动项目

启动成功之后的页面

解析:这个项目是有增加和修改的功能的。

一.增加

1.图示:

2.代码：

配置的事件

  select: this.handleDateSelect

    handleDateSelect(selectInfo) {

        let title = prompt('Please enter a new title for your event')

        let calendarApi = selectInfo.view.calendar

        calendarApi.unselect() // clear date selection

        if (title) {

          calendarApi.addEvent({

            id: createEventId(),

            title,

            start: selectInfo.startStr,

            end: selectInfo.endStr,

            allDay: selectInfo.allDay

          })

        }

      },

二.删除

配置的事件

 eventClick: this.handleEventClick,

 handleEventClick(clickInfo) {

      if (confirm(`Are you sure you want to delete the event '${clickInfo.event.title}'`)) {

        clickInfo.event.remove()

      } },

三.修改

这里面的代码是通过一个赋值来调用this.clickInfo.event.setProp("title", title)。所以不用调用里面的api。

     let title=prompt(‘请输入要修改的标题’)

     this.clickInfo.event.setProp("title", title);

       this.$message({

          message: '修改成功',

          type: 'success'

        });

         this.dialogFormVisible=fals

        // 设置编辑过后的背景颜色

        this.clickInfo.event.setProp("backgroundColor", "green");

四.查看

下载

npm    i    tippy

 配置的事件

 eventMouseEnter:this.mouseover,

// 悬浮样式

import tippy from ".js";

import 'tippy.js/dist/tippy.css';

import 'tippy.js/themes/light.css';

import 'tippy.js/animations/scale.css';

 mouseover:function (info) {

   console.log(info);

         tippy(info.el, {

                  content:info.event.title,

                  animation: 'scale',//显示动画

                  // theme:'light'//显示主题

            });

          },

五.小技巧

通过以上的代码可以发现一个问题

handleDateSelect(selectInfo) {

      this.dialogFormVisible=true

      this.selectInfo = selectInfo

    },

新增事件的参数:selectInfo,

如果想要在自定义事件使用这个selectInfo,可以进行赋值 this.selectInfo = selectInfo

编辑事件的参数:clickInfo

    handleEventClick(clickInfo) {

    // 点击出现弹窗

    this.dialogFormVisible=true

    this.clickInfo= clickInfo

  }

或者: this.clickInfo= clickInfo

具体其它的怎么用,可以查看文档。