5. [React] React로 FullCalendar 사용2 - 주말 색상 변경

★ FullCalendar 목차

https://dhdl-it.tistory.com/category/React/FullCalendar

'React/FullCalendar' 카테고리의 글 목록

---

 

안녕하세요. 지난번에 React로 FullCalendar를 화면에 띄우는 부분까지 했다면, 오늘은 주말 색상 변경하는 방법에 대해 공유하고자 합니다.

 

2. [React] React로 FullCalendar 사용1

2. [React] React로 FullCalendar 사용1 - 기본

 

위의 글까지 완성한 FullCalendar 화면입니다.

기존 화면

기존 화면

 

위의 화면에서는 주말 구분이 없어서,

일반 달력과 같이 토요일에는 파란색, 일요일에는 빨간색 글자가 되면 좋을 것 같습니다.

 

방법은 간단합니다.

위의 FullCalendar를 보여주는 파일 이름이 MyCalendar.js 라면,

동일한 위치에 MyCalendar.css 파일을 생성해줍니다.

 

MyCalendar.css

/* MyCalendar.css */

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

 

그 후에, MyCalendar.js 파일의 윗부분에 MyCalendar.css를 import해주면 끝입니다.

// MyCalendar.js

import './MyCalendar.css';

 

결과 화면

실행 결과