上一篇完成了计划的制定,然后需要把计划转换为日程,在日历视图上直观地显示,与日程相对应的还有完成日程内容后的打卡动作。
一 日程视图
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便可。