[JavaScript] FullCalendar 캘린더 사용법 - (5. Date & Time Display)

 

 

Date & Time Display

weekends

일정관리에 토요일/일요일 열을 포함 할지 여부를 설정

document.addEventListener('DOMContentLoaded', function() {
    var calendarEl = document.getElementById('calendar');
    var calendar = new FullCalendar.Calendar(calendarEl, {
        locale: 'en',
        initialView: 'dayGridMonth',
        headerToolbar: {
            left: 'prev,next',
            center: 'title',
            right: 'timeGridDay,timeGridWeek'
        },
        // 토요일, 일요일 보이지 않도록함
       weekends : false
    });
    calendar.render();
  
});

 

 

hiddenDays

특정 요일을 표시에서 제외설정

document.addEventListener('DOMContentLoaded', function() {
    var calendarEl = document.getElementById('calendar');
    var calendar = new FullCalendar.Calendar(calendarEl, {
        locale: 'en',
        initialView: 'dayGridMonth',
        headerToolbar: {
            left: 'prev,next',
            center: 'title',
            right: 'timeGridDay,timeGridWeek'
        },
        // 화요일, 목요일 제외
        hiddenDays: [ 2, 4 ] 
        // 월요일, 수요일, 금요일 제외
        // hiddenDays: [ 1, 3, 5 ]
    });
    calendar.render();
  
});

 

 

dayHeaders

날짜 머리글 표시 여부. Month, timeGrid, dayGrid에 해당.

document.addEventListener('DOMContentLoaded', function() {
    var calendarEl = document.getElementById('calendar');
    var calendar = new FullCalendar.Calendar(calendarEl, {
        locale: 'en',
        initialView: 'dayGridMonth',
        headerToolbar: {
            left: 'prev,next',
            center: 'title',
            right: 'timeGridDay,timeGridWeek'
        },
        // 날짜 글머리 표시하지 않음
        dayHeaders : false

    });
    calendar.render();
  
});

dayHeaders : false

 

 

Date Navigation

 

validRange

사용자가 지정한 날짜로 탐색범위를 지정

유효 범위를 벗어난 날짜는 회색으로 표시되고 

잘못된 범위로 이동하지 못하도록 헤더 툴바의 이전/다음 버튼이 회색으로 표시된다.

시작 또는 끝 속성 중 하나를 지정하지 않으면 개방형 범위를 만들 수 있다.

document.addEventListener('DOMContentLoaded', function() {
    var calendarEl = document.getElementById('calendar');
    var calendar = new FullCalendar.Calendar(calendarEl, {
        locale: 'en',
        initialView: 'dayGridMonth',
        validRange: {
          start: '2022-05-01',
          end: '2022-12-25'
        }
    });
    calendar.render();
});