[js] FullCalendar.js groupId

groupId 속성을 사용하면 같은 그룹으로 묶인 이벤트로 취급할 수 있습니다.

const event = {
  id: 'MENU123_REQ',
  groupId: 'MENU123', // ← menuCd로 그룹화
  title: '테스트',
  ...
}

FullCalendar에서 eventClick 또는 eventMouseEnter, eventMouseLeave 같은 이벤트에서 groupId로 묶인

여러 이벤트를 한꺼번에 처리하려면 다음과 같은 방식으로 접근할 수 있습니다.

 

✅ 예시: eventClick에서 groupId로 묶인 이벤트 전체 선택하기

eventClick: function(info) {
  const calendarApi = info.view.calendar;
  const clickedEvent = info.event;
  const groupId = clickedEvent.groupId;

  // groupId가 동일한 모든 이벤트 찾기
  const groupedEvents = calendarApi.getEvents().filter(ev => ev.groupId === groupId);

  // 예시: 배경색 변경 (또는 커스텀 로직)
  groupedEvents.forEach(ev => {
    ev.setProp('backgroundColor', '#FFB347'); // 예: 오렌지색으로 변경
  });

  // 또는 모달에 표시하거나 한 번에 삭제도 가능
  // groupedEvents.forEach(ev => ev.remove());
}

 

🧠 주요 포인트 정리

내용	설명
info.event.groupId	클릭된 이벤트의 groupId
calendarApi.getEvents()	현재 캘린더에 존재하는 모든 이벤트 가져오기
filter(ev => ev.groupId === groupId)	동일한 groupId로 묶인 이벤트들 필터링
ev.setProp(...)	특정 이벤트 속성 변경
ev.remove()	이벤트 삭제 가능