[React]FullCalendar 한국어 모드에서 '일' 지우기

 

달력에 한국어 설정을 넣어주었더니 아래 사진과 같이 디자인적으로 마음에 들지가 않았다. 

그래서 '일'을 없애고자 결심!

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

function CustomCalender() {
  return (
    <FullCalendar
      plugins={[dayGridPlugin]}
      initialView="dayGridMonth"
      locale="ko" // 한국어 설정
    />
  );
}

export default CustomCalender;​

 

 

 

 

 

 

 

아래 블로그와 공식문서의 Content Injection 부분을 참고해서 코드 구현했다. 

 

https://develop-cat.tistory.com/4

[fullcalendar] 커스텀 달력 / 한국어 '일' 삭제하기

https://fullcalendar.io/docs/react

React Component - Docs | 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" // 한국어 설정
      dayCellContent={handleDayCellContent}
    />
  );
}

export default CustomCalender;

 

 

 

그 결과 아래와 같이 깔끔하게 나온다.