Fullcalendar에서 event 잘림 현상 해결하기

fullcalendar를 사용하여 보고서의 내용을 제공하기 위해서는 

아래의 코드에서 title : '가나다라마바사...' 부분에 보고서의 요약본을 넣어주어야한다.

document.addEventListener('DOMContentLoaded', function() {
    var calendarEl = document.getElementById('calendar');
    //var today_date = calendar.getDate();
    
    var calendar = new FullCalendar.Calendar(calendarEl, {
        headerToolbar: {
            left: 'prev,next',
            center: 'title',
            right: 'today'
        },
        initialDate: '2021-01-01' //today_date  //오늘 날짜로 변경해야 함
        , editable : true
        , eventLimit : true
        , events: [
            {
                start: '2021-01-06',
                overlap: false,
                display: 'background',
                backgroundColor: "#00b9ba"
            },
            {
                title : '가나다라마바사아자차카타파하',
                start: '2021-01-06',
                backgroundColor: "rgba(0, 185, 186, 0)",
                borderColor : "rgba(0, 185, 186, 0)",
                textColor : "#000000"
            }
        ]
        
    });
        calendar.render();
});

하지만 위의 코드를 사용한다면 

그림과 같이 title이 잘리는 현상이 발생한다. 이러한 문제는 CSS 파일에  

.fc-event-title.fc-sticky{
    white-space: normal;
}

내용을 추가하면 바로 해결된다!

 

⭐︎ 만약 위의 코드로 변경되지 않는다면 fn+f12 키를 통해 title 부분의 이름을 보고 'fc-event-title.fc-sticky'부분을 수정하면 된다!