這個日歷控件類似于園子用的日歷，如下圖：

  

 這種日歷控件實現(xiàn)起來不難，下面簡單分析下我的思路：

 首先，是該控件的可配置項：

    其中有一半是用來控制單元格樣式的(不做過多描述)，另外幾個（firstDayOfWeek,prevNextMonthDaysVisible,weekDayNames）,意義如下:
     firstDayOfWeek:日歷以星期幾做為第一天
     prevNextMonthDaysVisible:是否顯示本月之外的日期
     weekDayNames:星期的名稱（一個索引從1開始的數(shù)組,1處的值將作為周一的顯示名稱，以此類推）

     接下來，進入生成html代碼階段:
    1.生成日歷頭:    

    日期部分為操作‘按鈕'的id使用日歷控件容器的id 作為前綴，以保證id唯一。
    星期部分根據(jù)firstDayOfWeek的設(shè)置來獲取weekDayName。這里關(guān)鍵在于判斷每個單元格代表星期幾，思路很簡單：
    var day = (i + this.settings.firstDayOfWeek) == 7 ? 7 : (i + this.settings.firstDayOfWeek) % 7;
    這樣就可以取得當前單元格代表的星期了。

    2.生成日歷的主要部分：

    (1).獲取該月一號代表星期幾。這樣才能判斷1號應(yīng)該放到哪個單元格，也就是該月從哪個單元格開始(創(chuàng)建日期的時候month減了1，這是由于js Date對象本身的特性)。
    (2).定義了一個標識變量 dayOfMonth ,用于控制本月日期顯示區(qū)域。
    (3).計算要展示的上月的天數(shù)以及上月的總天數(shù)(不用計算下月要展示的天數(shù)和總天數(shù)，因為下月要展示的日期是從1開始，最多不會超過6)。
    (4).顯示本月的日期:
    條件i >= daysOfPrevMonth && dayOfMonth <= totalDays決定了本月日期的顯示區(qū)域。
    (5).顯示上月日期:
    當i < daysOfPrevMonth 時即為上月日期的顯示區(qū)域。
    (6). (4)、(5)之外當然就是下月日期的顯示區(qū)域了。
    (7).何時結(jié)束:
     從代碼看到for循環(huán)是沒有終止條件的，因此必須自己決定何時退出循環(huán)：

     i % 7 == 6表示一行結(jié)束, dayOfMonth - 1 >= totalDays表示本月日期已經(jīng)展示完畢。
    (8).構(gòu)造curDate:
curDate代表每個單元格對應(yīng)的日期。
在顯示本月日期時, curDate = new Date(year, month - 1, dayOfMonth);
在顯示上月日期時, curDate = new Date(prevYear, prevMonth-1, totalDaysOfPrevMonth - (daysOfPrevMonth - i - 1));
在顯示下月日期時, curDate = new Date(nextYear, nextMonth-1, i - dayOfMonth - daysOfPrevMonth + 2),加2是由于i是從0開始，本身就少了1，dayOfMonth 在退出顯示本月日期時多加了一次.
    最后，再來看看_BuildCell做了什么事情:

    事實上本日歷控件的意圖是用戶可以在初始化時傳入日期和該日期對應(yīng)的鏈接的映射的數(shù)組，也就是this.dateLinkMappings，當構(gòu)建單元格時若正在構(gòu)建的日期包含在this.dateLinkMappings里，則將當前單元格構(gòu)造成<a>形式，否則為普通的文本形式。

    OK，實現(xiàn)邏輯大致如此，篇末看下演示效果：
前臺調(diào)用代碼如下:

打包下載地址

最新評論