Fullcalendar 랜더링 에러 해결방법

두 줄 요약
- Tab을 클릭 후 fullcalendar 출력 시 문제점 발생(모든 글씨가 모여서 출력됨)
- settimeout을 이용해 해결

배경 설명
- 결재 완료된 근태의 가독성을 높이기 위해 Fullcalendar를 이용하기로 결정
- Tab을 이용해 기안문 리스트와 Fullcalendar를 페이지 이동없이 출력하기로 수정
- Tab을 이용시 Fullcalendar가 이상하게 출력됨

 

 

---

 

문제점

---

아래 사진과 같이 Fullcalendar내 출력사항이 왼쪽 상부에 몰려서 출력됨.

하지만, 브라우저 스케일을 수정(Resizing)하면 제대로 출력됨

 

문제사진

 

 

정상출력됨

 

---

 

 

추론

---

1) Bootstrap CSS 설정과 충돌로 인한 오류일까?
    ► Fullcalendar에서 사용하는 id나, class 명 자체가 Boostrap CSS명과 겹치지 않음

2) Tab 기능 구현 코드 오타?
    ► 전체 코드 확인 결과 문제 없음 확인

3) Fullcalendar 버전 에러?
    ▶ StackoverFlow 및 구글링 결과 유사한 경우 없음

 

 

그럼 랜더링 관련 에러??

 

이와 관련한 문제점이 있는지 검색결과 유사한 경우 확인함

 

https://stackoverflow.com/questions/63386117/fullcalendar-not-loading-in-boostrap-4-tab

FullCalendar not loading in Boostrap 4 tab

 

 

문제해결

---

Fullcalendar가 들어있는 tab의 Id를 가져와 setTimeout을 이용해 랜더링 시간 조정하여 문제해결

 document.addEventListener('DOMContentLoaded', function() {

            var calendarButton = document.getElementById('calendarButton');
            var calendarEl = document.getElementById('calendar');
        
            var calendar = new FullCalendar.Calendar(calendarEl, {
              editable: false,
              selectable: false,
              businessHours: true,
              dayMaxEvents: true, // allow "more" link when too many events
              events: [
                {
                  title: 'Conference',
                  start: '2023-01-11',
                  end: '2020-09-13'
                },
                {
                  title: 'Meeting',
                  start: '2023-01-12T10:30:00',
                  end: '2023-01-12T12:30:00'
                },
                {
                  title: 'Dinner',
                  start: '2023-01-12T20:00:00'
                },
                {
                  title: 'Birthday Party',
                  start: '2023-01-13T07:00:00'
                }
              ]
            });
        
            calendarButton.addEventListener('click', e => {
                setTimeout(() => {calendar.render()}, 1);
            });
            
          });

 

* 기능 설명 : setTimeout(() => { 지연시킬 코드 }, 지연시간) // 지연시간 1000 = 1초, 10000 = 10초

 

 

이상 Fullcalendar와 tab기능 시 발생한 에러 해결 방법에 대한 설명을 마치겠습니다.

 

감사합니다.