如何在Dhtmlx Scheduler的Day View中显示30天并添加横向滚动条？

核心实现思路 #

Dhtmlx Scheduler默认的日视图、月视图不支持横向滚动，需通过自定义视图扩展+DOM样式调整来实现需求：

• 30天滚动日视图：基于原生日视图逻辑扩展，修改日期渲染范围为30天，给视图容器添加横向滚动样式，同时同步日期导航与滚动位置
• 月视图横向滚动：通过CSS调整月视图的表格布局，让日期区域超出父容器宽度，触发横向滚动

示例代码：30天滚动日视图 #

// 自定义30天滚动日视图
scheduler.createView({
    name: "30day",
    start_on_monday: false,
    event_height: 50,
    tab: "30天视图",
    // 设置视图显示30天
    days: 30,
    // 视图切换后添加滚动样式
    onViewChange: function(){
        const colWidth = 120; // 单个日期列的宽度
        const dayViewHeader = document.querySelector(".dhx_cal_data .dhx_cal_scale_holder");
        const dayViewContent = document.querySelector(".dhx_cal_data .dhx_cal_data_holder");
        const schedulerContainer = document.querySelector(".dhx_cal_container");

        // 设置日期头部和内容容器的总宽度
        dayViewHeader.style.width = `${30 * colWidth}px`;
        dayViewContent.style.width = `${30 * colWidth}px`;
        // 开启父容器横向滚动
        schedulerContainer.style.overflowX = "auto";
        schedulerContainer.style.overflowY = "hidden";
    },
    // 日期切换时，让选中日期滚动到可视区域
    onDateChange: function(){
        const activeCol = document.querySelector(".dhx_cal_scale_cell.dhx_cal_scale_cell_active");
        activeCol?.scrollIntoView({inline: "center"});
    }
});

// 切换到自定义30天视图
scheduler.setCurrentView(new Date(), "30day");

示例代码：月视图横向滚动 #

/* 强制月视图日期区域可横向滚动 */
.dhx_cal_month .dhx_cal_data_holder {
    overflow-x: auto;
    overflow-y: hidden;
}
/* 让月视图的表头和内容表格自适应宽度 */
.dhx_cal_month .dhx_month_body,
.dhx_cal_month .dhx_month_head {
    width: max-content;
}

关键注意事项 #

• 自定义视图时需确保事件的日期范围判断逻辑正确，避免事件显示异常
• 可通过调整colWidth参数适配不同屏幕尺寸的显示效果
• 可自定义CSS美化滚动条样式，保持与Scheduler整体风格一致

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