如何为Dojox Calendar设置列最小宽度？

我之前也碰到过Dojox Calendar这个列宽被过度压缩的糟心事，尤其是列数多的时候，内容完全看不清！好在它支持多种方式设置列的最小宽度，给你分享几个实用方案：

1. 用CSS直接锁定最小列宽 #

Dojox Calendar的列元素一般带有dojoxCalendarColumn类，直接写CSS就能强制设置最小宽度，还能防止被压缩：

.dojoxCalendarColumn {
    min-width: 80px; /* 替换成你需要的最小宽度数值 */
    flex-shrink: 0; /* 这个属性能阻止列被过度挤压 */
}

如果只需要针对特定视图（比如月视图）生效，还可以精准定位：

.dojoxCalendarMonthView .dojoxCalendarColumn {
    min-width: 100px;
}

2. 初始化组件时通过配置项自定义 #

在创建Calendar实例的时候，你可以通过视图的配置参数来控制列宽，甚至动态渲染列的时候设置：

// 初始化日历组件
const calendar = new dojox.calendar.Calendar({
    view: "month",
    // 配置月视图的相关属性
    monthViewProps: {
        // 可以直接设置固定列宽，也和min-width配合使用
        columnWidth: 100,
        // 或者通过renderColumn钩子动态给列节点设置样式
        renderColumn: function(columnNode) {
            columnNode.style.minWidth = "80px";
        }
    }
}, "yourCalendarDomId");
calendar.startup();

3. 给容器添加横向滚动（兜底方案） #

如果列数实在太多，即使设置了最小宽度还是超出容器范围，那给日历的DOM容器加个横向滚动就很实用：

#yourCalendarDomId {
    overflow-x: auto;
    white-space: nowrap;
}

这样用户可以通过拖动滚动条查看所有列，内容不会被挤压变形。

小提示：不同版本的Dojox Calendar DOM类名可能略有区别，你可以用浏览器开发者工具 inspect 一下列元素，确认类名后再写对应的CSS或JS逻辑哦~

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