如何将fullCalendar年视图改为单列竖排月布局并修复事件显示异常

算力阿峰

2026-7-26

解决fullCalendar竖排月份布局的日期错位问题

问题根源

直接用CSS修改3*4网格为竖排布局时，会破坏fullCalendar内部的日期-单元格映射逻辑。原布局的DOM结构、事件绑定都是基于预设的网格坐标设计的，强行通过CSS改变单元格排列顺序，会导致视觉上的单元格位置与内部存储的日期数据不匹配，最终出现点击日期显示错误的问题。

正确解决方案

不要仅依赖CSS硬改，结合fullCalendar的自定义视图功能实现竖排布局，同时配合针对性的样式调整：

创建自定义竖排年度视图
利用fullCalendar的multiMonth视图类型，通过配置指定每行仅显示一个月，自动生成12行的竖排布局：

document.addEventListener('DOMContentLoaded', function() {
  const calendarEl = document.getElementById('calendar');
  const calendar = new FullCalendar.Calendar(calendarEl, {
    initialView: 'verticalYearView',
    views: {
      verticalYearView: {
        type: 'multiMonth',
        duration: { years: 1 },
        columns: 1, // 每行仅展示1个月份
        rows: 12    // 年度12个月占12行
      }
    },
    dateClick: function(info) {
      console.log('选中日期:', info.dateStr);
    }
    // 其他日历配置（如事件加载、语言等）
  });
  calendar.render();
});

适配布局的CSS调整
针对自定义视图做样式优化，避免破坏原有DOM结构：

/* 月份之间添加间距与分隔线 */
.fc-multimonth-month {
  margin-bottom: 2rem;
  border-bottom: 1px solid #eee;
  padding-bottom: 1rem;
}

/* 让每个月的日历占满容器宽度 */
.fc-multimonth-table {
  width: 100%;
}