[JavaScript] FullCalendar에서 custom Event 데이터를 불러오는 방법?

이젠아카데미 GS반 멘토링 도중 받았던 질문인데, 하도 인상깊어서 기록해두게 되었다.

링크 : https://stackoverflow.com/questions/57214620/how-to-insert-custom-data-inside-fullcalendar-event

질문

FullCalendar에서 이벤트 클릭 시 이벤트 데이터를 불러올 수 있는데, 특정 값만 불러올 수 있고(title, start, end, id같은), 내가 추가한 특정 값은 찾을 수 없다고 나옵니다. 어떻게 해결해야 하나요?

질문 코드 예시

document.addEventListener('DOMContentLoaded', function() {
  var calendarEl = document.getElementById('calendar');
  calendar = new FullCalendar.Calendar(calendarEl, {
	...
    /// 이벤트 목록
    events: [
      {
        title: '제목01',
        start: '2024-07-18 12:00:00',
        end: '2024-07-18 24:00:00',
        id: '1',
        userId: 'userId1'
      },
      {
        title: '제목02',
        start: '2024-07-19',
        end: '2024-07-19',
        id: '2',
        userId: 'userId2'
      },
      {
        title: '제목03',
        start: '2024-07-20',
        end: '2024-07-21',
        id: '3',
        userId: 'userId3'
      },
    ],
    /// 일정 클릭 시 이벤트
    eventClick: function(info) {
      /// 아래 4개는 잘 나옴
      console.log(info.event.title);
      console.log(info.event.start);
      console.log(info.event.end);
      console.log(info.event.id);

      /// 이벤트의 커스텀 데이터는 안 나옴
      console.log(info.event.userId);
    }
  });
  calendar.render();
});

답변

핵심 : extendedProps를 추가해야 합니다!!!

이벤트의 커스텀 데이터의 경우, extendedProps를 추가해야 합니다. 아래처럼요.

document.addEventListener('DOMContentLoaded', function() {
  var calendarEl = document.getElementById('calendar');
  calendar = new FullCalendar.Calendar(calendarEl, {
	...
    /// 일정 클릭 시 이벤트
    eventClick: function(info) {
      /// 이벤트의 기본 데이터 : 아래처럼 호출하면 됩니다.
      console.log(info.event.title);
      console.log(info.event.start);
      console.log(info.event.end);
      console.log(info.event.id);

      /// 이벤트의 커스텀 데이터 : extendedProps를 붙여주세요.
      console.log(info.event.extendedProps.userId);
    }
  });
  ...
});

근데... 왜???

기본적으로 FullCalendar의 event는 정의된 속성만 사용할 수 있지만, 이를 커스텀할 수 있도록 extendedProps를 제공하고 있다고 합니다. 더 자세한 설명은 아래 링크를 참고하세요!

https://velog.io/@kangpungyun/FullCalendar-%EB%8B%AC%EB%A0%A5-%EB%82%B4%EB%B6%80-%EC%9D%B4%EB%B2%A4%ED%8A%B8-%EC%A7%81%EC%A0%91-%EC%A0%95%EC%9D%98%ED%95%98%EA%B8%B0