FullCalendar JS 3资源视图自定义列宽：源码修改方案咨询

针对FullCalendar 3版本资源视图无法通过配置自定义列宽的问题，核心需要修改以下两个关键函数：

1. ResourceView类的computeColWidths方法 #

这个方法是资源视图计算列宽度的核心逻辑，默认会将可用宽度均分给所有资源列。你需要修改它以支持基于资源自定义属性的宽度计算：

在fullcalendar.js中搜索ResourceView = View.extend(，找到其中的computeColWidths函数，默认代码大致如下：

computeColWidths: function() {
    var colCnt = this.resourceCnt;
    var width = this.colTotalWidth;
    var colWidth = Math.floor(width / colCnt);
    var remainder = width % colCnt;
    var colWidths = [];
    for (var i=0; i<colCnt; i++) {
        colWidths.push(colWidth + (i < remainder ? 1 : 0));
    }
    return colWidths;
}

修改为支持自定义宽度的逻辑（示例为固定像素宽度，可根据需求调整为比例等）：

computeColWidths: function() {
    var resources = this.resources;
    var totalAvailableWidth = this.colTotalWidth;
    var customWidthList = resources.map(res => res.width);
    var hasCustomWidth = customWidthList.some(w => w != null);

    if (hasCustomWidth) {
        // 计算已设置自定义宽度的总和
        var totalCustomWidth = customWidthList.reduce((sum, w) => sum + (w || 0), 0);
        // 剩余宽度分配给未设置自定义宽度的资源
        var defaultWidthCount = customWidthList.filter(w => w == null).length;
        var defaultWidth = defaultWidthCount > 0 ? Math.floor((totalAvailableWidth - totalCustomWidth) / defaultWidthCount) : 0;
        // 生成最终宽度数组
        return customWidthList.map(w => w || defaultWidth);
    } else {
        // 原有的均分逻辑
        var colCnt = resources.length;
        var colWidth = Math.floor(totalAvailableWidth / colCnt);
        var remainder = totalAvailableWidth % colCnt;
        var colWidths = [];
        for (var i=0; i<colCnt; i++) {
            colWidths.push(colWidth + (i < remainder ? 1 : 0));
        }
        return colWidths;
    }
}

2. ResourceView类的renderResourceHeaders方法 #

修改完宽度计算逻辑后，需要确保渲染资源列头部时应用计算出的宽度。找到renderResourceHeaders函数，在创建列元素的部分，添加宽度设置：

示例修改（找到创建.fc-resource-cell元素的代码，添加宽度样式）：

renderResourceHeaders: function() {
    // ... 原有代码 ...
    var colWidths = this.computeColWidths();
    for (var i=0; i<resources.length; i++) {
        var resource = resources[i];
        var $cell = $('<div class="fc-resource-cell"/>')
            .text(resource.title)
            .width(colWidths[i]) // 添加这一行，应用计算出的宽度
            .appendTo($row);
        // ... 原有代码 ...
    }
    // ... 原有代码 ...
}

额外说明 #

• 在定义资源数据时，可为需要自定义宽度的资源添加width属性（如{ id: 'res1', title: '资源1', width: 250 }）
• 若窗口大小变化，FullCalendar会自动重新调用computeColWidths，无需额外修改resize逻辑
• 所有继承自ResourceView的视图（如resourceDayView、resourceWeekView）都会自动应用此修改

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