[FullCalendar v6] 05. 날짜 범위 지정하기 (minDate, maxDate)

2023.02.07 - [FullCalendar v6] 04. Cell Content 변경하기

[FullCalendar v6] 04. Cell Content 변경하기

 

 

validRange 속성을 이용해서 달력 범위를 설정할 수 있다.

minDate를 "오늘", maxDate는 오늘 기준 2개월 후로 지정해보자.

document.addEventListener("DOMContentLoaded", function () {
  var calendarEl = document.getElementById("calendar");
  var calendar = new FullCalendar.Calendar(calendarEl, {
  
    ...

    validRange: function (nowDate) {
      const addedTwoMonth = nowDate.getMonth() + 2;
      const twoMonthAddDate = new Date(nowDate).setMonth(addedTwoMonth);

      return {
        start: nowDate,
        end: twoMonthAddDate,
      };
    },
  });

  calendar.render();
});

 

 

 

 

오늘 기준 2/8 ~ 4/8 이외는 회색 배경색 처리가 된 것을 볼 수 있다.