Alex宅幹嘛 - Vue一個萬年曆

發表於 更新於 分類於 閱讀次數： Disqus：

本次主題為透過 Vue 練習製作一個月曆，效果類似 Win10 的小月曆，紀錄一下影片重點，有興趣的話可以 follow ALEX 的頻道

[Alex 宅幹嘛] 👨‍💻 一起 Vue 個萬年曆 - Youtube
萬年曆 - CodePen

要點：

  1. 日曆要可以顯示當前的日期，也可以切換時間，所以會有兩組時間：今天、顯示日期(年、月、日、星期幾)
  2. 預設值的建立，一開始就將兩個日期都設定為系統日 (js 月份的算法從 0 開始)
  3. 畫面提供按鈕切換日期，包含加減月份、加減年份、回到今天，這幾個按鈕都是在操作顯示日期
  4. 加減月份須注意跨年的計算
  5. 畫面應該要顯示六行才能顯示一整個完整的月份
  6. 先取得顯示日期的月份，得到該日期的星期幾(day)，就可以得知該月份第一天，在第一行的哪一個地方，只需要再往前推算，就能知道整個月曆的第一天
  7. 月曆的起點(月曆第一天)跟長度(6行*7列=42個日期)有了，所以可以將日期的資料透過迴圈，產生出 javascript date 物件，並存放於陣列中
  8. 畫面透過v-for及雙迴圈的技巧，將日期陣列的資料透過 HTML5 的 data 屬性綁定 DOM (v-for="i in 6"，是數字的話，會從 1 開始)
  9. 利用calendar[(i-1)*7+(j-1)].date，中間的 index 值其實就是一個陣列轉 index 的技巧，很實用
  10. 利用 CSS 語法的content:attr(data-date)可以取得 DOM 的 data 屬性，透過這樣的方式將陣列的資料從 Vue 綁定到 DOM，再用 CSS 讀出來顯示
  11. 為了要區別今天與其他月份，撰寫兩個不同的 CSS 來處理 UI 顯示
  12. 今天：DOM 綁定的日期需等於今天的年份、月份、日期
  13. 其他月份：DOM 綁定的日期，月份不等於今天的月份

日期相關的套件除了moment.js之外，也可以考慮輕量化的day.js