달력에 한국어 설정을 넣어주었더니 아래 사진과 같이 디자인적으로 마음에 들지가 않았다.
그래서 '일'을 없애고자 결심!
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] 커스텀 달력 / 한국어 '일' 삭제하기
이번에는 정말 정말 오전 내내 시간을 보냈던 내용을 정리하려고 한다. 문제점 위 그림과 같이 날짜에 1일, 2일, 3일...이렇게 '일'이 붙은걸 볼 수 있다. 원하는 건 다른 달력과 마찬가지로 1, 2, 3..
develop-cat.tistory.com
https://fullcalendar.io/docs/react
React Component - Docs | FullCalendar
FullCalendar seamlessly integrates with the React JavaScript framework. It provides a component that exactly matches the functionality of FullCalendar’s standard API. This package is released under an MIT license, the same license the standard version of
fullcalendar.io
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;
그 결과 아래와 같이 깔끔하게 나온다.
'💻개발 > React,Vue' 카테고리의 다른 글
[React]FullCalendar _ 토,일 날짜 추가 (0) | 2023.11.24 |
---|---|
[React]cookie (0) | 2023.08.02 |
[React].env 파일 (0) | 2023.08.01 |
🔔Vue.js (0) | 2023.05.09 |