Vue3?FullCalendar使用并設置dayGrid視圖的最大事件數(shù)過程

更新時間：2025年08月01日 09:50:57 作者：zhoxier

FullCalendar?dayGrid視圖可通過dayMaxEvents配置限制每日事件數(shù)量,超出部分折疊顯示為“+nmore”,設置為true時自動計算,數(shù)字則手動限制,點擊展開查看全部事件,適用于月/周視圖,支持CSS自定義折疊文本樣式

安裝 FullCalendar 及相關插件

確保已安裝 FullCalendar 核心庫和 dayGrid 插件：

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

初始化顯示事件數(shù)

在 Vue3 組件中，以下示例，通過配置dayMaxEvents的值，實現(xiàn)每天顯示數(shù)量，超出部分“+n more”的形式折疊。

dayMaxEvents：true - 日歷自動計算合適的數(shù)量，顯示“+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, // 當點擊頁面日歷以外的位置時，是否自動取消當前的選中狀態(tài)
    //dayMaxEvents: true, //在dayGrid視圖中，給定日期內(nèi)的最大事件數(shù)
    dayMaxEvents: 5,
    headerToolbar: false, // 關閉默認日歷頭部，采取自定義的方式切換日歷視圖
    // allDaySlot: false, // 關閉全天選項
    allDayText: "全天",
    nowIndicator: true,
    eventMaxStack: 2,
    events: state.infoList, //主要數(shù)據(jù)
    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);
        // 企業(yè)名稱
        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] };
    },
    // 點擊查看時觸發(fā)
    eventClick: function (info) {
      //handleClick(info);
    },
    // 視圖選擇日期觸發(fā)
    select: function (info) {
      //handleSelectDate(info);
    },
    // 拖拽event大小時觸發(fā)
    eventResize: function (info) {
      debugger
      handleEventResize(info);
    },
    // 拖拽停止時觸發(fā)
    eventDrop: function (info) {
      debugger
      handleDrap(info);
    },
  });
  Tcalendar.value.render();
};

const getList=async()=>{
  const res = await listWorkPlan(); // 這里加載數(shù)據(jù)
     
  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;
}