[JavaScript] FullCalendar 캘린더 사용법 - (4. Views)

 

 

 

Views

 

Month View

initialView: 'dayGridMonth',

 

TimeGrid View

initialView: 'timeGridWeek'

initialView: 'timeGridDay'

 

List View

initialView: 'listWeek'

 

 

DayGrid View

initialView: 'dayGridWeek'

 

 

Custom Views

일주일 중 4일만 보이도록 사용자 지정 뷰

document.addEventListener('DOMContentLoaded', function() {
    var calendarEl = document.getElementById('calendar');
    var calendar = new FullCalendar.Calendar(calendarEl, {
        locale: 'en',
        initialView: 'timeGridFourDay',
        headerToolbar: {
            left: 'prev,next',
            center: 'title',
            right: 'timeGridDay,timeGridFourDay'
        },
        views: {
            timeGridFourDay: {
                type: 'timeGrid',
                duration: { days: 4 },
                buttonText: '4 day'
            }
        },
    });
    calendar.render();
});

 

View API

View Object

일정관리 보기에 대한 정보.

document.addEventListener('DOMContentLoaded', function() {
    var calendarEl = document.getElementById('calendar');
    var calendar = new FullCalendar.Calendar(calendarEl, {
        locale: 'en',
        initialView: 'timeGridWeek',
        headerToolbar: {
            left: 'prev,next',
            center: 'title',
            right: 'timeGridDay,timeGridWeek'
        }
    });
    calendar.render();
  
  var view = calendar.view;
  console.log("The view's title is " + view.title);
  //The view's title is Oct 16 – 22, 2022
 
  console.log("The view's type is " + view.type);
  // The view's type is timeGridWeek
  
  console.log("The view's activeStart is " + view.activeStart);
  //The view's activeStart is Sun Oct 16 2022 00:00:00 GMT+0900 (한국 표준시)
  
  console.log("The view's activeStart is " + view.activeEnd);
  // The view's activeStart is Sun Oct 23 2022 00:00:00 GMT+0900 (한국 표준시)
  
  console.log("The view's activeStart is " + view.currentStart);
  // The view's activeStart is Sun Oct 16 2022 00:00:00 GMT+0900 (한국 표준시)
  
  console.log("The view's activeStart is " + view.currentEnd);
  // The view's activeStart is Sun Oct 23 2022 00:00:00 GMT+0900 (한국 표준시)
  
});

 

 

Calendar::changeView

다른 뷰 타입으로 전환

document.addEventListener('DOMContentLoaded', function() {
    var calendarEl = document.getElementById('calendar');
    var calendar = new FullCalendar.Calendar(calendarEl, {
        locale: 'en',
        initialView: 'timeGridWeek',
        headerToolbar: {
            left: 'prev,next',
            center: 'title',
            right: 'timeGridDay,timeGridWeek'
        }
    });
    calendar.render();
    
    // timeGridWeek에서 timeGridDay로 뷰타입 변경
    calendar.changeView('timeGridDay');
});

 

 

다른 뷰로 변경함과 동시에 새로운 날자로 이동하려면 두번째 매개변수를 사용 할 수 있다.

document.addEventListener('DOMContentLoaded', function() {
    var calendarEl = document.getElementById('calendar');
    var calendar = new FullCalendar.Calendar(calendarEl, {
        locale: 'en',
        initialView: 'timeGridWeek',
        headerToolbar: {
            left: 'prev,next',
            center: 'title',
            right: 'timeGridDay,timeGridWeek'
        }
    });
    calendar.render();
    
    // 기준날짜 12월 1일로 변경
    calendar.changeView('timeGridDay', '2022-12-01');
});

 

 

사용자 정의 보기를 사용할 경우 표시되는 범위를 변경 할 수 있다.

document.addEventListener('DOMContentLoaded', function() {
    var calendarEl = document.getElementById('calendar');
    var calendar = new FullCalendar.Calendar(calendarEl, {
        locale: 'en',
        initialView: 'timeGridWeek',
        headerToolbar: {
            left: 'prev,next',
            center: 'title',
            right: 'timeGridDay,timeGridWeek'
        }
    });
    calendar.render();
    
    // 11월1일부터 11월20일까지 범위 지정
    calendar.changeView('timeGrid', {
        start: '2022-11-01',
        end: '2022-11-20'
    });
});