利用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)