[FullCalendar v6] 06. Day 클릭 시, 다른 달력 뷰로 전환하기 (navLinks, navLinkDayClick)

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

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

 

 

Day (숫자) 클릭 시 (cell 클릭 아님)

다른 달력 뷰로 전환하는 걸 해보겠다.

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

    navLinks: true,
    navLinkDayClick: "timeGridWeek",

    ...
  });

  calendar.render();
});

 

navLinks를 true로 해서 clickable 하게 만들어주고

navLinkDayClick을 view name 이나 (timeGridWeek, listWeek 등등), function 형태로 작성해줄 수 있다.

 

Day 클릭 시,

  1) view name으로 지정해주었을 땐 단순히 달력의 뷰모드가 바뀌고

  2) 함수 형태로 다른 동작을 구현할 수도 있다.

 

 

함수 형태로 지정해주고 싶을 땐 아래처럼 하면 된다. (공식 홈페이지 참고! https://fullcalendar.io/docs/navLinkDayClick)

var calendar = new Calendar(calendarEl, {
  navLinks: true,
  navLinkDayClick: function(date, jsEvent) {
    console.log('day', date.toISOString());
    console.log('coords', jsEvent.pageX, jsEvent.pageY);
  }
});

 

 

 

 

 

암튼 나는 단순 뷰 모드만 바뀌도록 했고

결과물은~~

 

 

 

 

 

끗