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

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

（若是打开过慢，或者打不开，缘由你懂得。）
1、思路

一、制做日历这种ui组件，咱们第一步须要拿到的就是数据，咱们须要知道例现在天属于，那一年、那一月、星期几。

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

 

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

解决方法，判断，上一个月的最后一天是星期几，六月的上一个月五月的最后一天是星期天，这样咱们就能够逆向用减减的方式，获得。若是上一月的最后一天是星期六，这样咱们就须要6天，来填充数据。用这种方法来填充数据，是比较好看的方法。

 

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

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

 

咱们须要将这个一维数组，转换为二维数组，这样方便输出。用一维数组不是不能够，用的话，咱们须要利用css来控制行数，这样我不喜欢，我喜欢的组件是，把css所有剥离，照样能够跑出效果。

 

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

 

来自为知笔记(Wiz)