Ext JS CalendarPanel日历组件
Ext JS 的 CalendarPanel，功能上可以说是“全家桶”级别的日历控件。不光月视图、周视图、日视图全都有，还支持拖拽、动画、事件绑定这些常规操作。关键是，它本身就可以看成一个完整的功能模块，拿来整合到你项目里几乎不用大改。
CalendarPanel 的结构挺有意思，它内部是由多个子视图组合而成的，比如MonthView、DayView和WeekView，各自负责不同的时间粒度展示。像MonthView这种，大小自适应、无滚动条，还可以通过monthViewCfg配置来定制：
monthViewCfg: {
showHeader: true,
showWeekLinks: true,
showWeekNumbers: true
}DayView这块分成头部和主体两部分，像个表格一样展示全天事件，滚动交互也挺丝滑。WeekView其实是复用DayView渲染 7 次拼出来的，这种思路既省资源又方便维护。
再说配置项，showHeader、enableDD、startDay这些都能定制，细节控可以玩得嗨。事件数据也能直接绑定eventStore，比如你后端字段不是默认的，也能通过EventMappings重新映射字段：
Ext.calendar.EventMappings.Title.mapping = 'my-title';
Ext.calendar.EventRecord.reconfigure();监听事件也不难，CalendarPanel 和它的事件编辑窗体EventEditorForm都能独立注册事件，耦合度低，维护起来也清晰。哦对了，UI 上它继承自Panel，所以支持你自己来套布局、加样式，适配性好。
如果你正好在做一个带日程管理的系统，或者想了解 Ext 组件到底有多复杂，那真的可以来研究一下这个日历控件。里面有多实现细节值得学。
文件大小：420.57KB
评论区