[React]FullCalendar _ 토,일 날짜 추가

기본적인 캘린더 커스텀 후 

 

import React from "react";
import FullCalendar from "@fullcalendar/react";
import dayGridPlugin from "@fullcalendar/daygrid"; // a plugin!
import "./CustomCalendar.css";

function CustomCalender() {
  const handleDayCellContent = (arg) => {
    const dayNumber = arg.dayNumberText.replace("일", "");
    return dayNumber;
  };
  return (
    <FullCalendar
      plugins={[dayGridPlugin]}
      initialView="dayGridMonth" //처음 보이는 부분은 달
      locale="ko" // 한국어 설정
      //상단의 핸들바
      headerToolbar={{
        left: "prev,next", //이전 달, 다음 달,
        center: "title", //제목
        right: "today", // 오늘
      }}
      //Sizing
      height={"600px"}
      //Month
      fixedWeekCount={false} //true면 기본이 6줄
      weekends={true} //true이면 토,일이 추가됨. 
      dayCellContent={handleDayCellContent}
    />
  );
}

export default CustomCalender;

 

css 파일에 아래와 같이 추가해주었다. 

/*일요일 날짜 빨간색*/
.fc-day-sun a {
  color: #ff6767;
}
/* 토요일 날짜 파란색 */
.fc-day-sat a {
  color: #568ddf;
}

/* 상단의 핸들바 css */
.fc-button-primary {
  background-color: rgba(250, 249, 252, 1) !important;
  border: #a581cf !important;
  color: black !important;
  border: none;
}
.fc-today-button {
  background-color: #ffcb6b !important;
}

 

결과