利用avalon+原生js来制作日历空间（一）

url:http://zjingwen.github.io/SetTimeOutGoBlog/funui/fundate/index.html

（如果打开过慢，或者打不开，原因你懂得。）
一、思路

1、制作日历这种ui组件，我们第一步需要拿到的就是数据，我们需要知道例如今天属于，那一年、那一月、星期几。

2、数据的呈现形式应该是什么样子的，以我制作的这个为例，理性分析，以图为例，6X7的格子，我们要获得42个数据，其中当月数据占数组的中间，下月数据占数组的尾部，上月数据占数组的头部。

 

那么问题来了，如何判断上一个月的数据究竟需要多少天。

解决方法，判断，上一个月的最后一天是星期几，六月的上一个月五月的最后一天是星期天，这样我们就可以逆向用减减的方式，得到。如果上一月的最后一天是星期六，这样我们就需要6天，来填充数据。用这种方法来填充数据，是比较好看的方法。

 

将当月数据直接push进数组就好了。

下月数据，经过前两次数据的push，判断该数组的长度，来循环push下月的数据，这样一个日历的数据，我们就全部填充进了一个数组中，这个数据的长度的42。用一维数组循环输出是很麻烦的。

 

我们需要将这个一维数组，转换为二维数组，这样方便输出。用一维数组不是不可以，用的话，我们需要利用css来控制行数，这样我不喜欢，我喜欢的组件是，把css全部剥离，照样可以跑出效果。

 

利用一个嵌套循环就可以解决问题。外层为6，内层为7。

 

来自为知笔记(Wiz)