[React] Calendar 라이브러리와 Moment 라이브러리

- Calendar Library

말 그대로... 달력 표시할 때 사용.

- Moment Library

시간이 포함된 데이터를 받아 조작해야 할 경우 사용.

 

달력이야 흔하니 굳이 설명은 않겠지만 moment는 조금 설명을 해두는 게 좋지 않을까 싶다.

https://momentjs.com/docs/ 공식 문서

- Calendar 활용

(조금 나중에...)

 

- Moment 활용

$ npm i moment
//혹은 yarn add moment

설치했다면 import해서 사용하면 된다. 자동으로 한국 시간을 불러온다지만 확실하게 하기 위해선 import 'moment/locale/ko'; 해주면 된다.

moment(date).format("DD")

moment에 날짜를 넣고 format으로 형식을 지정하면 format에 맞춰 date를 확인할 수 있다.

 

좋은 정리 사이트

https://haranglog.tistory.com/10

[React] 리액트에서 react-moment, moment.js 사용하여 실시간으로 변경되는 시간 만들기

커스텀 관련

https://velog.io/@hhjj0513/TIL-React-%EC%BA%98%EB%A6%B0%EB%8D%94-react-calendar-%EB%9D%BC%EC%9D%B4%EB%B8%8C%EB%9F%AC%EB%A6%AC-TypeScript-%EC%A0%81%EC%9A%A9-

TIL | React 캘린더 (react-calendar 라이브러리 - TypeScript 적용 ...)

 

주차 계산

//일요일부터 주차 계산
const getCurrentweek: () => string = () => {
    var now = moment(selectDate).week()
    var lastmonthweek = moment(selectDate).subtract(1, 'months').endOf('month').week()
    return moment(selectDate).format("YYYY년 MM월 ") + (now - lastmonthweek + 1).toString() + "주차"
  }

//월요일부터 주차 계산
const getCurrentweek: () => string = () => {
    var now = moment(selectDate).subtract(1,"day").week()
    var lastmonthweek = moment(selectDate).subtract(1, 'months').endOf('month').week()
    return moment(selectDate).format("YYYY년 MM월 ") + (now - lastmonthweek + 1).toString() + "주차"
  }
  
  //substract로 하루만 빼면 됨

 

일자별 필터링(더 좋은 방법이 있겠지만 아무튼... 우리 프로젝트에서 내가 한 것)

events.filter((e) => {
        if (criterion == "day" || criterion == "week" || criterion == "month") {
          const target = moment(targetDate).subtract(1,"day")
          //하루 당겨서 월~일로 만들기 위해 하루 뺌
          
          if(criterion==="week"){
          //기본은 일~토 필터링인데 월~일로 필터링하고싶어서 로직 수정
            const eventStartDate = moment(e.startDate).subtract(1,"day").startOf("week")
            const eventEndDate = moment(e.endDate).subtract(1,"day").endOf("week")
            // const eventEndDate = moment(e.endDate).endOf(criterion)
            // eventStartDate.add(1,"day")
            // eventEndDate.add(1,"day")
            return target >= eventStartDate && target <= eventEndDate;
          }
          
          else{
          //기본
            const eventStartDate = moment(e.startDate).startOf(criterion)
            const eventEndDate = moment(e.endDate).endOf(criterion)
            return target >= eventStartDate && target <= eventEndDate;
          }
        }
      })