Full Calendar에서 휴일을 텍스트로 표시합니다(등)

fullcalendar.js에서는 이벤트가 아니라 날짜 옆에 휴일 (등 텍스트) 을 텍스트 정보로 표시하는 방법입니다.수색해도 찾을 수 없으니 남겨 두어라.사용 버전은 v3입니다.10.0.

완성도

날짜 왼쪽의 명절 이유 부분.

휴일 이벤트 가져오기

eventSourcers에서는 일반적인 이벤트와 달리 휴일에 대한 정보를 얻으며 class Name으로 class를 미리 추가합니다.구글 달력에 있는 일본 명절에서 끌어내는 것도 괜찮다.
참조: 이벤트 from Google Calendar(USholiday 예제 게재)
https://fullcalendar.io/docs/google-calendar

eventSources: [
    {
        url: '/events',
    },
    {
        url: '/holiday',
        className: 'holiday',
    }
],

공휴일 데이터 표시

위에서 말한 바와 같이 명절을 이벤트로 표시하기 때문에 이벤트 Rendar를 사용하여 날짜 표시줄 옆에 명절 이유를 추가하고 이벤트 표시줄의 정보를 숨깁니다.
설명서의 느낌을 대충 봤는데 v4의 이벤트 Rendar 부분에 변화가 있기 때문에 이벤트 Element→el 같은 것을 선택하는 것이 좋을 것 같아요(안 해봤어요).
eventRender
https://fullcalendar.io/docs/eventRender

eventRender: function(event, eventElement) {
    if (event.source.className == "holiday"){
        //祝日データを表示
        jQuery('.fc-day-top[data-date=' + event.start._i + ']').prepend("<span class='holiday-text'>" + event.title + "</span>");
        //内容は表示しない
        return false;
    }
},

날짜 색상을 변경하려는 경우

eventRender: function(event, eventElement) {
    if (event.source.className == "holiday"){
        jQuery('.fc-day-top[data-date=' + event.start._i + ']').addClass("fc-holiday");
        jQuery('.fc-list-heading[data-date=' + event.start._i + ']').addClass("fc-holiday");
        return false;
    }
},

css로 이렇게 만든 느낌이 좋아요.

.fc-holiday, .holiday-text {
    color: #e74c3c;
}