Vue實現日曆小外掛程式

原始碼可見於我的github：

很明顯每年每個月的月曆樣式（資料不一樣）是一致的，那麼自然而然思路就是把每個月作為乙個公用元件進行復用十二次，這樣就避免了多次重複的**。每個元件不一樣的地方在於年份和月份，而這兩個資料我們可以由父元件向子元件進行傳值來告訴子元件。關鍵**如下：

//months是乙個包含十二個月名字的陣列，用v-for對其進行迴圈渲染，並且把月份的index傳給子元件 //data部分 data ()

},

在父元件的mounted鉤子裡面我們會計算當年當月當日，並傳給子元件，子元件的有個day屬性用於儲存父元件傳來的today的值，day屬性預設值為-1，父元件傳值過去之後會給day屬性重新賦值

//父元件 
mounted () ,

在子元件迴圈渲染每天的日期的時候會設定乙個動態繫結樣式類似於一下**（實際**略微不一樣）：

//index值為0-41 //動態繫結樣式

當data中的屬性day的值和index的值相等的時候，就會給div新增乙個choose的樣式，但是這樣有乙個問題——那就是每個月的該index的div都會有這個class樣式。

解決辦法：在mounted裡面做個判斷，如果為當月，則給data裡面的day賦值，否則不做改動仍為-1，-1在迴圈渲染日期的時候沒有對應的index，所以不會產生選中樣式。

if (new date().getmonth() == this.monthindex)

這是該日曆裡面比較複雜和關鍵的一點，我們可以看到每個月的日曆總共需要42天，除開本月天數，肯定還會包括上個月部分日期和下個月部分日期，所以該問題涉及以下多個因素：

1.本月1號前應該留給上個月多少天數

2.上個月最後的日期是不一樣的，有28 29 30 31

3.本月的天數和留給下個月的天數

4.非本月的日期需要置灰

這四個問題可以分別用下面的思路來解決：

問題1：計算本月的1號是週幾，如果是周一那麼前面應當留1天給上個月（日曆從週日開始計算），如果是周二就應當留2天

每月1號可以用以下函式求得

new date(year + '/' + monthindex + '/' + '01').getday();

問題2：可以在data裡面建立乙個hash表----monthlastday（js物件），對應出每個月的天數，那麼上個月的最後一天的日期就可以用monthlastday[monthindex - 1]求得，其中如果上個月是二月份要單獨判斷是否為閏年

monthlastday:,

getmonthlastday (year, month) else  else 
}},

得到上個月最後一天的日期以及本月1號為週幾之後我們就可以知道需要填入的上個月日期有哪些了，可以往days陣列（本月日曆渲染資料儲存陣列）裡push了。

問題3：這個問題就簡單很多了，因為本月日曆一共有42天，我們在乙個i<42的for迴圈裡面對陣列days進行push，在push完上月日期和本月日期之後，把日期重置為1，繼續push到for迴圈結束就好了

//index為上個月最後一天的日期 lastdaynum為上個月剩餘天數
generatedays (index, lastdaynum) 
//index置1，開始push本月天數
index = 1;
for (let i = 0; i < 42 - lastdaynum; i++) 
//非閏年月份
} else if (index <= this.monthlastday[this.monthindex]) else 
index++;}},

問題4：在上面**中可以看到，在push非本月日期的時候，push進day陣列的不是字串而是乙個陣列[***.tostring],這樣就可以區分本月和非本月日期，然後在v-if裡面對值進行判斷新增class即可

//item為string 為本月日期	}	
//否則為非本月日期 新增class setgrey }

Vue實現日曆小外掛程式

vue打卡日曆 Vue日曆

簽到日曆外掛程式

fullCalendar 日曆外掛程式

Vue實現日曆小外掛程式

vue打卡日曆 Vue日曆

簽到日曆外掛程式

fullCalendar 日曆外掛程式

相關推薦