FullCalendar日历组件集成实战(5)

admin2024-05-15  0

背景

有一些应用系统或应用功能,如日程管理、任务管理需要使用到日历组件。虽然Element Plus也提供了日历组件,但功能比较简单,用来做数据展现勉强可用。但如果需要进行复杂的数据展示,以及互动操作如通过点击添加事件,则需要做大量的二次开发。
FullCalendar是一款备受欢迎的开源日历组件,以其强大的功能而著称。其基础功能不仅免费且开源,为开发者提供了极大的便利,仅有少量高级功能需要收费。然而,尽管该组件功能卓越,其文档却相对简洁,导致在集成过程中需要开发者自行摸索与探索,这无疑增加了不少学习和验证的时间成本。
为此,本专栏通过日程管理系统的真实案例,手把手带你了解该组件的属性和功能,通过需求导向的方式,详细阐述FullCalendar组件的集成思路和实用解决方案。
在介绍过程中,我们将重点关注集成要点和注意事项,力求帮助开发者在集成过程中少走弯路,提供有效的避坑指南,从而提升开发效率,更好地利用这款优秀的日历组件。

官网:https://fullcalendar.io/
FullCalendar日历组件集成实战(5),image.png,第1张
环境Vue3+Element Plus+FullCalendar 6.1.11。

使用

调整单元格高度

默认情况下,单元格高度会自动扩展,如下图所示,留下不小的空白,既浪费空间又不美观。
FullCalendar日历组件集成实战(5),image.png,第2张
解决方式就是为高度height属性指定值auto,如下:

// 高度自动调整
height: 'auto'

效果如下:
FullCalendar日历组件集成实战(5),image.png,第3张

月视图中显示事件时间开关

默认情况下,会在事件标题前方显示该事件的开始时间
FullCalendar日历组件集成实战(5),image.png,第4张
如不想要,可以用下面这种方式来取消显示。

 // 视图的一些基本设置
views: {  
  dayGridMonth: {
    //是否显示时间
    displayEventTime: false
  },
  timeGridWeek: {},
  timeGridDay: {},
  listMonth: {}
},

个人认为显示时间还是不错的功能,所以暂时保留,该配置放这里做个备忘。

设置全天属性优化显示

有些任务,我们需要安排一整天,或者好几天,亦或者不想具体安排某天的哪个时间点来做。
这时候起止时间就设置到天,没有到小时的粒度,默认情况下如下显示,占满整天,影响其他任务的展示和查看的直观性。
FullCalendar日历组件集成实战(5),image.png,第5张
这种情况,我们可以使用allDay属性来做优化, 若起止时间均为00:00:00,则设置为allDay属性为true,这样任务就会显示在顶部“全天”区域。
代码如下:

 // 加载数据
    loadData() {
      this.$api.personaltask.task.listWithChildren().then((res) => {
        if (res.data) {
          const eventArray = res.data.map((item) => {
            // 若起止时间均为00:00:00,则设置为allDay属性为true
            let allDay = false
            if (
              item.startTime &&
              item.endTime &&
              item.startTime.substr(11, 8) === '00:00:00' &&
              item.endTime.substr(11, 8) === '00:00:00'
            ) {
              allDay = true
            }
            return {
              id: item.id,
              title: item.name,
              start: item.startTime,
              end: item.endTime,
              allDay: allDay
            }
          })
          this.calendarOptions.events = eventArray
        }
      })
    },

调整后效果如下:
FullCalendar日历组件集成实战(5),image.png,第6张

切换显示全部与未完成

任务的状态有多个,待安排、未开始、进行中、已完成、已超期、已取消、已挂起,对于已完成、已取消这两类,通常会视为已结束,并不需要过多关注,如一直显示在列表中,则会一定程度上影响未结束的任务展现。
我们在头部工具栏添加一个自定义按钮,来控制是否只显示未结束的任务。
添加自定义按钮:

customButtons: {
  changeShowScopeButton: {
      text: '显示全部',
      click: this.changeShowScope
    }
}

在头部工具栏配置自定义按钮

  // 头部显示
  headerToolbar: {
    left: 'today',
    center: 'prevYear,pre title next,nextYear',
    right: 'changeShowScopeButton dayGridMonth,timeGridWeek,timeGridDay,listWeek'
  }

定义变量和方法

   // 显示所有事件
  showAllFlag: false,
  // 事件数据
  eventData: []



  // 变更显示范围
  changeShowScope() {
    this.showAllFlag = !this.showAllFlag
    this.filteData()
  },
  // 筛选数据
  filteData() {
    if (this.showAllFlag) {
      this.calendarOptions.customButtons.changeShowScopeButton.text = '显示未结束'
      this.calendarOptions.events = this.eventData
    } else {
      this.calendarOptions.customButtons.changeShowScopeButton.text = '显示全部'
      this.calendarOptions.events = this.eventData.filter((item) => {
        return (
          item.status === 'IN_PROGRESS' ||
          item.status === 'TO_DO' ||
          item.status === 'EXPIRED' ||
          item.status === 'PENDING' ||
          item.status === 'PAUSED'
        )
      })
    }
  },
  // 加载数据
  loadData() {
    this.$api.personaltask.task.listWithChildren().then((res) => {
      if (res.data) {
        const eventArray = res.data.map((item) => {
          // 若起止时间均为00:00:00,则设置为allDay属性为true
          let allDay = false
          if (
            item.startTime &&
            item.endTime &&
            item.startTime.substr(11, 8) === '00:00:00' &&
            item.endTime.substr(11, 8) === '00:00:00'
          ) {
            allDay = true
          }
          return {
            id: item.id,
            title: item.name,
            start: item.startTime,
            end: item.endTime,
            allDay: allDay,
            status: item.status
          }
        })
        this.eventData = eventArray
        this.filteData()
      }
    })
  }     

默认仅显示未结束的任务,点击按钮可切换至显示全部任务
FullCalendar日历组件集成实战(5),image.png,第7张

去除上一年与下一年按钮

从当前需求出发,任务查看都是当前附近,并不需要上一年与下一年这个大跨度,因此配置头部工具栏,去除上一年与下一年这两个按钮的显示,保留上一个与下一个两个按钮。

// 头部显示
headerToolbar: {
  left: 'today',
  center: 'prev title next',
  right: 'changeShowScopeButton dayGridMonth,timeGridWeek,timeGridDay,listWeek'
},

FullCalendar日历组件集成实战(5),image.png,第8张

开启视图间导航功能

我们在查看月视图时,如果对某一周或某一天的具体日程感兴趣,想进入查看,可以打开官方预置的一个开关,这样周次和日都会启用链接导航功能,点击可进入周视图和日视图。

// 开启视图间导航功能
navLinks: true,

FullCalendar日历组件集成实战(5),image.png,第9张
FullCalendar日历组件集成实战(5),image.png,第10张
同理,周视图、日视图和列表视图,都会开启超链接,进行视图间的切换。
FullCalendar日历组件集成实战(5),image.png,第11张
FullCalendar日历组件集成实战(5),image.png,第12张
FullCalendar日历组件集成实战(5),image.png,第13张

官方提供了预置操作,如果想改变默认的行为,跳转到自定义视图,则可以设置navLinkDayClick和navLinkWeekClick这两个事件。
官网文档:https://fullcalendar.io/docs/date-nav-links。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明原文出处。如若内容造成侵权/违法违规/事实不符,请联系SD编程学习网:675289112@qq.com进行投诉反馈,一经查实,立即删除!