如何用jQuery根据事件数量调整FullCalendar周视图列宽

安全阿岳

2026-7-18

FullCalendar 事件重叠问题：按事件数量调整日期列宽解决方案

问题背景

搭建的FullCalendar包含month、twoWeek、agendaDay视图，当某一天同一时段存在多个事件时，事件重叠导致标题和时间无法看清（如6/13周二列）。尝试设置以下参数未解决问题：

overlap: false,
eventOverlap: false,
slotEventOverlap: false,

解决方案：通过jQuery动态调整列宽

核心思路是在视图渲染完成后，统计每列的事件数量，按比例调整对应日期列的宽度，同时适配事件元素宽度，避免重叠拥挤。

修改后的JavaScript代码

var data = [
    {
        title: '全天事件',
        start: '2023-06-01',
        allDay: false
    },
    {
        title:"7000048",
        start:"2023-06-01T21:15:00",
        end:"2023-06-03T02:15:00",
        allDay: false
    },
    {
        title: '长时事件',
        start: '2023-06-07',
        end: '2023-06-07',
        allDay: false
    },
    {
        id: 999,
        title: '重复事件',
        start: '2023-06-09T16:00:00',
        allDay: false
    },
    {
        id: 999,
        title: '重复事件',
        start: '2023-06-16T16:00:00',
        allDay: false
    },
    {
        title: '会议',
        start: '2023-06-11',
        end: '2023-06-11',
        allDay: false
    },
    {
        title: '团队会议',
        start: '2023-06-12T10:30:00',
        end: '2023-06-12T12:30:00',
        allDay: false
    },
    {
        title: '午餐',
        start: '2023-06-12T12:00:00',
        allDay: false
    },
    {
        title: '项目讨论',
        start: '2023-06-12T14:30:00',
        allDay: false
    },
    {
        title: '欢乐时光',
        start: '2023-06-12T17:30:00',
        allDay: false
    },
    {
        title: '晚餐',
        start: '2023-06-12T20:00:00',
        allDay: false
    },
    {
        title: '生日派对',
        start: '2023-06-13T10:30:00',
        end: '2023-06-13T21:30:00',
        allDay: false,
        description: '生日聚会'
    },
    {
        title: '测试事件1',
        start: '2023-06-13T10:30:00',
        end: '2023-06-13T21:30:00',
        allDay: false,
        textColor: 'Yellow',
        borderColor: 'green',
        description: '测试事件'
    },
    {
        title: '测试事件1',
        start: '2023-06-13T10:30:00',
        end: '2023-06-13T21:30:00',
        allDay: false,
        textColor: 'Yellow',
        borderColor: 'green',
        description: '测试事件'
    },
    {
        title: '测试事件1',
        start: '2023-06-13T10:30:00',
        end: '2023-06-13T21:30:00',
        allDay: false,
        textColor: 'Yellow',
        borderColor: 'green',
        description: '测试事件'
    },
    {
        title: '测试事件1',
        start: '2023-06-13T10:30:00',
        end: '2023-06-13T21:30:00',
        allDay: false,
        textColor: 'Yellow',
        borderColor: 'green',
        description: '测试事件'
    },
    {
        title: '测试事件1',
        start: '2023-06-13T10:30:00',
        end: '2023-06-13T21:30:00',
        allDay: false,
        textColor: 'Yellow',
        borderColor: 'green',
        description: '测试事件'
    },
    {
        title: '测试时间',
        start: '2023-06-13T10:30:00',
        end: '2023-06-13T20:30:00',
        allDay: false,
        backgroundColor : 'Yellow',
        textColor: 'red',
        borderColor: 'green',
        description: '测试事件2'
    },
    {
        title: '测试时间4',
        start: '2023-06-13T11:30:00',
        end: '2023-06-13T23:30:00',
        allDay: false,
        backgroundColor : 'orange',
        textColor: 'red',
        borderColor: 'green',
        description: '测试事件3'
    },
    {
        title: '点击跳转',
        url: 'https://google.com/',
        start: '2023-06-28',
        allDay: false
    }
];

$(document).ready(function() {
  var date = new Date();
  var d = date.getDate();
  var m = date.getMonth();
  var y = date.getFullYear();

  $('#calendar').fullCalendar({
    timeZone: 'ET',
    defaultView: 'twoWeek',
    aspectRatio: 1.5,
    header: {
      left: 'prev,next today',
      center: 'title',
      right: 'month, twoWeek, agendaDay'
    },
    defaultDate: '2023-06-16',
    editable: false,
    eventResourceEditable: true,
    dayMaxEvents: true,
    eventLimit: true,
    allDaySlot: false,
    slotMinutes: 120,
    slotDuration: '02:00',
    timeFormat: '',
    contentHeight: 'auto',
    axisFormat: 'h(:mm)tt',
    columnFormat: "dddd \n M/D",
    events: data,
    eventMouseover: function(calEvent, jsEvent) {
      var popup = '<div class="tooltipevent" style="width:200px;height:auto;background:#F0F0F0;color: green;position:absolute;padding:15px;font-size:12px;z-index:10001;border:1px groove red; font-family: Verdana,Arial,sans-serif" >标题: ' +
        calEvent.title + '<br>描述: ' +
        (calEvent.description || '无') + '<br>开始时间: ' +
        calEvent.start.format('YYYY-MM-DD HH:mm') + '<br>结束时间: ' +
        (calEvent.end ? calEvent.end.format('YYYY-MM-DD HH:mm') : '无') + '<br></div>';
      var $tooltip = $(popup).appendTo('body');

      $(this).mousemove(function(e) {
        $tooltip.css({
          top: e.pageY + 10,
          left: e.pageX + 20
        });
      });
    },
    eventMouseout: function(calEvent, jsEvent) {
      $(this).css('z-index', 8);
      $('.tooltipevent').remove();
    },
    views: {
      twoWeek: {
        type: 'agenda',
        duration: {
          weeks: 2
        },
        buttonText: '2周视图',
        rows: 2
      }
    },
    // 视图渲染完成后执行列宽调整
    viewRender: function(view, element) {
      adjustColumnWidths(view);
    },
    // 切换视图时重置样式
    viewDestroy: function(view, element) {
      $('.fc-day-header, .fc-day').css('width', '');
    },
    selectable: true,
    selectHelper: true,
  });

  // 动态调整列宽核心函数
  function adjustColumnWidths(view) {
    // 仅处理agenda类视图（twoWeek、agendaDay）
    if (!view.name.includes('agenda')) return;

    var $dayHeaders = $('.fc-day-header');
    var $dayCells = $('.fc-day');
    var eventCounts = {};

    // 统计每列事件数量
    $('.fc-event').each(function() {
      var $event = $(this);
      var dateStr = $event.data('date') || $event.closest('.fc-day').data('date');
      if (!dateStr) return;
      eventCounts[dateStr] = (eventCounts[dateStr] || 0) + 1;
    });

    // 计算基础宽度比例
    var totalColumns = $dayHeaders.length;
    var baseWidth = 100 / totalColumns;
    var totalAdjustedWidth = 0;

    // 调整日期头部宽度
    $dayHeaders.each(function(index) {
      var dateStr = $(this).data('date');
      var count = eventCounts[dateStr] || 1;
      // 限制最大宽度为基础的3倍，避免布局失衡
      var columnWidth = Math.min(baseWidth * count, baseWidth * 3);
      $(this).css('width', columnWidth + '%');
      totalAdjustedWidth += columnWidth;
    });

    // 同步调整日期单元格宽度
    $dayCells.each(function(index) {
      var dateStr = $(this).data('date');
      var count = eventCounts[dateStr] || 1;
      var columnWidth = Math.min(baseWidth * count, baseWidth * 3);
      $(this).css('width', columnWidth + '%');
    });

    // 调整视图容器总宽度
    $('.fc-view').css('width', totalAdjustedWidth + '%');

    // 均分事件宽度，添加边距避免拥挤
    $('.fc-event').each(function() {
      var dateStr = $(this).data('date') || $(this).closest('.fc-day').data('date');
      var count = eventCounts[dateStr] || 1;
      var eventWidth = (100 / count) - 2; // 减去2%边距
      $(this).css('width', eventWidth + '%');
    });
  }
});

修改后的HTML/CSS代码

<script src="https://cdn.jsdelivr.net/npm/jquery@3/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/moment@2/min/moment.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/fullcalendar@3.10.5/dist/fullcalendar.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fullcalendar@3.10.5/dist/fullcalendar.min.css">
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/cupertino/jquery-ui.css">

<style>
.fc-view-container {
  overflow-x: auto;
  white-space: nowrap;
}
/* 修复事件边距，避免挤在一起 */
.fc-event {
  margin: 1px !important;
  box-sizing: border-box;
}
/* 调整2周视图基础宽度 */
.fc-view.fc-twoWeek-view.fc-agenda-view{
  min-width: 100%;
}
/* 简化提示框样式 */
.tooltipevent {
  border-radius: 4px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}
</style>

<div id='calendar-container'>
  <div id='calendar' style="font-family: Segoe UI-MONOSPACE;"></div>
</div>

关键改动说明

移除重复依赖：删除冲突的jQuery 1.7.2版本，统一使用jQuery 3.x
新增列宽调整逻辑：通过adjustColumnWidths函数统计事件数，动态放大列宽并限制最大值
绑定视图生命周期事件：在视图渲染完成时执行调整，切换视图时重置样式
适配事件宽度：按列内事件数量均分宽度，添加边距提升可读性
优化提示框样式：简化复杂CSS，增强视觉体验

内容的提问来源于stack exchange，提问作者murala sandeep

如何用jQuery根据事件数量调整FullCalendar周视图列宽

问题背景 #

解决方案：通过jQuery动态调整列宽 #

修改后的JavaScript代码 #

修改后的HTML/CSS代码 #

关键改动说明 #

问题背景

解决方案：通过jQuery动态调整列宽

修改后的JavaScript代码

修改后的HTML/CSS代码

关键改动说明