带你开发一个日历控件

《带你开发一个日历控件》由会员分享，可在线阅读，更多相关《带你开发一个日历控件（14页珍藏版）》请在金锄头文库上搜索。

1、日历控件多的不胜枚举，为什么我们还要再造一个轮子呢？因为大多数日历控件都是用于选择日期的， 有种需求是要在日历上展示各种各样的内容，这样的日历控件较少，而且试用下来并不满意。因此就再造一个轮子， 现在带你一起基于使用之前完成的组件机制来开发一个日历控件。需求简单把需求整理如下： 月视图 支持在日历中每一天中插入任意的内容 相关点击事件 获取日历当前视图的开始和结束日期 获取设置选中的日期实现分析首先我们拿系统中自带的日历观察一下，看看日历的特征到底是怎么样的。2017年11月/XXZ三四五六B303112345-4-十三十四十五6789101112十八立冬二十廿一廿二甘三廿四131415161

2、71819廿五Wx廿七廿八WL十月初二20212223242526初三初四小雪毗初八27282930123+十二十三十四十五-11_ _/i-45678910十七I/ 丁儿tt廿二廿三一个月中有2 8到3 1天不等，但是为了保证完整的结构，日历中会有部分上一月和下一月的日期，总结下来，一个月中显示的必定是整整6周的日期。那么只要得到当月的开始日期就可以绘制日历了。如何计算当月日历视图中的开始日期呢？ 前面已经分析了，为了保证完整，它显示了上一月的部分天数，那么只用从当月的1 号开始往前推算就可以了。开始日期= 当月1号的日期- 当月工号的星期结束日期= 开始日期+ 4 2天这个问题搞清楚了，感

3、觉实现这么一个日历就没什么大阻碍了，开始动工吧！必要结构准备首先构建如下所示的基本结构 其中： 头部左右为个性化区域， 用于实际使用时放置任意内容。中间用于显示当前月份和切换按钮主体区域中用绘制整个日历O thead中绘制周一至周日或周日至周一的星期，这段内容是不会随月份切换而改变的，可以直接准备好o tbody中用于绘制可变的日期，准备好容器留空即可。脚部区域用于实际使用时放置任意各项化内容 menu区域用于切换日期时弹出的面板绘制日历在初始化好日历结构后就可以开始绘制日历了。计算一个月中的开始日期和结束日期首先完成开始和结束时间的计算(/ / 初始化当前月份的开始日期和结束日期JitSta

4、rtEiad: F认八ction 0 / / 当月1号vav currMoiath =/ / 当 月 1 号是周几 the. ISO day of the week with 工 being Monday avd. 7being Sunday.= currMoiath.isoWeekdayOjsta 七 DateOFMoct几eiadDteOfM。 八 仍 ；if (!this.dayStartFroiSu.day) / / 开始为周一则向前减少周几的天数-工即为 开始的日期startDateOfMo八th = currMoithsubtract(fitDay_weekday - 工 J d砌

5、 )； eke (/开始为周日则直接向前周几的天数即可staHDatcOfMonth = cur rMothsubtract( firsts ay jA/eekdayj day);cudD 温 。fM。 八 历 =staHDateOfMcmth.do 八eO.add(4 14ag);this.startDateOfMo 八 th = startDateOfMonth;this.endDateOfMonth = e 八dD cOfMon/;)由于要处理很多日期， 而JavaScript中关于日期处理时， 不同浏览器下差异较大，因此直接使用momentjs来对日期进行统一处理。由于使用习惯不同，一

6、周的开始到底是周一还是周日是不确定的，因此直接作为配置即可。绘制一月中的日期上面已经计算得到了一个月的开始日期和结束日期， 那么只用遍历进行绘制即可。由于我们使用了表格实现，因此需要按行绘制。实现如下：(/日历可变部分的渲染.render fuMtioia () this.JnitSta rtEid();vav weeks = 6,days - 7,curtate = tkisstartDateOfMoiatkcloMOjtr;vaf start = thisstartPateOfMoith.forkvat(,YYYY-MM-PP,)Jeiad = this.e 八 WDateOfMo 八 t

7、k.fo/MatCYYYY-MM-DD);/清空并开始新的渲染this._clearPays();this.e 八erTitle。;for (var i = O; / weeks； +(tr = docMC 八 t.createE/enAeW*);tr.classNae = ep -calendar-week;tkis._day$Body.appeiadCkild.(tr);for (varj = 9; j ) td.classNave += 1 ep -calendar-otheroitk1；/ / 今天标记if (tkis.today = date.fonaYYYY-MM -PP*) td

8、.classNaie +-= 1 ep -calendar-today;/ / 每天渲染时发生还未插入页面var %八 derEue八 七 = tkis.fi/eCcellRe八He , / / 当天的完整日期date: date.fori,at(YYYY-MM -PPr)/ / 当天的is。星期isoWeekdag： day,/ / 日历dowd: this/ / 当前单元格tdEl: tdj/ / 日期文本datcText： date.dateOj/ / 日期cbssdateCk: lep -calendar-date -text,/ / 需要注入的额外的9以1extraHtml: 11,

9、isHeader: false!)；/ / 处理对dagTcxt内容和样式的更改text.mHcrText =匕 。 八W eHEve 八t .dateText;text.className = redcrEveit.dateCls;/ / 添加新增内容if (renerEv/ent.extraHtmO jQ(Aery(re.derEvet.extraHtl).appe.dTo(tdi.Mr);)CMnTr.appe 八 HChiia（ 七 八 derEve 八t .tdEl）;/ / 每天渲染后发生 插入到页面this.fi砥ftwCeHRe八4e ） date: date.foriatCY

10、YYY-MM-DDjis。Weekday： day,el: th is tdEl: td,dateText: teKt.innWText,dateCIs： text.dassNaMC,%八dcrEvent.extRHtiM。isHeade仁 false! ） ；）直接从开始日期往后依次画出4 2天即可。为了灵活性， 在绘制的不同时机触发了不同的事件， 在使用时可绑定相应的事件,在其中进行个性化操作。也为了使用了方便和灵活性，直接在绘制日期时，在相应的dom上加入了所对应的日期和星期属性。在此过程中需要对日期是否周末、是否本月、是否是选中的、是否是今天等进行相应的标记处理。绘制其他内容除了上面所

11、述之外此外还要绘制出年月选择、标题等， 这些实际就是给已经有的dom元素中更改内容而已，就不再展开了。切换月份的实现上面已经基本绘制出了一个日历， 切换月份实际就更简单了，只用根据新的月份重新计算开始日期，清空原来的内容，重新进行绘制即可。(/ / 设置月份setMo八th: function (ym) var date -if (date.isValid() var o/dM。 八 亡k =七 is.crrM。 八th,NMM。 八协=date.foriat(YYYY-MM1);/ / 月份变动前this.fiKeCbefoReMo八thCha八g * el: this.eLoldMoth:

12、 o/dM。 八M八ewM。 八协：) ) ；th/s.eurrMoHth = 沁 Month;加 MHC n/ / 月份变动后this.fireCaftwMo八thCha八g * cl: this.eLoldMo八th: o/dM。 八MM wM ontk： else throw M W Errorfym +， 是一个不合法的日期， ) ；)事件的处理要处理的事件较多，此处仅仅以日期的点击作为示意。(/ / 初始化事件JitEveiat: function 0 vav my = this;jQuerg（ 加 k.ef）/ / 日 期 单 元 格缶八cti。 八(e) var date = t

13、kis.getA.ttribute(,data -date),cv = iy.fireCdayClickj ev. e,date： date,day: tkis.getA.ttribute(,data -isoweekday1),d: my.eLtdEl: this)；/ / 如果修改事件对象的amcH为tm e后 则不进行 后 续 的 选中 操 作if (lev.caMel) iysetSelected(date);)由于日期所对应的d o m元素始终会添加和移除， 直接把事件绑定在日期的dom元素上，则必须在每次新增后重新绑定事件，十分麻烦。直接使用事件代理机制，将事件绑定在整个日历的do

14、m 上即可，这样事件只用在创建时初始化一次即可，简单、高效、省内存。使用我们新增这个控件的主要目的就是要支持在日历中绘制任意内容， 怎么使用呢？var testCaledar = epctrl.iiaitCCaled.ar1, (e l ： date,/ / 资源加载过程中的事件需要直接在这里指定e v e n t s : beforeSourceLoad: fuMtiovx ( e ) / / 资源加载前， 在加入我们的皮肤样式文件e.cssUH.pusK./test-skin.css);) ) ;/日期部分渣染前支持动态获取数据testCaleiadar.o(,beforeDateRen.

15、der/J hmcti。 八( e ) var start Pate = estartPate,e 八 W D a t e = e .e 八 d D a t e ;/ / 如果需要动态获取数据/ / 则将获取数据的ajax加到事件对象的ajax属 性 上即可/ / 日期渲染的cellRder事件将在ajax成功获取数据后执行e.ajax = $.ajax( “ ： g况D a t e伉Fo .x x x。/ / 将当月视图的开始和结束时间传递过去data: start: starts ate,e n d ： endDate? ) ; ) ; /控制渲染过程 可插入任意内容或修改原来的内容t c s t C He n八( R e八d e Fj function ( c ) if (!c.i$Header) / / 如：周五周六则插入周末 否则插入工作日e .e x t r a Ht m f = Vdiv+ (e.isoWcclaiag 5 ? 周末 ： 工作日 ) + 叱/才”;! ) ；总结以上就是关于一个月视图日历控件核心步骤了。此日历实现基于一个控件基类扩展而来， 其必要功能仅为一套事件机制， 可参考实现一套自定义事件机制上面只分析了关键步骤，和核心代码，为了方便使用和扩展性，实际代码中还要处理很多问题。源码和文档如下，感兴趣可以阅读：月视图日历