Vue进阶(幺柒贰):日程日历@ fullcalendar/vue应用

举报
SHQ5785 发表于 2021/02/23 20:53:26 2021/02/23
【摘要】 ##    前言在项目实战过程中,需要为项目主页实现日程日历功能,主要包括日程的增删改查。在网上研究一番后,经过对比发现一款比较好用的良心插件`Fullcalendar`。`Fullcalendar`是一个可以创建日历日程管理的开源组件。下面让我们来认识下该日程日历组件的强大吧。本文由以下几个部分组成:1.安装fullcalendar2.简易DEMO代码3.Template中FullCale...

##    前言
在项目实战过程中,需要为项目主页实现日程日历功能,主要包括日程的增删改查。
在网上研究一番后,经过对比发现一款比较好用的良心插件`Fullcalendar`。

`Fullcalendar`是一个可以创建日历日程管理的开源组件。下面让我们来认识下该日程日历组件的强大吧。

本文由以下几个部分组成:

1.安装fullcalendar

2.简易DEMO代码

3.Template中FullCalendar属性注解

4.script中FullCalendar属性方法注解

## 安装Fullcalendar
`Vue`框架下,`fullcalendar`被封装成了几种不同的版本,

- `@ fullcalendar/vue`

- `vue-fullcalendar`

需要注意的是,以上两种用法不一样,不要搞混淆了!

本文重点关注第一种 `@ fullcalendar/vue` 的用法。经实践,第二种实现效果不友好。

首先下载安装相关依赖包。

npm install --save @fullcalendar/vue @fullcalendar/core @fullcalendar/daygrid @fullcalendar/interaction @fullcalendar/timegrid


## 简易DEMO代码

<template>
    <FullCalendar :options="calendarOptions" class="eventDeal-wrap"/>
</template>

<script>
import FullCalendar from '@fullcalendar/vue'
import dayGridPlugin from '@fullcalendar/daygrid'
import interactionPlugin from '@fullcalendar/interaction'
import timeGridPlugin from '@fullcalendar/timegrid'
import '@fullcalendar/core/main.css'
import '@fullcalendar/daygrid/main.css'

export default {
  name: 'DEMO',
  components: {
    FullCalendar
  },
  data () {
    return {
        calendarOptions: {
          // 引入的插件
          plugins: [dayGridPlugin, timeGridPlugin, interactionPlugin],
          // 日历头部按钮位置
          headerToolbar: {
            left: 'prev,next today',
            center: 'title',
            right: 'dayGridMonth, timeGridWeek, timeGridDay'
          },
          // 日历头部按钮中文转换
          buttonText: {
            today: '今天',
            month: '月',
            week: '周',
            day: '天'
          },
          initialView: 'dayGridMonth', // 指定默认显示视图
          locale: 'zh-ch', // 切换语言,当前为中文
          firstDay: '1', // 设置一周中显示的第一天是周几,周日是0,周一是1,以此类推
          weekNumberCalculation: 'ISO', // 与firstDay配套使用
          eventCOlor: '#3d8eec', // 全部日历日程背景色
          timeGridEventMinHeight: '20', // 设置事件的最小高度
          aspectRatio: '1.5', // 设置日历单元格宽高比
          displayEventTime: false, // 是否显示事件时间
          allDaySlot: false, // 周、日视图时,all-day不显示
          eventLimit: true, // 设置月日程,与all-day slot 的最大显示数量,超过的通过弹窗展示
          eventTimeFormat: {
            hour: 'numeric',
            minute: '2-digit',
            hour12: false
          },
          slotLabelFormat: {
            hour: '2-digit',
            minute: '2-digit',
            meridiem: false,
            hour12: false // 设置时间为24小时制
          },
          events: [], // 日程数组
          // 事件
          editable: true, // 是否可以进行(拖动、缩放)修改
          eventStartEditable: true, // Event日程开始时间可以改变,默认为true,若为false,则表示开始结束时间范围不能拉伸,只能拖拽
          eventDurationEditable: true, // Event日程的开始结束时间距离是否可以改变,默认为true,若为false,则表示开始结束时间范围不能拉伸,只能拖拽
          selectable: true, // 是否可以选中日历格
          selectMirror: true,
          selectMinDistance: 0, // 选中日历格的最小距离
          weekends: true,
          navLinks: true, // 天链接
          selectHelper: false,
          selectEventOverlap: false, // 相同时间段的多个日程视觉上是否允许重叠,默认为true,允许
          dayMaxEvents: true,
          dateClick: this.handleDateClick, // 日期点击
          eventsSet: this.handleEvents, // 事件点击
          eventClick: this.handleEventClick, // 日程点击信息展示
          eventDrop: this.handleEventDrop, // 日程拖动事件
          eventResize: this.eventResize // 日程缩放事件
        }
    }
  },
  mounted () {

  },
  created () {

  },
  methods: {
    // 日程保存
      saveEvent (val) {
        let eventsArr = this.calendarOptions.events
        try {
          if (eventsArr.length === 0) {
            eventsArr.push(val)
          } else {
            eventsArr.forEach((item, index, eventsArr) => {
              // 若为修改日程
              if (item.eventID === val.eventID) {
                throw new Error(index)
              }
            })
            // 若为新增日程
            eventsArr.push(val)
          }
        } catch (e) {
          // 若为修改日程
          eventsArr.splice(e.message, 1, val)
        }
      },
      // 日程删除
      deleteEvent (val) {
        let eventsArr = this.calendarOptions.events
        try {
          eventsArr.forEach((item, index, eventsArr) => {
            if (item.eventID === val) {
              throw new Error(index)
            }
          })
        } catch (e) {
          // 删除指定日程
          eventsArr.splice(parseInt(e.message), 1)
        }
      },
      // 日程事件点击
      handleEvents (info) {
        console.log('handleEvents.info:', info)
        // this.currentEvents = events
      },
      handleWeekendsToggle () {
        console.log('handleWeekendsToggle')
        this.calendarOptions.weekends = !this.calendarOptions.weekends
      },
      // 日期点击
      handleDateClick (selectInfo) {
        if (confirm('您是否要在【' + selectInfo.dateStr + '】添加一个新的事件?')) {
          // 父组件直接调用子组件方法
          this.$refs['eventDialogue'].openDialog('add')
          // 父组件直接修改子组件变量
          // this.$refs['eventDialogue'].dialogVisible = true
        }
      },
      // 日程点击信息展示
      handleEventClick (info) {
        console.log('handleEventClick.info:', info)
        info.el.style.borderColor = 'red'
        this.$refs['eventDialogue'].openDialog('view', info)
      },
      // 日程事件触发
      eventClick (info) {
        console.log('eventClick.info:', info)
        info.el.style.borderColor = 'red'
      },
      // 日程拖动事件
      handleEventDrop (info) {
        this.$refs['eventDialogue'].eventFormModel.start = info.event.start
        this.$refs['eventDialogue'].eventFormModel.end = info.event.end
      },
      // 日程缩放事件
      eventResize (info) {
        this.$refs['eventDialogue'].eventFormModel.start = info.event.start
        this.$refs['eventDialogue'].eventFormModel.end = info.event.end
      }
  }
}
</script>
<style>
</style>


以上示例代码注释中已清楚讲述了各参数的具体含义,下面就主要参数进行简单讲解。
`Template`中`FullCalendar`属性注解:
- `defaultView`
表示当前默认使用的是月份视图(`dayGridMonth`),就是看到的是一个月的视图。还有日视图(`dayGridDay`)和周视图(`dayGridWeek`)等。如果安装了`timeGridPlugin`,还会有(`timeGridWeek`, `timeGridDay`)诸如此类的时间视图。

- `locale`
本地化,我们使用中文简体(zh-cn)。

- `firstDay`
一周的第1天,`firstDay=“1”`表示星期一显示在第一个。

- `weekNumberCalculation`
与`firstDay` 配合,设置成`ISO` ,一周第一天为星期一。

`script`中`FullCalendar`属性方法注解:
- `calendarPlugins`
通过`:plugins=“calendarPlugins”`,然后在`calendarPlugins`中定义并引用要使用的功能插件。 `calendarPlugins:[dayGridPlugin, interactionPlugin]`

- `eventTimeFormat`
通过`:eventTimeFormat=“eventTime”`,在`eventTime`中定义事件的格式。

- `header`
日程日历头部布局样式,`left,center,right`,均可使用标题(title),前后按钮(`prev`,`next`), 切换按钮(`today,dayGridMonth,dayGridDay,dayGridWeek`)设置。

- `buttonText`
`header`中按钮默认都是显示的英文,如果要人工手动改成中文,用`:buttonText=“buttonText”`来改,在`buttonText:{today: ‘今天’, month:‘月’}`中建立1对1的映射关系。

- `events`
日程事件的具体内容和数据。

- `dateClick`
通过`@dateClick=“handleDateClick”`绑定函数来触发。指点击日程具体日期单元格时触发的事件。

- `eventClick`
通过`@eventClick=“handleEventClick”`绑定函数来触发。指点击具体日程`events`时触发的事件。

`npm run dev`后,通过 localhost:8080可以看到以下效果:

图像 1.png

**注:日程日历中更丰富、炫酷的效果及事件处理机制详参[链接(英文)](https://fullcalendar.io/docs#toc)、[链接(中文)](https://www.helloweba.net/javascript/445.html)。**

## 拓展阅读
- `fullcalendar`文档
[https://fullcalendar.io/](https://fullcalendar.io/)
[https://fullcalendar.io/docs/vue](https://fullcalendar.io/docs/vue)
[https://www.helloweba.net/search.html?keys=fullcalendar](https://www.helloweba.net/search.html?keys=fullcalendar)
- 项目地址
[https://github.com/fullcalendar/fullcalendar](https://github.com/fullcalendar/fullcalendar)
[https://github.com/fullcalendar/fullcalendar-vue](https://github.com/fullcalendar/fullcalendar-vue)

【版权声明】本文为华为云社区用户原创内容,未经允许不得转载,如需转载请自行联系原作者进行授权。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。