[JavaScript] FullCalendar 캘린더 사용법 - (3. Sizing)

 

 

 

Sizing

 

height

머리글 및 바닥글을 포함하여 전체 달력의 높이를 설정.

Integer로 값을 입력해야 한다.

기본적으로 이 옵션은 설정되어 있지 않으며 달력의 높이는 aspectRatio(달력의 가로 세로 비율)에 의해 계산된다.

 

값이 지정되면 달력의 높이는 픽셀값으로 적용된다.

내용이 높이에 맞지 않으면 스크롤바가 나타난다.

 

"auto"로 지정된 경우, 스크롤 막대가 생기지 않는다."100%"로 지정된 경우, 상위 컨테이너의 높이와 일치하게된다. 

document.addEventListener('DOMContentLoaded', function() {
    var calendarEl = document.getElementById('calendar');
    var calendar = new FullCalendar.Calendar(calendarEl, {
        locale: 'en',
        initialView: 'dayGridMonth',
        headerToolbar: {
            right: 'prevYear prev today next nextYear',
            center: 'title',
            left: 'dayGridMonth,timeGridWeek,timeGridDay'
        }
        height: 650
    });
    calendar.render();
});

// 동적으로 높이를 설정 할 수 있다.
// calendar.setOption('height',650);

 

 

contentHeight

머리글 및 바닥글을 제외한 달력의 높이를 설정.

Integer로 값을 입력해야 한다.

기본적으로 이 옵션은 설정되어 있지 않으며 달력의 높이는 aspectRatio(달력의 가로 세로 비율)에 의해 계산된다.

 

값이 지정되면 달력의 높이는 픽셀값으로 적용된다.

내용이 높이에 맞지 않으면 스크롤바가 나타난다.

 

"auto"로 지정된 경우, 스크롤 막대가 생기지 않는다."100%"로 지정된 경우, 상위 컨테이너의 높이와 일치하게된다. 

document.addEventListener('DOMContentLoaded', function() {
    var calendarEl = document.getElementById('calendar');
    var calendar = new FullCalendar.Calendar(calendarEl, {
        locale: 'en',
        initialView: 'dayGridMonth',
        contentHeight: 600
    });
    calendar.render();
});

// 동적으로 높이를 설정 할 수 있다.
// calendar.setOption('contentHeight', 650);

 

 

aspectRatio

달력의 가로 세로 비율을 설정.

숫자가 클수록 높이가 작아진다.

달력의 내용영역인 css클래스의 "fc-view-container"가 있는 영역의 가로 세로 비율이다.

document.addEventListener('DOMContentLoaded', function() {
    var calendarEl = document.getElementById('calendar');
    var calendar = new FullCalendar.Calendar(calendarEl, {
        locale: 'en',
        initialView: 'dayGridMonth',
        aspectRatio: 2,
        headerToolbar: {
            right: 'prevYear prev today next nextYear',
            center: 'title',
            left: 'dayGridMonth,timeGridWeek,timeGridDay'
        }
    });
    calendar.render();
});

// 동적으로 비율 설정
// calendar.setOption('aspectRatio', 1.8);
// 비율값 얻기
// var ratio = calendar.getOption('aspectRatio');
// console.log(ratio); // 출력 : 1.8

 

 

expandRows

지정된 뷰의 행이 전체 높이를 차지하지 않으면 해당 행의 크기에맞게 확장된다.

기본값은 false.

• timegrid views (example view)

document.addEventListener('DOMContentLoaded', function() {
    var calendarEl = document.getElementById('calendar');
    var calendar = new FullCalendar.Calendar(calendarEl, {
        locale: 'en',
        headerToolbar: {
          left: 'prev,next today',
          center: 'title',
          right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
        },
        initialView: 'timeGridWeek',
        slotMinTime: '08:00',
    	slotMaxTime: '20:00',
    	expandRows: true,
    	height: '100%',
    });
    calendar.render();
});

• timeline views (example view)

document.addEventListener('DOMContentLoaded', function() {
    var calendarEl = document.getElementById('calendar');
    var calendar = new FullCalendar.Calendar(calendarEl, {
        locale: 'en',
        headerToolbar: {
      	    left: 'prev,next today',
            center: 'title',
      	    right: 'resourceTimelineDay,resourceTimelineWeek'
    	},
        initialView: 'resourceTimelineDay',
        expandRows: true,
    	height: '100%',
    });
    calendar.render();
});

 

 

handleWindowResize

기본값 true.

브라우저 창의 크기가 조정될 때 일정관리 크기를 자동으로 조정 할지 여부를 정한다.
false일 경우 브라우저 창 크기가 변경 될 때 아무것도 변경되지 않음.

updateSize

달력의 크기를 강제로 즉시 재조정.

handleWindowResize값이 false로 되어있어도 적용이 가능하다.

document.addEventListener('DOMContentLoaded', function() {
    var calendarEl = document.getElementById('calendar');
    var calendar = new FullCalendar.Calendar(calendarEl, {
        locale: 'en',
        initialView: 'dayGridMonth',
        headerToolbar: {
      	    left: 'prev,next today resizeButton',
            center: 'title',
      	    right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
    	},
        handleWindowResize : false,
        // 커스텀 버튼 생성 후 클릭 이벤트 부여
        customButtons:{
        	resizeButton : {
            	'text' : '사이즈 변경',  
        		click: function(){
          			calendar.updateSize();
        		}
      		}
    	},
    });
    calendar.render();
    
    // 사이즈 변경 이벤트 : 임의의 버튼 btn-resize를 클릭하면 달력 리사이징
    document.getElementById('btn-resize').addEventListener('click', function() {
        calendar.updateSize();
    });

});

 

 

windowResizeDelay

기본값 100. Integer값으로 입력.

브라우저 창의 크기가 조정된 후 달력의 크기가 조정되기 위해 대기하는 시간(밀리초).

지나치게 자주 크기를 조정하는것을 방지하기 위한 옵션.

document.addEventListener('DOMContentLoaded', function() {
    var calendarEl = document.getElementById('calendar');
    var calendar = new FullCalendar.Calendar(calendarEl, {
        locale: 'en',
        initialView: 'dayGridMonth',
        headerToolbar: {
      	    left: 'prev,next today',
            center: 'title',
      	    right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
    	},
        // 3초 딜레이
        windowResizeDelay : 3000,
    });
    calendar.render();
});

 

 

stickyHeaderDates

스크롤하는 동안 일정관리의 맨 위에 있는 날짜 헤더를 고정할지 여부를 정한다.

달력의 높이가 'auto'로 설정되어 높이가 높을 때 활성화 된다.

stickyHeaderDates값이 false로 되어있으면 수직 스크롤시 헤더 날짜가 고정되지 않는다.

왼쪽 - stickyHeaderDates : true / 오른쪽 - stickyHeaderDates : false

document.addEventListener('DOMContentLoaded', function() {
    var calendarEl = document.getElementById('calendar');
    var calendar = new FullCalendar.Calendar(calendarEl, {
        locale: 'en',
        initialView: 'timeGridWeek',
        //stickyHeaderDates : false,
        headerToolbar: {
            left: 'prev,next today',
            center: 'title',
            right: 'timeGridWeek,timeGridDay'
        },
         height: 'auto',
         slotDuration: '00:05:00' 
    });
    calendar.render();
});

timegrid view (example)

lisst view (example)

timeline view (example)

vertical resource view (example)

 

stickyFooterScrollbar

가로 스크롤이 활성화된 경우 가로 스크롤막대가 뷰포트 하단에 고정 할지 여부를 설정.

세로 스크롤이 제일 하단으로 가야 가로 스크롤을 볼 수 있다.

왼쪽 - stickyFooterScrollbar : true / 오른쪽 - stickyFooterScrollbar : false

document.addEventListener('DOMContentLoaded', function() {
    var calendarEl = document.getElementById('calendar');
    var calendar = new FullCalendar.Calendar(calendarEl, {
        locale: 'en',
        initialView: 'timeGridWeek',
        //stickyFooterScrollbar : false,
        headerToolbar: {
            left: 'prev,next today',
            center: 'title',
            right: 'timeGridWeek,timeGridDay'
        },
         height: 'auto',
         slotDuration: '00:05:00' 
    });
    calendar.render();
});

timeline view (example)

vertical resource view (example)