对于万年历的概念，大家已经非常熟悉了，尤其临近节假日的时候，我们会习惯去查看日历上的放假安排，但是经常觉得很坑爹啊有木有，不过这是题外话了。今天这个案例就和万年历有关，教大家使用“中继器”和“日期函数”来实现一个万年历的原型，不过这原型可不是死的哦，是可以真真正正显示万年日期的万年历。

原型预览：

原型说明：万年历原型在初始化的时候可以自动显示当前日期，并锁定当天（Today），通过“上一年”“上一月”“下一月”“下一年”操作，可显示对应年份及月份的日历，“返回今天”可返回当前月份日历及锁定当天（Today）。

学习重点

通过本案例，我们主要来练习中继器和日期函数的使用，中继器用于显示日历的天，日期函数则用于处理日历的显示逻辑。其中使用到的日期函数将包括：Now-获取当前日期、getDate（）-获取天、getDay（）-获取一周中的第几天、addDays（）-增加/减少天、addMonths（）-增加/减少月、addYears（）-增加/减少年。

原理说明

首先我用一个7*6的矩阵（中继器）来显示日期，至于为什么是7*6而不是7*5，大家仔细观察一下日历就可以发现了，7*5有时候是不能将一整月的日期显示全的。接下来我就是要把日期显示到对应的矩阵单元上，下面我用一个图来表示：

上图是一个日历的大概的样子，比如今天是2017年1月17日，那么17应该显示在上图42个方格中的哪个格子里呢？这个我暂时是不知道的。

但是如果是2017年1月1日呢？这下我就知道了，2017年1月1日肯定显示在矩阵格子的第一行（1-7的一个位置，绝对不会显示到8那个位置），那么到底是第几个位置呢？我也不知道。

但是我可以借助一个函数getDay（）来得到2017年1月1日对应的是一周的第几天（周日是第0天，周六是第6天，以此类推，正如上图中getDay（）后面标记的一行数字），这时候我就可以发现一个规律，getDay（）那一行数字正好比42矩阵中的第一行的右下角的数字（这个我们会用中继器中的Item.Index来获取）少1，紧接着2017年1月1日getDay（）+1的位置就是要显示的位置（比如上图黄圈1的位置，这里我用start_index来表示）。

接着我就可以用这个黄圈1以及它所处的位置，计算出整个42矩阵中其他位置的日期是多少。我么拿黄圈11来举例子说明。黄圈11的位置我们是可以得到的（中继器中的Item.Index），黄圈1的位置我们刚才也知道了是start_index，那么黄圈11的Item.Index-start_index的差值是不是就等于黄圈11的日期-黄圈1的日期呢？答案当然是肯定的（用上图的例子就知道：17-7=11-1=10），然后我们利用这个差值，在黄圈1代表的日期加上刚才计算的差值就会得到黄圈11的日期。其他位置的日期以此类推。

好了，这就是大概的原理，接下来我们看具体是如何实现的。

实现步骤