这两天在开发某商学院的网站，里面有涉及到课程的模块，客户希望在网站的首页显示一个日历， 在有课程的日期加上显眼的标识，使网站用户一眼看到日历后就能知道哪天商学院有课程以便他们安 排时间报名修读。
这个功能挺有意思的，符合本人及非常小器公司一直所坚持的“为客户创造价值”的理 念，它真正从用户的角度思考问题了，客户真正需要的、实用的东西是我最喜欢开发的产品因为我觉 得不能为客户创造价值的产品最终必定不能为自己创造价值，这个世界是讲因果的。
刚开始的时候感觉用第三方的东西挺麻烦的，一来要研究别人的接口，规范等一大堆的东西，有什 么地方满足不了要求的时候就更加麻烦了，要去读懂别人的源码再修改，还不如自己全新开发来得直 接简单，但日历这东西，说复杂不复杂，但要做得好也有一定工作量，利用google快速了解了目前几 个比较知名的轻量级日历插件的接口、提供的配置项及功能情况后，决定不重复制造轮子，在jquery ui的datepicker控件上进行开发，因为它虽然功能简单，但提供的配置项比较灵活，不需要经过大调 整就能实现想要的效果，而且自备多种UI风格，相信总有一款能很好地与网站风格相融合，呵呵。废 话不多说了，下面来看看实现的过程吧，希望能被有需要的朋友借鉴，同时欢迎各位大神提出宝贵建 议。首先看看效果：图中2013年4月30号被一个红色的圈圈住了，这是一个设计时的一个约定，日期被 圈住说明当天是有课程的，点击这个日期的时候再列出这天有哪些课程。
UI的风格其实就是jquery ui中的蓝色主题版本的，由于本身网站是以蓝色作为基调的，所以用蓝 色主题的UI能与网站整体融合得非常好，可能很多人印象中都觉得datepicker是用来选日期的，以前 应用它的时候都是有一个输入框，点击输入框后才弹出这个日历面板，选择一个日期后触发回调，把 选中的日期更新回到一个特定的元素当中，日期选择控件的使命就完成了，但这里，它做的却是完全 不同的事情。它就像台历一样，只负责显示日期列表及标记一些特定日子的作用，当然，它比台历更 加复杂和先进一点，因为它是根据后台的课程开课日期设置来自动在日历中做标记的。
实现的细节：
1）怎样让datepicker默认就显示在指定的地方而不是通过输入框焦点触发？ 这点其实很简单，通 过查datepicker的api就可以知道datepicker初始化的时候会自动判断调用它的元素类型是什么，如果 是input，它就会等待点击触发，如果是div，它默认就会显示出来了，所以，这里，只需要在要显示 的位置放一个div,然后用jquery的选择器找到这个元素，并且在上面调用datepicker()方法就可以了 ，示例：$('.datePickerWraper').datepicker();
2）怎样让datepicker符合设计的要求？这个其实也简单，用CSS配合一下了，我的建议是不要直接 在jquery ui的样式上面改，一来影响它自身的完整及独立性，到时或许会用到它的控件，如果直接改 会导致一些意想不到的情况发生，我认为比较好的办法是在特定的页面下用自己的样式把默认的样式 覆盖掉以使控件的尺寸符合我们的预期，即方便又灵活。
3）怎样在特定的日期加上特殊的标记？这个是课程日历的关键所在。首先，当然是需要课程开课 日期的数据了，由服务端提供的课程信息数组而来，这里就不再赘述了，研究了datepicker的api，发 现它提供了一个beforeShowDay的钩子，所有的日期在渲染之前都会通过这里的，有这个机制就好办了 ，在这个钩子里添加代码，遍历课程列表，如果当前单元格的日期与课程的开课日期是同一天，就返 回一个带有三个元素的数组变量，分别代表日期是否可选，要在日期容器里额外添加的class属性及单 元格的hover事件触发时显示的内容，相当于a的title。由于每次渲染日期时都会经过这个方法处理， 所以，只要把课程列表初始化好，在用户切换月份和年份的时候都会自动处理，不需要再在切换年月 份的时候做干预，非常简便就能达到想要的效果了。