[Calendar] react-big-calendar event custom(커스텀) 하기 2

https://mingg123.tistory.com/286

[Calendar] react-big-calendar custom(커스텀) 하기

 

이전 포스팅에서는 css를 이용하여 캘린더 내 스타일을 간단하게 커스텀 하였다. 

 

오늘은 캘린더 내 event 커스텀 관련 포스팅을 작성하려고 한다. 

 

 

목적

 

-  캘린더 클릭 시 가격 정보 전달

- 이번달에 포함되지 않은 날 스타일 수정 

 

 

이벤트 추가

 

- react-big-calendar는 날짜를 선택하는 영역과(dateHeader), 날짜 밑에 적힌 내용물(?)을 선택하는 영역이 나뉘어 져있다.

 

날짜를 선택하는 영역 이벤트(4): `onSelectSlot`

날짜 밑에 적힌 내용물(20,000)을 선택하는 이벤트: `onSelectEvent` 

<Calendar
    backgroundColor={"#fff"}
    localizer={localizer}
    events={events}
    startAccessor="start"
    endAccessor="end"
    eventPropGetter={dayOfWeekStyleGetter}
    views={["month"]}
    formats={formats}
    selectable={true}
    // 추가 
    onSelectSlot={handleSlot} 
    onSelectEvent={(event, e) => {
    handleSlot(event);
    console.log("event", event);
    }}
    components={{
    toolbar: CustomToolbar,
    month: {
      dateCellWrapper: CustomDateCellWrapper,
      dateHeader: CustomDateHeader,
      event: CustomEventContent,
    },
    }}
/>


const handleSlot = (slot) => {
	setSelectedDate(slot.start);
}

 

클릭 시 콘솔 로그를 살펴보면 시간정보, 가격정보를 확인할 수 있다. 

 

 

 

이번달 미포함 영역 수정

적용 전

 

- 이전달(31) 및 다음달(1, 2, 3, 4)일 같은 경우엔 글자에 투명도를 적용하고 싶음.

- css 파일에서 수정하는 것이 아닌 커스텀으로 만든 컴포넌트 내에서 수정해야 한다. 

- 날짜 영역(dateHeader)과 이벤트 영역(가격정보)을 나누어서 수정해야 한다. 

 

1. 날짜 영역 투명도 설정

 

`CustomDateHeader` 컴포넌트 내 콘솔로 찍어보면 `isOffRange`로 이번달에 포함된 날인지 아닌지를 알려준다. 

 

  const CustomDateHeader = (props) => {
    console.log("props", props);
    const isOffday = props.isOffRange;
    return (
      <div
        style={{
          padding: 5,
          fontSize: "12px",
          fontWeight: "700",
          opacity: isOffday ? 0.2 : 1, // 추가 
        }}
      >
        {props.label}
      </div>
    );
  };

 

 

offday 적용 후

 

확인해보면 투명도를 추가한 부분이 31, 1, 2, 3, 4 일에 각각 적용되었다. (차이점 보이시죠?)

 

 

2. 가격부분(이벤트 영역) 에도 투명도를 적용해야 한다. 

 

`CustomEventContent`컴포넌트 내 props를 찍어보면 dateHeader 영역과 다르게 offDay관련 정보가 내려오지 않는다. 

 

결국 내가 이벤트 객체를 만들 때 넣어주었다. 

  const currentDate = new Date(); // 현재 날짜 가져오기
  const currentMonth = currentDate.getMonth(); // 현재 월 가져오기

  const events =
    list &&
    list.map((elem) => {
      const eventDate = new Date(elem.date);
      const eventMonth = eventDate.getMonth(); // 이벤트의 월 가져오기
      const offDay = eventMonth !== currentMonth;
      return {
        title: `${(elem.price || 0).toLocaleString()}`,
        start: new Date(elem.date),
        end: new Date(elem.date),
        extendedProps: {
          offDay: offDay,
        },
      };
    });

 

콘솔 로그를 다시 찍어보면 추가해준 props가 내려옴을 확인할 수 있다. 

 

  const CustomEventContent = (props) => {
    console.log("props", props.event);
    const ifOffday = props.event.extendedProps.offDay;

    return (
      <div
        style={{
          opacity: ifOffday ? 0.2 : 1,
        }}
      >
        {props.event.title}
      </div>
    );
  };

 

offday 적용 후

 

가격 부분도 투명도가 적용됨을 확인할 수 있다. 

 

 

현재 커스텀으로 만든 헤더 영역에서 클릭시 달력 일자가 넘겨지지 않는 버그가 있는데.. 수정 이후 추가 포스팅 하도록 하겠음.