[fullCalendar] title 명에 html 태그 적용하기 (feat.ibCalendar)

 

 

 

---

---

 

 

 

 

 

fullCalendar를 커스텀한 ibCalendar 라는 국내 라이브러리를 사용하고 있는데

레거시 버전에서 사용하던 fullCalendar는 event title 에 개행문자(\n) 가 적용이 잘 되었는데

 

ibCalendar ( fullCalendar v5.9) 에서는 적용이 되질 않았다.

버전업이 되면서 개행문자나 엘리먼트등이 반영되지 않았다.

 

 

일단 ibCalendar 레퍼런스에는 간단하게 처리하는 옵션이 없어보여

fullCalendar Docs 와 fullCalendar github issue 등에서 찾아보니

 

아래와 같이 eventRender 를 사용하라고 되어있는데

내가 사용하는 ibCalendar 에서는 적용되질 않았다.

(애초에 ibCalendar 는 title class 값도 약간 다른데 일단 ibCalendar 자체에 옵션이 존재하지 않는 것 같음)

 

 

eventRender: function( event, element) {
        var title = element.find('.fc-title, .fc-list-item-title');          
        title.html(title.text());
}

 

 

 

 

 

 

 

그래서 더 서칭을 해본 결과

eventContent 콜백함수를 사용하여 html 형태로 지정할 수 있었다.

event 의 확장속성에 내가 설정한 html 구문을 표기하라는 구문이다.

 

eventContent: function(eventInfo) {
    return { html: eventInfo.event.extendedProps.customHtml }
}

 

 

 

 

 

ibCalendar 에도 잘 적용되는 것을 확인했고

ibCalendar Docs 를 찾아보니 저 옵션이 존재했다.

설명이 쫌... 부실하긴 한데 ㅋㅋㅋ

일단 fullCalendar git issue 에서 사용한 것을 토대로 보고 사용하게 됐다.

 

 

 

 

 

 

---

ibCalendar 에 작성한 이벤트 스크립트는 아래와 같다.

 

options = {
    eventSources: [
        {
           id: "calendar",
           events: [
                 {"id":"uuid1",
                      "title":"[02/01][공통이벤트]이벤트명-발송매체:채널톡",
                      "customHtml":"[02/01]<br>[공통이벤트]이벤트명<br>-발송매체:채널톡",
                      "start":"2024-02-01","color":"#ad1457"
                  },{"id":"uuid2",
                     "title":"이벤트명-발송매체:채널톡",
                     "customHtml":"이벤트명<br>-발송매체:채널톡",
                     "start":"2024-02-20",
                     "color":"#0984e3"
                 }
           ],
        }
    ],
    eventContent: function(eventInfo) {
        return { html: eventInfo.event.extendedProps.customHtml }
    }
}

 

 

 

 

내가 커스텀한 문구를 customHtml (명칭을 원하는데로 해도 상관 없음) 에 작성해주고

eventContent 에서 innerHTML 삽입할 문자열을 {html : '' } 형태로 작성하여

콜백인자를 통하여 event 데이터의  customHtml 을 삽입하라고 지정하면 된다.

 

내가 원하는 형태로 html 을 넣어주면 처리가 가능해진다.

 

 

 

 

 

---

---

 

 

 

 

 

 

 

참고자료

Easy way to get HTML into an event title · Issue #2919 · fullcalendar/fullcalendar