学習[react]-3日目

カレンダーの作成

重要だ!!!
new Date().注意getMonth()は0から始まります.

うるう年小切手

四分五裂の年は閏年である
四分の一年
四分の年、四百分の年、四百分の年

const isLeapYear = year => (year % 4 === 0 && year % 100 !== 0) || year % 400 === 0;

console.log(isLeapYear(2016)); // true
console.log(isLeapYear(2100)); // false
console.log(isLeapYear(2400)); // true

月の初日、最終日

月の最初の曜日を知るためにnew Date(year, month - 1, 1)に設定され、その月の初日に作成された後、getDay() 메서드を使用して첫 번째 해당하는 요일を知ることができます.
最終日にnew Date(year, month, 0)をすると….(閏月の計算は不要です.)마지막에 해당하는 날짜が表示されます.
ここで注意したいのは、new Dateのmonthを使用する場合は0～11の値を使用し、目視値は1～12の値を使用することです.
では、new Date(2021, 12, 0)は問題が発生しますか?月の席に11以上の値をつけると0から1月になると思いますが、日付の席を0にするので12月になります.

const getFirstDay = (year, month) => new Date(year, month - 1, 1).getDay();
const getLastDate = (year, month) => new Date(year, month, 0).getDate();

const year = date.getFullYear();
const month = date.getMonth() + 1;

const firstDay = getFirstDay(year, month);
const lastDate = getLastDate(year, month);
const arr = Array.from(new Array(lastDate), (x, i) => i + 1);

console.log(firstDay);
console.log(arr);

2021년 9월 기준1日は水曜日から、最終日は30日に相当します.

しかしここで終了すると、カレンダーUI関連のコンポーネントのうち、前に何コマあるかわからないので、1日からということでunshift() 메서드を使い、firstDay 길이の配列の前にスペースを付けます.

arr.unshift(...new Array(firstDay));

UI関連コンポーネントに散布すると、次のようになります.

右クリックで日付を移動

まず、クリックボタンに基づいてレンダリングするためにstateとして管理する必要があります.

const [moveMonth, setMoveMonth] = useState(0);

const setMonth = type => {
  if (type === 'left') setMoveMonth(moveMonth - 1);
  else if (type === 'right') setMoveMonth(moveMonth + 1);
};

次に、setMonth 함수をサブエレメントに渡し、サブエレメントをクリックしてステータスを変更して月を変更できます.

前の日付を確認

new date(year-month-day)形式でnewdateを入れ、0時0分0秒を基準に年月日を基準に比較します.

const date1 = new Date('2021-09-18');
const date2 = new Date('2021-09-17');

console.log(date1 > date2); // true

コードに適用するには、初日から最終日までの値を配列とする場所で、比較日をオブジェクトとして作成します.

const isBeforeDay = (year, month, day) => {
  const padding = value => `00${value}`.slice(-2);

  const currentDay = new Date(
    `${today.getFullYear()}-${padding(today.getMonth() + 1)}-${padding(today.getDate())}`,
  );

  const checkDay = new Date(`${year}-${padding(month)}-${padding(day)}`);

  return currentDay > checkDay;
};


const arr = Array.from(new Array(lastDate), (x, i) => {
      const day = i + 1;

      return {
        day,
        beforeDay: isBeforeDay(year, month, day),
      };
});

💻 最終コード

function CalendarContainer() {
  const [moveMonth, setMoveMonth] = useState(0);
  const today = new Date();
  const leftDate = new Date(today.getFullYear(), today.getMonth() + moveMonth, 1);
  const nextDate = new Date(leftDate.getFullYear(), leftDate.getMonth() + 1, 1);

  const setMonth = type => {
    if (type === 'left') setMoveMonth(moveMonth - 1);
    else if (type === 'right') setMoveMonth(moveMonth + 1);
  };

  const getFirstDay = (year, month) => new Date(year, month - 1, 1).getDay();
  const getLastDate = (year, month) => new Date(year, month, 0).getDate();

  const isBeforeDay = (year, month, day) => {
    const padding = value => `00${value}`.slice(-2);

    const currentDay = new Date(
      `${today.getFullYear()}-${padding(today.getMonth() + 1)}-${padding(today.getDate())}`,
    );

    const checkDay = new Date(`${year}-${padding(month)}-${padding(day)}`);

    return currentDay > checkDay;
  };

  const getMonthData = date => {
    const year = date.getFullYear();
    const month = date.getMonth() + 1;

    const firstDay = getFirstDay(year, month);
    const lastDate = getLastDate(year, month);

    const arr = Array.from(new Array(lastDate), (x, i) => {
      const day = i + 1;

      return {
        day,
        beforeDay: isBeforeDay(year, month, day),
      };
    });
    arr.unshift(...new Array(firstDay));

    return { year, month, firstDay, lastDate, arr };
  };

  const leftMonth = getMonthData(leftDate);
  const rightMonth = getMonthData(nextDate);

  return <Calendar leftMonth={leftMonth} rightMonth={rightMonth} setMonth={setMonth} />;
}

🔖 demo