Vue3 FullCalendar使用并设置 dayGrid 视图的最大事件数

原创已于 2025-07-04 11:07:34 修改 · 196 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #elementui

于 2025-07-04 11:01:54 首次发布

VUE 专栏收录该内容

3 篇文章

订阅专栏

在 Vue3 中使用 FullCalendar 设置 dayGrid 视图的最大事件数

FullCalendar 的 dayGrid 视图默认会显示所有事件，但可以通过配置限制每天显示的事件数量，超出部分以“+n more”的形式折叠。

安装 FullCalendar 及相关插件

确保已安装 FullCalendar 核心库和 dayGrid 插件：

npm install @fullcalendar/core @fullcalendar/daygrid @fullcalendar/vue3

初始化显示事件数

在 Vue3 组件中，以下示例，通过配置dayMaxEvents的值，实现每天显示数量，超出部分“+n more”的形式折叠。

dayMaxEvents：true - 日历自动计算合适的数量，显示“+n more”。

<template>
 <div ref="fullcalendar" class="card"></div>
</template>

<script>
import FullCalendar from '@fullcalendar/vue3'
import dayGridPlugin from '@fullcalendar/daygrid'

const initCalendar = () => {
  Tcalendar.value = null
  Tcalendar.value = new Calendar(fullcalendar.value, {
    plugins: [dayGridPlugin, timeGridPlugin, listPlugin, interactionPlugin],
    initialView: type.value,
    aspectRatio: 2.2, // 宽度比
    locale: "zh-cn",
    handleWindowResize: true,
    //   loading: loading //控制表格加载
    editable: false, // 允许编辑表格
    droppable: false, //允许从外部拖拽进入日历
    eventDurationEditable: false, //控制时间段是否可以拖动
    eventResizableFromStart: false, //控制事件是否可以拖动
    selectable: true, // 允许用户通过单击和拖动来突出显示多个日期或时间段
    firstDay: 1, // 设置一周中显示的第一天是哪天，周日是0，周一是1，类推。
    unselectAuto: true, // 当点击页面日历以外的位置时，是否自动取消当前的选中状态
    //dayMaxEvents: true, //在dayGrid视图中，给定日期内的最大事件数
    dayMaxEvents: 5,
    headerToolbar: false, // 关闭默认日历头部，采取自定义的方式切换日历视图
    // allDaySlot: false, // 关闭全天选项
    allDayText: "全天",
    nowIndicator: true,
    eventMaxStack: 2,
    events: state.infoList, //主要数据
    eventClassNames: function (arg) {
      // 添加自定义class
      return [arg.event.extendedProps.class];
    },
    eventContent: function (arg) {
      // 日历上event显示的样式
      const italicEl = document.createElement("div");
      // 列表才显示
      if (type.value === "listWeek") {
        // 标题
        const nameEl = document.createElement("h4");
        nameEl.setAttribute("class", `h4`);
        nameEl.innerHTML = arg.event.extendedProps.name;
        italicEl.append(nameEl);
        // 岗位
        const text1El = document.createElement("p");
        text1El.innerHTML = arg.event.extendedProps.job;
        italicEl.append(text1El);
        // 面试官
        const text2El = document.createElement("p");
        text2El.innerHTML = "描述：" + arg.event.extendedProps.job;
        italicEl.append(text2El);
      } else {
        // 标题
        const titleEl = document.createElement("div");
        titleEl.setAttribute("class", `calendar-title`);
        const nameEl = document.createElement("span");
        nameEl.setAttribute("style","overflow:hidden;text-overflow: ellipsis;");
        nameEl.innerHTML = arg.event.extendedProps.name;
        titleEl.append(nameEl);
        titleEl.setAttribute("id",arg.event.id);
        // 时间
        const timeEl = document.createElement("span");
        if (arg.event.start && arg.event.end) {
          timeEl.innerHTML =
            dayjs(arg.event.start).format("HH:mm") +
            "-" +
            dayjs(arg.event.end).format("HH:mm");
          if (timeEl.innerHTML !== "00:00-00:00") {
            titleEl.append(timeEl);
          }
        }
        titleEl.addEventListener('click',function(){
          showEditDialog(this.id);
          //handleClick(this.id);
        })

        italicEl.append(titleEl);
        // 企业名称
        const enterpriseEl = document.createElement("div");
        enterpriseEl.setAttribute("class", `calendar-enterprise`);
        enterpriseEl.innerText = arg.event.extendedProps.enterpriseName;
        italicEl.append(enterpriseEl);
      }
      italicEl.setAttribute("class", `calendar-card`);
      return { domNodes: [italicEl] };
    },
    noEventsContent: function () {
      const noEl = document.createElement("div");
      noEl.innerHTML = "暂无日程安排，请安排相关日程";
      return { domNodes: [noEl] };
    },
    // 点击查看时触发
    eventClick: function (info) {
      //handleClick(info);
    },
    // 视图选择日期触发
    select: function (info) {
      //handleSelectDate(info);
    },
    // 拖拽event大小时触发
    eventResize: function (info) {
      debugger
      handleEventResize(info);
    },
    // 拖拽停止时触发
    eventDrop: function (info) {
      debugger
      handleDrap(info);
    },
  });
  Tcalendar.value.render();
};

const getList=async()=>{
  const res = await listWorkPlan(); // 这里加载数据
     
  state.infoList = []
  res.tableData.rows.forEach(item=>{
  
    let tag = ""
    if(item.workStatus==='1') {
      tag = "tag_leave"
    }
    else{
      tag = "tag_" + item.workType.replace(/^0+/, '')
    }
    let enterpriseName = '';
    if(item.enterpriceId){
      item.enterpriceId.forEach(itm => {
        enterpriseName = enterpriseName?enterpriseName+","+itm.enterpriseName:itm.enterpriseName
      })
    }
    let d ={
      "id":item.id,
      title: item.planTitle,
      name: item.planTitle,
      start: item.startTime,
      end: item.endTime,
      class: tag,
      job: "",
      description: item.planContent,
      enterpriseName: enterpriseName,
    }
    state.infoList.push(d);
  })
  initCalendar();
}
onMounted(() => {
  nextTick(() => {
    getList();
  });
});
</script>

自定义文本样式

可以通过 CSS 自定义折叠文本的样式：

.tag_1,
.tag_2,
.tag_3,
.tag_4,
.tag_leave,
.tag_work_overtime,
.tag_99{
  border-radius: 20px;
}
.tag_1 {
  background-color: #d9ecff;
}
.tag_2 {
  background-color: #a0cfff;
}
.tag_3 {
  background-color: #79bbff;
}
.tag_4{
  background-color: #409eff;
}
.tag_99{
  background-color: #337ecc;
}
.tag_leave{
  background-color: #f56c6c;
}
.tag_work_overtime{
  background-color: #1ab394;
}