ExtJS 日历Calendar 控件 使用

版权声明：如若转载，烦请联系作者。 https://blog.csdn.net/ZYD45/article/details/88537925

ExtJS6 提供了日历控件，但是官网的demo贼坑，只讲了ajax使用，经过不懈努力地，无头苍蝇式尝试，终于摸到了使用门槛。

首先

在具体项目里，引用calendar的包。

其次

设定好calendar的store，这个很重要。因为，整个日历控件，最主要的就是store对应的事务。你在日历控件上看到的如下图中，每一条，都是一个event

这里采用的store是 memory 内存的模式，不用ajax。我这里有四种事务，有的时候是，某一类事务更新，有的时候是全更新

{
    type: 'calendar-calendars',
    autoLoad: true,
    asynchronousLoad: true, //允许异步加载
    proxy: {
        type: 'memory',
        data: [{
            id: 1,
            title: 'Plan',
            color: '#f69218',
            eventStore: {
                model: 'Task.model.calendar.CalMonthEvent', //自定义的model改变了一些东西可以用原本的model，不配置就是原生的
                asynchronousLoad: true,
                proxy: {
                    type: 'memory',
                    data: null,
                    reader: {
                        type: 'json',
                    }
                }
            }
        }, {
            id: 2,
            title: 'Act',
            color: '#02b8d0',
            eventStore: {
                model: 'Task.model.calendar.CalMonthEvent',
                asynchronousLoad: true,
                proxy: {
                    type: 'memory', //采用内存模式
                    data: null,
                    reader: {
                        type: 'json',
                    }
                }
            }
        }, {
            id: 4,
            title: 'ToExcSummary',
            color: '#6f95e1',
            eventStore: {
                model: 'Task.model.calendar.CalMonthEvent',
                asynchronousLoad: true,
                proxy: {
                    type: 'memory',
                    data: null,
                    reader: {
                        type: 'json',
                    }
                }
            }
        }, {
            id: 5,
            title: 'ExSummary', //已批小结
            color: '#8bc34a',
            eventStore: {
                model: 'Task.model.calendar.CalMonthEvent',
                asynchronousLoad: true,
                proxy: {
                    type: 'memory',
                    data: null
                }
            }
        }]
    }

设置好后，把他放入calendar控件中

{
    xtype: 'calendar-weekview',//可以采用calendar的其他视图 这里采用周视图
    flex: 1,
    gestureNavigation: false,
    store:{
    type: 'calendar-calendars',
    autoLoad: true,
    asynchronousLoad: true, //允许异步加载
    proxy: {
        type: 'memory',
        data: [{
            id: 1,
            title: 'Plan',
            color: '#f69218',
            eventStore: {
                model: 'Task.model.calendar.CalMonthEvent', //自定义的model改变了一些东西可以用原本的model，不配置就是原生的
                asynchronousLoad: true,
                proxy: {
                    type: 'memory',
                    data: null,
                    reader: {
                        type: 'json',
                    }
                }
            }
        }, {
            id: 2,
            title: 'Act',
            color: '#02b8d0',
            eventStore: {
                model: 'Task.model.calendar.CalMonthEvent',
                asynchronousLoad: true,
                proxy: {
                    type: 'memory', //采用内存模式
                    data: null,
                    reader: {
                        type: 'json',
                    }
                }
            }
        }, {
            id: 4,
            title: 'ToExcSummary',
            color: '#6f95e1',
            eventStore: {
                model: 'Task.model.calendar.CalMonthEvent',
                asynchronousLoad: true,
                proxy: {
                    type: 'memory',
                    data: null,
                    reader: {
                        type: 'json',
                    }
                }
            }
        }, {
            id: 5,
            title: 'ExSummary', //已批小结
            color: '#8bc34a',
            eventStore: {
                model: 'Task.model.calendar.CalMonthEvent',
                asynchronousLoad: true,
                proxy: {
                    type: 'memory',
                    data: null
                }
            }
        }]
    }
        
}

动态赋值

给calendar对象的eventStore对象 动态赋值，注意 是eventStore

var store = calendar-weeksview对象.getStore();
store.getAt(0)._eventStore.loadData(r[0]);//计划
store.eventSource.activeLoad = false;
store.getAt(1)._eventStore.loadData(r[1].concat(r[2]));//r[1]未批注活动 r[2]批注过的活动
store.eventSource.activeLoad = false;
store.getAt(2)._eventStore.loadData(r[3]);//未批注的小结
store.eventSource.activeLoad = false;
store.getAt(3)._eventStore.loadData(r[4]);//已批注的小结

为何每个loadData前，都有个 xxx.activeLoad = true——主要是，

在执行了第一句 loadData后，就在此时 store.eventSource对象，神不知鬼不觉地，将activeLoad 变成了 true

而底层的刷新event的方法里，又有个方法是检验这个值的

如果不加上，就会造成部分事务不被显示的问题，如下图

总不能改底层吧，虽然改了可能也没啥影响，但是还是在自己的代码上动脑筋

每次loadData完，重更下 activeLoad属性即可

一个简单的demo：（注意使用时 把 里面 的startDate和endDate 改一下）

ExtJS 日历控件 demo (modern版本)