tags: 鐵人賽 React javascript nodejs

鐵人賽第28天，今天我們要回到React實戰系列，來寫個日曆的套件。

解析一下我們的需求

• 我們要建立一個如下的Calendar(日曆範例來源: react-day-picker)。
• 從下圖來分析，我們需要：

• 第一週從星期幾開始
• 估算每一週的日期分佈
• 取得當月每週的資訊

用moment建立我們的日期內容

• 我們在React-day24有學習到moment套件的使用，今天我們就使用這個套件，來完成上面三個需求！

先建立Calendar.js

• 建立Calendar.js，並輸入以下的程式碼

// Calendar.js
import React from 'react'
import moment from "moment";

export default function Calendar() {
    return (
      <div>
        <h1>{"Calendar Demo"}</h1>
        <h1>{moment().format("YYYY-MM-DD")}</h1>
      </div>
    );
  }

• 別忘了修改index.js，將<Calendar />加入，程式碼我們會先使用 moments套件來產生日期，如果成功，你會看到如下的畫面。

建立utils.js檔案，開始估算當月的日期分佈

• 估算當月日期的分佈的程式碼，我們放在utils.js裡面。
• 由於我們希望能取得 當月每週日期分佈，故我們建立函式 getWeeksInMonth。
• 步驟說明我寫在底下程式碼中，以利對照學習！

// utils.js
import React from 'react'
import moment from "moment";

// GLobal Vars
const SEVENDAYS = 7; // 建立一個通用變數，存放一週有7天

// 處理每週的資訊
function processWeekDays(mmt, isFirstWeek=false){
  const totalDays = mmt.daysInMonth();
  
  // isFirstDay=true, 取得第一週的第一天，在星期幾，快速建立一第一週的資訊
  // isFirstDay=false, 直接從0，也就是Sunday開始
  const startDay = isFirstWeek? 
  mmt.startOf("month").day():0;

  const weekDays = Array(SEVENDAYS).fill(0); // 先建立一週的Array，內容先放0
  let isFinished = false; //<-- 通知上一層函式的迴圈是否結束
  for(let d=startDay; d<SEVENDAYS; d++){
    weekDays[d] = mmt.date(); // 我們控制了startDay，若以2020.10.1是星期四來說，第一週的部分直接從 Array的idx=4開始放日期
    
    if(mmt.date()!==totalDays)
      mmt.add(1, "day"); //<--使用moment的函示，一天一天加上去
    else{
      isFinished=true; //<--如果處理的天數已經是最後一天了，就離開回圈
      break;
    }
      
  }

  return {weekDays, isFinished}; //<-- 回傳weekDays & isFinished
}

// 取得當月每週的資訊
export default function getWeeksInMonth(){
  const mmt = new moment();
  const weekDayList = []; //<-- 建立一個Array，負責存放每週的日期

  // 由於每月的第一天不見得是在星期天，故我們需要先處理第一週的部分
  const {weekDays} = processWeekDays(mmt, true);
  weekDayList.push(weekDays);

  // 其他的部份可以靠Loop來依序回傳每週的日期
  let loopStatus = false;
  while(!loopStatus){
    let result = processWeekDays(mmt);
    const {weekDays} = result;
    weekDayList.push( weekDays );

    loopStatus = result["isFinished"];
  }
  
  
  return weekDayList; // 回傳完整的日期
}

呼叫驗證看看

• 回到Calendar.js，我們加入程式碼，來呼叫剛剛的getWeeksInMonth()，看看是不是如我們預期

import React from 'react'
import getWeeksInMonth from "./utils"  //<--加這個
import moment from "moment";

export default function Calendar() {
    let result = getWeeksInMonth(); //<--加這個
    console.log("result:", result)
  
    return (
      <div>
        <h1>{"Calendar Demo"}</h1>
        <h1>{moment().format("YYYY-MM-DD")}</h1>
      </div>
    );
  }

• 看看結果，帥啊！依序印出來囉!
  

結論

• 今天我們利用moment.js套件來幫助我們建立當月每週的資訊，透過這個練習，相信各位也更熟悉moment.js的使用。
• 鐵人賽第28天，中秋就是要與家人烤肉相聚，祝各位中秋節快樂！Rock~~ !!