[React Component - Docs

| FullCalendar](https://fullcalendar.io/docs/react)

1. 풀캘린더 설치
npm i --save @fullcalendar/core @fullcalendar/react @fullcalendar/daygrid

2. 컴포넌트에서 import 후 설정
import FullCalendar from "@fullcalendar/react";
import dayGridPlugin from "@fullcalendar/daygrid"

function Calendar() {
    return (
        <div className="sub-layer">
            <div className="relative top-7 w-full">
                <FullCalendar 
                plugins={[ dayGridPlugin ]} 
                initialView="dayGridMonth"
                />
            </div>
        </div>
    )
}

export default Calendar;

React로 FullCalendar Events 띄우기

FullCalendar with React

// calendar.jsx

import FullCalendar from "@fullcalendar/react";
import dayGridPlugin from "@fullcalendar/daygrid";
import interactionPlugin from "@fullcalendar/interaction";
import { useState } from "react";

function Calendar() {
  // 이벤트 목록 받아올 배열
  const [selectedEvents, setSelectedEvents] = useState([]);

  // 캘린더 날짜 선택 시
  const handleDateClick = (arg) => {
    const clickedDate = arg.dateStr;
    const ThisDate = myEvents.filter((event) => {
      const clickDay = event.date;
      return clickedDate === clickDay;
    });
    setSelectedEvents(ThisDate);
  };

  const myEvents = [{ title: "이벤트1", date: "2024-04-01", name: "신시은" }];

  return (
    <div className="sub-layer">
      <div className="relative w-full top-[65px]">
        <FullCalendar
          plugins={[dayGridPlugin, interactionPlugin]}
          initialView="dayGridMonth"
          events={myEvents}
          dateClick={handleDateClick}
          locale="kr"
          headerToolbar={{
            left: "prev",
            center: "title",
            right: "today next",
          }}
        />
      </div>

      <div className=" flex h-[240px] w-full flex-col items-start p-3 border-t-2 z-10 bg-white">
        {/* 선택한 날짜에 대한 기념일 목록 출력 */}
        {selectedEvents.map((event, index) => (
          <div key={index}>
            😘{event.name}의 {event.title}
          </div>
        ))}
      </div>
    </div>
  );
}

export default Calendar;

<FullCalendar
  plugins={[dayGridPlugin, interactionPlugin]}
  initialView="dayGridMonth"
  events={events}
  dateClick={handleDateClick}
  locale="kr"
  headerToolbar={{
    left: "prev",
    center: "title",
    right: "today next",
  }}
  customButtons={{
    today: {
      text: "Today",
      click: handleClickToday,
    },
  }}
/>;

// headerToolbar, customButtons를 통한 일부 커스텀
// 더 이쁘게 하고싶다.

const today = new Date();
console.log(today);
// 결과값 : Tue Apr 02 2024 01:11:28 GMT+0900 (한국 표준시)

const todayStr1 = today.toISOString();
console.log(todayStr1);
// toISOString() 메서드는 ISO 형식의 문자열을 반환
// 이 문자열은 "YYYY-MM-DDTHH:mm:ss.sssZ" 형식을 가집니다.
// 여기서 "T"는 날짜와 시간을 구분하는 문자입니다.
// 결과값 : 2024-04-02T01:11:28.000Z

const todayStr = today.toISOString().split("T")[0];
console.log(todayStr);
// "T" 를 기준으로 문자열을 분할하여 배열로 만듦. ["2024-04-02", "01:11:28.000Z"]
// 결과값 : 2024-04-02

[datesSet - Docs

| FullCalendar](https://fullcalendar.io/docs/datesSet)

// 풀캘린더에서 날짜 받아서 split한 값을 curYear, curMonth에 할당
  const handleCurDate = (dateInfo) => {
    const year = dateInfo.startStr.split("-")[0]; // 연도 추출
    let month = parseInt(dateInfo.startStr.split("-")[1], 10); // 월 추출
    month += 1 // 월 데이터가 0 부터 11로 되어있다. 그래서 1을 더해줘야 한다.
    const formatMonth = month < 10 ? `0${month}` : `${month}` // 월을 01, 02 이런식으로 표현하도록 변경
    setCurYear(year) // 현재날짜기준 04
    setCurMonth(formatMonth) // 현재날짜기준 2024
  }
  
// 2024-04-03 수정
// 풀캘린더에서 날짜 받아서 split한 값을 curYear, curMonth에 할당
  const handleCurDate = (dateInfo) => {
    // 연도와 월의 형식이 2024-04-02로 들어오는데
    // "-"를 기준으로 나눈 후에, 10진수의 정수로 반환한다.
    let year = parseInt(dateInfo.startStr.split("-")[0], 10); 
    let month = parseInt(dateInfo.startStr.split("-")[1], 10); 
    month += 1 // 월 데이터가 0 부터 11로 되어있다. 그래서 1을 더해줘야 한다.
    if (month > 12) { // 12월 넘어가면
      month = 1 // 1월로 초기화
      year += 1 // 1년 추가
    }
    const formatMonth = month < 10 ? `0${month}` : `${month}` // 월을 01, 02 이런식으로 표현하도록 변경
    setCurYear(year)
    setCurMonth(formatMonth)
  }

// 한국 시간으로 변환
// wrtn 발 코드
  const KoreaTime = () => {
    const koreaTimeFormat = new Intl.DateTimeFormat('ko-KR', {
      year: 'numeric',
      month: '2-digit',
      day: '2-digit',
      timeZone: 'Asia/Seoul',
    });
    const today = new Date();
    const formattedDate = koreaTimeFormat.format(today).replace(/\\. /g, '-').replace(/\\./, '');
    return formattedDate; // 'YYYY-MM-DD' 형태로 반환
  };

[showNonCurrentDates - Docs

| FullCalendar](https://fullcalendar.io/docs/showNonCurrentDates)

<FullCalendar
          ref={calendarRef}
          plugins={[dayGridPlugin, interactionPlugin]}
          initialView="dayGridMonth"
          events={events}
          dateClick={handleDateClick}
          locale="kr"
          headerToolbar={{
            left: "prev",
            center: "title",
            right: "today next",
          }}
          customButtons={{
            today: {
              text: KoreaTime().split("-")[2], // 오늘 날짜를 today 글자 대신 표현
              click: handleClickToday,
            },
          }}
          datesSet={handleCurDate}
          eventContent={() => {
            return "";
          }}
          eventBackgroundColor="#FD7676"
          showNonCurrentDates={false} // 최근날짜가 아닌것도 보여준다 false 처리
        />