Vue.js集成Full Calendar列头格式、时间展示等功能实现问题咨询

1. 不同视图列头格式配置 #

你可以通过views属性为不同视图单独配置columnHeaderFormat，月视图设置长星期格式，周/日视图设置带日期的缩写格式，配置示例如下：

calendarOptions: {
  // 保留你原有配置
  views: {
    dayGridMonth: { // 月视图专属配置
      columnHeaderFormat: {
        weekday: 'long' // 显示完整星期名：Monday、Tuesday
      }
    },
    timeGrid: { // 周、日视图通用配置
      columnHeaderFormat: {
        weekday: 'short', // 星期缩写：Mon、Tue
        month: '2-digit',
        day: '2-digit',
        omitCommas: true // 去掉逗号，拼接为 Mon 08/11 格式
      }
    }
  }
}

2. 周/日视图仅展示有日程的时间段 #

需要先计算所有日程的最早开始时间和最晚结束时间，动态修改slotMinTime和slotMaxTime属性，实现只展示有事件的时间段：

• 首先在获取eventDates后执行计算逻辑：

// 事件数据更新后调用该方法
calcTimeRange() {
  if (!this.eventDates.length) {
    // 无日程时默认展示08:00-18:00，可自定义
    this.calendarOptions.slotMinTime = '08:00:00'
    this.calendarOptions.slotMaxTime = '18:00:00'
    return
  }
  // 取所有事件最早开始时间
  const minTime = this.eventDates.reduce((prev, curr) => {
    return new Date(curr.start) < new Date(prev.start) ? curr : prev
  }).start.slice(11, 19)
  // 取所有事件最晚结束时间
  const maxTime = this.eventDates.reduce((prev, curr) => {
    return new Date(curr.end) > new Date(prev.end) ? curr : prev
  }).end.slice(11, 19)
  this.calendarOptions.slotMinTime = minTime
  this.calendarOptions.slotMaxTime = maxTime
}

3. 设置默认展示日期 #

直接在calendarOptions中添加initialDate属性即可，支持字符串或Date类型：

calendarOptions: {
  // 保留原有配置
  initialDate: '2024-06-01' // 替换为你需要的默认日期
}

4. 配置事件显示上限 #

添加eventLimit属性即可，支持全局配置或按视图单独配置，超过上限后会显示「+N more」的提示：

calendarOptions: {
  // 保留原有配置
  // 全局配置：所有视图最多显示3个事件
  eventLimit: 3,
  // 也可按视图单独配置，优先级高于全局
  views: {
    dayGridMonth: {
      eventLimit: 2 // 月视图最多显示2个事件
    },
    timeGridWeek: {
      eventLimit: 5 // 周视图最多显示5个事件
    }
  }
}

完整配置参考 #

整合所有配置后的calendarOptions结构如下：

data() {
  return {
    calendarOptions: {
      plugins: [dayGridPlugin, interactionPlugin, listPlugin, timeGridPlugin],
      initialView: 'dayGridMonth',
      initialDate: '2024-06-01', // 新增默认日期
      eventLimit: 3, // 新增全局事件上限
      headerToolbar: {
        left: 'today prev,next',
        center: 'title',
        right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
      },
      events: this.eventDates,
      eventDisplay: 'block',
      displayEventTime: false,
      allDaySlot: false,
      slotMinTime: '08:00:00', // 新增默认最小时间
      slotMaxTime: '18:00:00', // 新增默认最大时间
      views: { // 新增视图专属配置
        dayGridMonth: {
          columnHeaderFormat: {
            weekday: 'long'
          },
          eventLimit: 2
        },
        timeGrid: {
          columnHeaderFormat: {
            weekday: 'short',
            month: '2-digit',
            day: '2-digit',
            omitCommas: true
          },
          eventLimit: 5
        }
      }
    }
  }
}

内容的提问来源于stack exchange，提问作者Akash Kr Barnwal