Sencha Ext JS Calendar点击右箭头无法切换至次日/周问题排查

问题原因 #

Ext JS 7.6.0版本的日历组件存在视图日期计算的边界逻辑bug：

• 当当前日/周视图的结束日期处于特殊临界节点（如月末、年末），或是组件内部状态同步异常时，右箭头的日期增量计算逻辑会出现异常，无法正确更新视图的起始日期，导致点击后停留在当前视图。
• 左箭头点击能触发组件内部状态的重置，修正了异常的日期计算上下文，因此后续右箭头可恢复正常工作。

解决办法 #

1. 临时应急方案（已验证有效） #

先点击左箭头切换到前一日/周，再点击右箭头即可正常切换到目标日期视图。

2. 永久修复方案 #

方案一：升级Ext JS版本

Sencha官方在后续版本（如7.7.0及以上）中修复了该导航逻辑bug，直接升级框架到最新稳定版即可彻底解决问题。

方案二：重写组件导航方法

如果无法升级框架，可通过重写日历视图的next方法，手动修正日期计算逻辑：

Ext.define('YourApp.override.CalendarView', {
    override: 'Ext.calendar.view.Base',

    next: function() {
        var me = this,
            currentView = me.getView(),
            dateIncrement;

        // 根据当前视图定义明确的日期增量
        switch (currentView) {
            case 'day':
                dateIncrement = { unit: Ext.Date.DAY, amount: 1 };
                break;
            case 'week':
                dateIncrement = { unit: Ext.Date.DAY, amount: 7 };
                break;
            default:
                // 其他视图沿用原逻辑
                return this.callParent(arguments);
        }

        // 手动计算新的起始日期并更新视图
        var newStartDate = Ext.Date.add(me.getStart(), dateIncrement.unit, dateIncrement.amount);
        me.setStart(newStartDate);
        me.fireEvent('navigate', me, 'next', newStartDate);
    }
});

将上述覆盖类引入你的应用中，即可修复右箭头的导航失效问题。

预期结果 #

应用修复方案后，点击日历右箭头按钮可直接切换至次日/周视图，无需依赖左箭头重置状态。

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