[fullcalendar-eventOrder] event 정렬 로직 적용

배경설명

• fullcalendar 라이브러리는 event의 시작 시간이 없는 경우, evnet의 title 기준 알파벳 또는 한글 순으로 정렬 (default)

문제인식

• 백엔드에서는 시작일자 외 조건에 따른 sort 로직이 적용된 배열 응답
• 배열을 fullcalendar event에 추가 시, default sort 로직 (알파벳, 한글 오름차순) 이 적용되는 문제 발생!
• event 출력 시, 백엔드 sort 로직이 적용된 배열 순서 그대로 출력 필요!

해결방법

• fullcalendar에서 제공하는 eventOrder를 활용해보자!

fullcalendar 샘플 소스

let calendar;
document.addEventListener('DOMContentLoaded', function() {
   const calendarEl = document.getElementById('calendar');
   calendar = new FullCalendar.Calendar(calendarEl, {
    initialView: 'dayGridMonth', // (기본 설정: 달)
    locale: 'ko', // 한국어 설정
    // 이벤트 
    events: eventsArr,
   });
	calendar.render();
});

ASIS (default sort)

• 샘플 소스

eventsArr: [
	{
    	title: '라',
        start: '2023-03-04',
    },
    {
    	title: '다',
        start: '2023-03-04',
    },
    {
    	title: '가',
        start: '2023-03-04',
    },
    {
    	title: '마',
        start: '2023-03-04',
    },
    {
    	title: '나',
        start: '2023-03-04',
    },  
],

• 캡처 : 배열의 index와 관계없이 가나다 한글 오름차순 자동 정렬 (default)
  

TOBE (eventOrder 적용)

• 샘플 소스 : sortIdx 요소 추가 및 eventOrder 등록

eventsArr: [
	{
    	title: '라',
        start: '2023-03-04',
        sortIdx: 0,
    },
    {
    	title: '다',
        start: '2023-03-04',
        sortIdx: 1,
    },
    {
    	title: '가',
        start: '2023-03-04',
        sortIdx: 2,
    },
    {
    	title: '마',
        start: '2023-03-04',
        sortIdx: 3,
    },
    {
    	title: '나',
        start: '2023-03-04',
        sortIdx: 4,
    },
],
eventOrder: 'sortIdx',

• 캡처 : sortIdx 적용순으로 정렬
  

결론

• fullcalendar event 출력 시, eventOrder를 통해 sort 로직을 정의할 수 있다.

참고

• github fullcalendar eventOrder PoC