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版本)

经常有人私信我最后的动态图（日历导航+月视图动态）的源码，我把部分逻辑源码放在资源里，可以下载参考下

ExtJS 日历Calendar 控件使用相关推荐

ASP.NET 在vs中使用Calendar控件制作一个日历并标注节假日
Calendar控件 Calendar控件可以说用户方便.准确地选择日期或查看与日期相关的数据.当创建Calendar控件中的每个日期单元格均会引发DayRender事件,通过DayRender事件的 ...
vs2010中Calendar控件的一些使用
一.返回指定日期前后的某一日期; // Sets a DateTime to April 3, 2002 of the Gregorian calendar. DateTime myDT ...
vant 2 Calendar控件IOS下空白
今天写代码发现 vant2 Calendar控件的一个BUG. 具体体现为在IOS的真实手机上,某些机型打开后日历显示一片空白,拖动一下就又恢复了正常显示出来了. 使用了解决办法模拟滚动下.关键是时机 ...
ASP.NET Calendar 控件
ASP.NET Calendar 控件 http://www.w3school.com.cn/aspnet/control_calendar.asp 转载于:https://www.cnblogs.c ...
WPF- 关于自定义Calendar控件
由于项目对更改日期时间的需要,接触了一下Calendar控件.结果发现在这么强大的控件的背后,微软其实并没有为开发人员留有很强的扩展性. (项目要求的Calendar控件能对一些特定的日期进行特殊处 ...
ExtJs 分组表格控件----监听
ExtJs 分组表格控件----监听 2013年8月1日 10:59 如图,点击expand可以展开所有的分组,collapse可以合并所有的列,toggle和toggleone展开合并一个分组 Ex ...
.NET DataGridView 单元格添加日历选择控件
.NET 使用datagridview 在单元格中加入日历选择控件的方法在最近的项目改动中,需要在单元格的日期列中用日历选择的方式提供选择,翻阅了许多的资料终于还是解决了问题现在记录一下学习过程 ...
ASP.NET Calendar 控件在中文服务器上显示为英文星期的处理
同样的一个软件,部署在十几台服务器上,不同的客户来使用,其中一个使用了Calendar控件的页面,在大多数客户的计算机上都显示为中文,但是有个别服务器输出到客户端显示为英文.检查并修改了IE浏览器的语 ...
calendar控件使用 extjs_ExtJs定制日历控件——自动加载更新(日历控件显示)
将定制的日历控件放到一个Panel里显示,其结构如下: , { border: true, id: 'page', animCollapse : true, width: 1050, height: ...

ExtJS 日历Calendar 控件使用

首先

其次

动态赋值

ExtJS 日历控件 demo (modern版本)

ExtJS 日历Calendar 控件使用相关推荐

最新文章

热门文章

ExtJS 日历Calendar 控件 使用

首先

其次

动态赋值

ExtJS 日历控件 demo (modern版本)

ExtJS 日历Calendar 控件 使用相关推荐

最新文章

热门文章

ExtJS 日历Calendar 控件使用

ExtJS 日历Calendar 控件使用相关推荐