如何在FullCalendar Vue3的dayGridMonth模式下设置显示天数

内置的dayGridMonth视图会强制渲染整个月的所有周（包含跨月的前后几周），所以visibleRange、dayCount这类属性对它不生效。要实现自定义天数显示，你需要创建一个基于dayGrid的自定义视图，而非使用默认的dayGridMonth。

方法一：自定义dayGrid视图并控制显示天数 #

在calendarOptions中添加views配置，创建自定义视图，可通过dayCount指定固定显示天数，或用visibleRange精确控制起止日期：

const calendarOptions = {
  // ... 保留原有配置
  initialView: 'customDayGrid', // 替换为自定义视图名称
  // 可选：用visibleRange精准控制起止日期
  visibleRange: {
    start: "2020-03-22",
    end: "2020-03-25",
  },
  views: {
    customDayGrid: {
      type: 'dayGrid',
      // 若不需要动态范围，可替换visibleRange为dayCount:4
      // dayCount: 4,
      dayHeaders: false, // 继承原有配置
      dayMaxEvents: 2 // 继承原有配置
    }
  },
}

修改后的完整核心代码 #

const calendarOptions = {
  navLinks: true,
  dayHeaders: false,
  dayMaxEvents: 2,
  editable: true,
  selectable: true,
  weekends: true,
  allDay: true,
  plugins: PLUGINS,
  initialView: "customDayGrid", // 切换到自定义视图
  visibleRange: {
    start: "2020-03-22",
    end: "2020-03-25",
  },
  views: {
    customDayGrid: {
      type: 'dayGrid'
    }
  },
  datesSet: onDateChange,
  headerToolbar: {
    start: "",
    center: "",
    end: "",
  },
  events: [
    {
      title: "Lorem ipsum dolor sit amet consectetur.",
      start: "2024-02-06",
      backgroundColor: CALENDER_EVENT_BG,
      extendedProps: {
        eventType: "Calendar notes",
      },
    },
    {
      title: "Lorem ipsum dolor sit amet consectetur.",
      start: "2024-02-06",
      backgroundColor: CALENDER_EVENT_BG,
      extendedProps: {
        eventType: "Calendar notes",
      },
    },
    {
      title: "Lorem ipsum dolor sit amet consectetur.",
      start: "2024-02-06",
      backgroundColor: CALENDER_EVENT_BG,
      extendedProps: {
        eventType: "Calendar notes",
      },
    },
  ]
};

补充：CSS隐藏法（不推荐） #

如果不想自定义视图，也可以通过datesSet事件给非目标日期的单元格添加隐藏样式，但这种方法依赖FullCalendar的DOM结构，版本更新可能失效：

const onDateChange = (payload) => {
  startDate.value = payload.startStr;
  const targetStart = new Date('2020-03-22');
  const targetEnd = new Date('2020-03-25');
  
  document.querySelectorAll('.fc-daygrid-day').forEach(cell => {
    const cellDate = new Date(cell.dataset.date);
    cell.style.display = (cellDate >= targetStart && cellDate <= targetEnd) ? '' : 'none';
  });
};

内容的提问来源于stack exchange，提问作者Nik Holster