最近的一個項目中,需要将資料用月曆方式顯示,網上有很多的JS插件,後面為了自己能有更大的控制權,決定自己制作一個月曆顯示。如下圖所示:
1、new一個Calendar類
2、初始化兩個下拉框中的資料,年份與月份
3、初始化要搜尋的年份和月份
4、計算得出月曆中每一天的資料資訊,包括css、天數
1、休息天的背景色是不同的,不是目前搜尋年月的天數字型顔色也是不同的
2、div中做初始化年份與月份的下拉框的操作,并選中目前要搜尋的年月
3、資料已計算好,哪個td屬于哪個tr也已做好,直接将table列印出來即可
1、threshold方法,生成月曆的各個邊界值
1)計算這個月總天數
2)計算這個月第一天與最後一天,各是星期幾
3)計算月曆中的第一個日期與最後一個日期
2、caculate方法,計算月曆的天數與樣式
1)将上個月的天數計算出來,本月第一天的星期不是星期天的話,就需要根據上個月的最後一天計算
2)将本月的天數周遊出來,如果是休息天就加上特殊的css樣式
3)将下個月的天數計算出來,分三種情況,星期日、星期六和工作日
3、draw方法,畫表格,設定table中的tr與td
1)資料将要用table标簽來顯示,是以這裡要将各個tr下面的td排列好
2)$index % 7 == 0 計算表格每行的第一列
3)$index % 7 == 6 || $index == ($length-1) 計算每行的最後一列,或$caculate的最後一個資料
4)将中間行添加到$tr中,就是每一行的array
demo下載下傳:
<a href="http://download.csdn.net/download/loneleaf1/7976323" target="_blank">http://download.csdn.net/download/loneleaf1/7976323</a>
本文轉自 咖啡機(K.F.J) 部落格園部落格,原文連結:http://www.cnblogs.com/strick/p/3988764.html,如需轉載請自行聯系原作者