REACT-CALENDER 라이브러리 커스텀하기

이번 프로젝트때 진행햇던 react-calender 라이브러리 리뷰입니다 .

<StyledCalendar

tileClassName={tileClassName} // 

tileDisabled={tileDisabled}

onClickDay={ClickDate}

onChange={onChange}

value={date}

tileContent={tileContent}

formatDay={(locale, date) => dayjs(date).format('DD')}/>

 사용한 속성에대해 다뤄보겠습니다 .

 

1. 날짜 속성 변경 부분입니다 .( 주말 토요일 일요일 색을 넣어주기위한 작업 ) 

tileClassName={tileClassName} 

  const tileClassName=({ date })=>{

    // 일요일(0) 또는 토요일(6)인지 확인하여 클래스를 지정합니다.

    if (date.getDay() === 0 /* 일요일 */) {

      return 'sunday'; // 일요일에 해당하는 클래스

    }

    if (date.getDay() === 6 /* 토요일 */) {

      return 'saturday'; // 토요일에 해당하는 클래스

    }

    return ''; // 다른 날짜는 추가 클래스가 없습니다.

  }

.react-calendar__tile.saturday {

  color:#6560ff;

}

.react-calendar__tile.sunday {

  color:#ff8349;

}

 

2. 날짜 비활성화 부분입니다. 

tileDisabled={tileDisabled}

  const tileDisabled=({ date })=>{

    const currentDate = new Date();

    // 일주일 후의 날짜를 구합니다.

    const oneWeekLater = new Date(currentDate.getFullYear(), currentDate.getMonth(), currentDate.getDate() + 7);

    // 일주일 후부터의 날짜를 비활성화 처리합니다.

    return date >= oneWeekLater;

  }

 

오늘날부터 일주일후의 날짜만 활성화시키게 만든 함수입니다. (다이어리 부분이라 ㅎㅎ)

 

3.  날짜를 클릭햇을때 props로 부모에게 주기위한 온클릭 함수 (굳이 부모컴포넌트에 주지않으려면 useState로 set에 넣으면됨)

onClickDay={ClickDate}

  const ClickDate =()=>{

    props.setClick(true);

  }

 

4.  날짜에 대한 간단한 메모나 표시를 위한 함수 (필자의경우 일기 , 미션의 % 를 나타내주기위해 사용하였음)

tileContent={tileContent}

  const tileContent = ({ date }) => {  

    const formattedDate =selectedDate(date); // 날짜를 원하는 형식으로 포맷팅하는 함수

    const diaryDatas = diaryData ? (diaryData[formattedDate] || "") : "";

    const questDatas = questData ? (questData[formattedDate] || "") : "";

    return (

      <Story>

      <div className='story1'>

        {diaryDatas ? diaryDatas : ''}

      </div>

      <div className='story2'>

      {questDatas ? `미션 :${questDatas}%` : ''}

      </div>

      </Story>

    );

  };

 

5. 일 자없애주는 dayjs 포맷팅

formatDay={(locale, date) => dayjs(date).format('DD')}

 

으로 사용하였습니다 .

사용한 css는 style-component로 사용하였으며 필요한 속성 가져다 쓰면된다 .

물론 사용하기전에 

import 'react-calendar/dist/Calendar.css';

기본 캘린더 css는 불러오길바란다

const StyledCalendar = styled(Calendar)`

 /* 날짜의 글자 스타일 */

  .react-calendar__month-view__days__day-names,

  .react-calendar__month-view__days__day {

    font-family: 'Arial', sans-serif;

    font-size: 13px;

  }

 

  /* 선택된 날짜 스타일 */

  .react-calendar__tile--active:hover {

 

  }

  /* 날짜에 대한 호버 스타일 */

  .react-calendar__tile:hover {

  }

 

  /* 요일 스타일 */

  .react-calendar__month-view__weekdays__weekday abbr {

  }

  .react-calendar__month-view__weekdays__weekday{

}

 

  /* 년월 스타일 */

  .react-calendar__navigation {

 

  }

 

  /* 년월 레이블 스타일 */

  .react-calendar__navigation__label {

 

  }

  /* 네비게이션 버튼 스타일 */

  .react-calendar__navigation__arrow.react-calendar__navigation__prev-button,

  .react-calendar__navigation__arrow.react-calendar__navigation__prev2-button,

  .react-calendar__navigation__arrow.react-calendar__navigation__next-button,

  .react-calendar__navigation__arrow.react-calendar__navigation__next2-button{

 

  }

  /* 날짜 간 간격 */

  .react-calendar__month-view__days {

 

  }

 

  /* 달력 타일 */

  .react-calendar__tile {

 

  }

 

  /* 선택된 날짜 타일 */

  .react-calendar__tile--active {

 

  }

 

  /* 호버 및 액티브 스타일 */

  .react-calendar__tile--active:active,

  .react-calendar__tile:focus,

  .react-calendar__tile:hover {

  }

 

  /* 오늘 날짜에 대한 호버 및 액티브 스타일 */

  .react-calendar__tile--now:active,

  .react-calendar__tile--now:hover {

  }

 

  /* 오늘 날짜 스타일 */

  .react-calendar__tile--now {

  }

  /* 토요일 날짜 스타일 */

  .react-calendar__tile.saturday {

  }

  /* 일요일 날짜 스타일 */

  .react-calendar__tile.sunday {

  }

`;