MVC与单元测试实践之健身网站(七)-日程与打卡

上一篇完成了计划的制定，然后需要把计划转换为日程，在日历视图上直观地显示，与日程相对应的还有完成日程内容后的打卡动作。

 

一 日程视图

a) 要把循环的计划铺开成为日程，日程的显示用日历视图是最合适的。模板中提供的日历插件为fullcalendar，功能足够、样式漂亮就直接用了。

将计划展开为日程后，日程可以分为已经完成、当天、未完成三部分，这三类用不同的颜色加以区分。并且点击当天的日程会跳转到训练和打卡界面。

已经完成的日程全部显示，未完成的只显示30天的，没必要生成更多的；而且如果计划被重置，还需要重新生成未完成的日程。每次打开日程界面时，如果未完成天数少于30天，则在数据库补齐差值。

b) 对于我设置的3天计划（前两天练习，最后一天休息），以7月5号为起点生成日程后，日历视图为：

 

二 打卡与首页

在日历视图的当天日程点击或直接点击首页，会打开训练与打卡界面。

在这个界面可以在完成全部训练项目后打卡，并显示了今天需要完成的项目数目以及已经坚持的训练天数。另外还显示当天的所有训练项目，并可通过勾选框提交单个项目的完成情况。

 

三 关于FullCalendar

a) 数据源

FullCalendar的events代表数据源，按照文档events的数据源可以有数组、json feed、function三种形式，采用function的形式，以post方式请求后端Action返回json格式的数据源。一开始按照一篇博客的内容，为events使用function (start, end, callback)形式的方法始终不能成功，最后找到官方文档，原来方法需要四个参数function (start, end, timezone, callback)，不知道是新版改动了还是有些人乱说，总之还是官方文档可靠。

b) 颜色

通过在数据源的日程对象中添加color属性，就可以调整日历上日程的颜色了，color属性的字符串值可以是颜色的名称、16进制表示法。

c) 去掉日程条上的时间

本次不需要日程有具体的时间，通过更改数据源日程对象的allDay属性为true便可。

 

​