fullcalendar 한국어 일 제거하는 방법

vue3로 프로젝트를 하면서 달력을 써야하는 일이 생겼다.

fullcalendar를 사용하기로 했다.

한국어만 지원하는 페이지인만큼 달력 locale도 한국어로 바꿨는데 day에 '일'이라는 글자가 나왔다.. 와 진짜 뵈기싫어..

생각이 있냐없냐?

 

구글링을 했을 때 결과가 제대로 나오지 않아서 일본어로 locale을 변경해보니 일본어 역시 日이라는 글자가 붙어서 나왔다.

그래서 fullcalendar remove 日  치니까 스택오버플로에 질문한 사람이 있었다.

https://stackoverflow.com/questions/55788550/fullcalendar-remove-day-suffix-in-daygridmonth-view-when-using-japanese

Fullcalendar - Remove day suffix in dayGridMonth View when using Japanese

 

답변의 예제를 사용하려면 moment.js 가 설치되어 있어야한다.

import moment from 'moment';

먼저 해주고 new Calendar 두번째 인자로 

dayCellDidMount: function(info){              
    var day = moment(info.date).format('D') // custom the text for example

    // hide the original one
    var originElement = info.el.querySelectorAll(".fc-daygrid-day-number")
    originElement.forEach(e => e.classList.add("d-none")  ); 

    // insert new text
    var targetElement = info.el.querySelectorAll(".fc-daygrid-day-top");
    targetElement.forEach(e => e.innerHTML = day );
},

다음과 같이 작성해주면 된다.

스택오버플로 답변에서는 day format을 DD로 해주었는데 나는 D로 하였다.

 

결과물 짜잔~