FullCalendar

import dayGridPlugin from "@fullcalendar/daygrid";
import interactionPlugin from "@fullcalendar/interaction";
import FullCalendar from "@fullcalendar/react";
import timeGridPlugin from "@fullcalendar/timegrid";
import "./Calendar.css";

const Calendar = () => {
  const plugin = [
    dayGridPlugin, // 월간 달력 // day 그리드
    timeGridPlugin, // 주간, 일간 달력 // time 그리드 보기
    interactionPlugin
    /* 이벤트를 위한 플러그인
    일정 추가/수정 : 캘린더에 새 이벤트를 추가하거나 기존 이벤트를 수정 
      : 이벤트를 클릭하면 이벤트 정보를 수정하는 팝업이나 모달 띄움
    드래그 앤 드롭 : 마우스로 드래그하여 다른 날짜나 시간으로 이동
    리사이징 : 기간을 변경하여 이벤트의 기간을 늘이거나 줄임
    일정 클릭 이벤트
    */
  ];

  return (
    <FullCalendar
      // height={} // 높이 지정
      plugins={plugin}
      initialView="dayGridMonth" // 초기뷰 dayGridMonth or timeGridWeek
      headerToolbar={{ // 띄어쓰면 갭이 생기고, 콤마가 있으면 그룹으로 묶는 형태
        left: "title",
        // center: "today prev,next",
        right: "dayGridMonth,timeGridWeek,timeGridDay today"
      }}
      footerToolbar={{
        left: "prev",
        center: "",
        right: "next"
      }}
      /* 
          headerToolbar {
            title : text containing the current month/week/day 
            현재 월 / 일 / 년 의 텍스트
            prev : button for moving the calendar back one month/week/day
            이전 버튼
            next : button for moving the calendar forward one month/week/day
            다음 버튼
            prevYear : button for moving the calendar back on year
            이전 년도
            nextYear : button for moving the calendar forward one year
            다음 년도
            today : button for moving the calendar to the current month/week/day
            오늘로 이동
          }
          footerToolbar : headerToolbar와 동일한 옵션
        */
      //

      // titleFormat={{ year: "numeric", month: "short", day: "numeric" }}
      // eventDisplay=""

      // eventBackgroundColor="yellow" // 이벤트 배경색 미지정시 디폴트값으로 활용 가능
      // eventBorderColor="yellow" // 이벤트 보더색 미지정시 디폴트값으로 활용 가능
      // eventColor="blue" // eventBackgroundColor & eventBorderColor 두 값이 같을 때 // 우선순위 낮음
      //
      // navLinks={true} // 확인 안됨
      // navLinkDayClick={} // 확인 안됨
      // navLinkWeekClick={} // 확인 안됨
      // navLinkHint={} // 확인 안됨

      buttonText={{
        // prev: "이전", // 부트스트랩 아이콘으로 변경 가능
        // next: "다음",
        // prevYear: "이전 년도",
        // nextYear: "다음 년도",
        today: "오늘",
        month: "월별",
        week: "주별",
        day: "일별",
        list: "리스트"
      }}
      /* 버튼 텍스트 default {{
          prev: "<",
          next: ">",
          prevYear: "<<",
          nextYear: ">>",
          today: "today",
          month: "month",
          week: "week",
          day: "day",
        }} */
	  // event = 일정
      events={scheduleData} // 달력에 표시 될 이벤트
      eventClick={eventClick} // 이벤트 클릭시
      eventChange={eventChange} // 이벤트 drop 혹은 resize 될 때
      editable={true} // 사용자의 수정 가능 여부 (이벤트 추가/수정, 드래그 앤 드롭 활성화)
      selectable={true} // 사용자의 날짜 선택 여부
      selectMirror={true} // 사용자의 시간 선택시 time 표시 여부
      select={select} // 날짜가 선택 될 때
      weekends={true} // 주말 표시 여부
      dayMaxEvents={true} // 하루에 표시 될 최대 이벤트 수 true = 셀의 높이
      navLinks={true} // 달력의 날짜 클릭시 일간 스케쥴로 이동
      navLinkHint={"클릭시 해당 날짜로 이동합니다."} // 날짜에 호버시 힌트 문구
      // eventContent={fn(): node {} || true} // 일정 커스텀
      eventsSet={function () {
        console.log("eventsSet");
      }} // 
      eventAdd={function () {
        console.log("eventAdd");
      }} // 추가시 로직
      eventDrop={function () {
        console.log("eventDrop");
      }} // 드롭시 로직
      eventRemove={function () {
        console.log("eventRemove");
      }} // 제거시 로직
    />
  );
};

export default Calendar;

// 임시 data
const scheduleData = [
  // Todo DB 에서 GET 하기
  {
    title: "단일 date",
    start: "2023-08-07T10:00:00",
    end: "2023-08-07T14:00:00"
  }, // end는 optional date
  {
    title: "단일 date",
    start: "2023-08-05",
    backgroundColor: "#727272",
    textColor: "#ffffff",
    borderColor: "#000000"
  }, // end는 optional date
  { title: "단일 date", start: "2023-08-07", end: "2023-08-06" }, // end가 start보다 작아도 에러를 띄우지 않음
  { title: "복수 date", start: "2023-08-09", end: "2023-08-12" }
];

/* 각 클래스의 색상을 바꾸는 방법도 있지만 지정된 변수들을 재할당하여 색상 및 크기를 조절 하는 방법을 사용했습니다.  */
:root {
  --fc-small-font-size: 0.85em;

  --fc-page-bg-color: #fff;
  --fc-neutral-bg-color: hsla(0, 0%, 82%, 0.3);
  --fc-neutral-text-color: grey;
  --fc-border-color: #ddd;

  --fc-button-text-color: #fff;

  --fc-button-bg-color: #f3af00;
  --fc-button-border-color: #f3af00;

  --fc-button-hover-bg-color: #f8cf66;
  --fc-button-hover-border-color: #f8cf66;

  --fc-button-active-bg-color: #f8cf66;
  --fc-button-active-border-color: #f8cf66;

  --fc-event-bg-color: #3788d8;
  --fc-event-border-color: #3788d8;
  --fc-event-text-color: #fff;
  --fc-event-selected-overlay-color: rgba(0, 0, 0, 0.25);

  --fc-more-link-bg-color: #d0d0d0;
  --fc-more-link-text-color: inherit;

  --fc-event-resizer-thickness: 8px;
  --fc-event-resizer-dot-total-width: 8px;
  --fc-event-resizer-dot-border-width: 1px;

  --fc-non-business-color: hsla(0, 0%, 84%, 0.3);

  --fc-bg-event-color: #8fdf82;
  --fc-bg-event-opacity: 0.3;

  --fc-highlight-color: rgba(188, 232, 241, 0.3);
  --fc-today-bg-color: rgba(255, 220, 40, 0.15);

  --fc-now-indicator-color: red;

  --fc-daygrid-event-dot-width: 8px;
}

.fc {
  height: 90vh;
  margin: 20px;
}

.fc-daygrid-event {
  border: none;
}

/* 요일 행 높이지정 */
.fc .fc-scrollgrid-section table {
  height: 50px;
}

/* 요일 행 TEXT 중간 정렬 */
.fc td,
.fc th {
  vertical-align: middle;
}

/* 타임 그리드(주별 & 일별)에서의 이벤트 */
.fc-v-event {
  border-radius: 10px;
  padding: 5px;
  color: black;
}

/* 타임 그리드 하루종일 일정 */
.fc-scrollgrid-shrink {
  height: 70px;
}

/* 타임 그리드 30분당 일정 */
.fc .fc-timegrid-slot-label {
  height: 50px;
}

/* 타임 그리드(주별 & 일별)에서 시간 TEXT */
.fc-timegrid-event .fc-event-time {
  font-size: 1rem;
  color: #727272;
}

/* 데이 그리드(월별)에서 시간 TEXT */
.fc-direction-ltr .fc-daygrid-event .fc-event-time {
  font-size: 1rem;
  color: #727272;
}

/* 타임 그리드(주별 & 일별)에서 내용 TEXT */
.fc-timegrid-event .fc-event-title {
  font-size: 1.2rem;
  color: black;
}

/* 데이 그리드(월별)에서 내용 TEXT */
.fc-daygrid-block-event .fc-event-title {
  font-size: 1rem;
  color: black;
}

.fc-event-main-frame {
  border-radius: 20px;
}