[FullCalendar v5] TimeGridView 좌측 시간 동적으로 설정하기

어떤 분이 이렇게 질문을 해주셔서 만들어보기 도전! (좌측 시간을 이벤트들 시간 중에서 가장빠른시간 ~ 가장늦은시간으로 설정하기.. 맞나요..?)

TimeGridView로 셋팅

initialView: "timeGridWeek"

eventDidMount

이벤트 1개가 달력에 render 될 때 마다 호출된다.

변수로 (1) 현재까지 가장 빠른 이벤트 시간, (2) 현재까지 가장 느린 이벤트 시간을 저장할 것이다.
그리고 이 함수가 호출 될 때, 현재 이벤트의 시간과 (1), (2)를 비교할 것이다.

let earliestStartTime, lastEndTime

var calendar = new FullCalendar.Calendar(calendarEl, {
  ...,
  eventDidMount: function(arg) {
  	const eventStartTime = arg.event.start.getHours()
  	const eventEndTime = arg.event.end.getHours()
  
  	if (!earliestStartTime) {
    	// when undefined
    	earliestStartTime = eventStartTime
  	} else if (eventStartTime < earliestStartTime) {
    	earliestStartTime = eventStartTime
  	}
  
  	if (!lastEndTime) {
    	// when undefined
    	lastEndTime = eventEndTime
  	} else if (eventEndTime > lastEndTime){
    	lastEndTime = eventEndTime
  	}
  
  	calendar.setOption('slotMinTime', `${earliestStartTime}:00:00`);
  	calendar.setOption('slotMaxTime', `${lastEndTime + 1}:00:00`);
	}
});

결과

---

• 전체 코드
• https://github.com/yanghyeonjin/panda-fullcalendar-v5/blob/master/timegrid-view.html