목차

FullCalendar

  • description : FullCalendar 관련 내용 기술
  • author : slaptear
  • email : sgjang@repia.com
  • lastupdate : 2023-03-02

적용 방법

  <!-- fullCalendar -->
  <link rel="stylesheet" href="<c:url value="/resource/bootstrapSource/plugins/fullcalendar/main.min.css"/>">
  <link rel="stylesheet" href="<c:url value="/resource/bootstrapSource/plugins/fullcalendar-daygrid/main.min.css"/>">
  <link rel="stylesheet" href="<c:url value="/resource/bootstrapSource/plugins/fullcalendar-timegrid/main.min.css"/>">
  <link rel="stylesheet" href="<c:url value="/resource/bootstrapSource/plugins/fullcalendar-bootstrap/main.min.css"/>">

  <!-- fullCalendar 2.2.5 -->
  <script src="<c:url value="/resource/bootstrapSource/plugins/moment/moment.min.js"/>"></script>
  <script src="<c:url value="/resource/bootstrapSource/plugins/fullcalendar/main.min.js"/>"></script>
  <script src="<c:url value="/resource/bootstrapSource/plugins/fullcalendar-daygrid/main.min.js"/>"></script>
  <script src="<c:url value="/resource/bootstrapSource/plugins/fullcalendar-timegrid/main.min.js"/>"></script>
  <script src="<c:url value="/resource/bootstrapSource/plugins/fullcalendar-interaction/main.min.js"/>"></script>
  <script src="<c:url value="/resource/bootstrapSource/plugins/fullcalendar-bootstrap/main.min.js"/>"></script>		
  <script src="<c:url value="/resource/bootstrapSource/plugins/fullcalendar/locales/ko.js"/>"></script>	
 <script>
    let Calendar = FullCalendar.Calendar;
    let calendarEl = document.getElementById('calendar');

    let calendar = new Calendar(calendarEl, { 
        //아래 FullCalendar와 toolbar 활용 예시 참고        
    }
    
    calendar.render();
 </script>
 <body>
   <div id="calendar"></div> 
 </body>

Tip

FullCalendar와 toolbar 활용 예시

  <script>
   $(document).ready(function(){
	
	
	let Calendar = FullCalendar.Calendar;
	let calendarEl = document.getElementById('calendar');

	let calendar = new Calendar(calendarEl, {
		plugins: [ 'bootstrap', 'interaction', 'dayGrid', 'timeGrid' ]
		, header: 
		{	// 헤더부분 버튼과 제목
			left  : 'prev,next today',	// FullCalendar에서 제공하는 부분(공식문서 참고)
			center: 'title',                // FullCalendar에서 제공하는 부분(공식문서 참고)
			right : 'custom1'               // 버튼 커스텀한 후에 배치
		}
		, 'themeSystem': 'bootstrap'
		, events: function(info, successCallback, failureCallback){
                        // 달력의 이벤트 표시 함수
                        // ajax 활용하여 DB에 있는 정보 가지고 옴
			$.ajax({
				url : url부분	// RestController와의 연결고리
				, cache: false
				, type : 'GET'
				, success : function(data) 
				{	
					//필요한 부분 변수 선언
					
					// 총 일수 구하는 변수
										
					// events 배열(중요)
					let events = [];
					
                                        // for문 돌려서 events 배열에 삽입
					for(let i = 0; i < 리스트.length; i++){
						
					      // 종료일 포함하기 위해 +1 => events의 end 날짜는 종료일을 포함하지 않고 달력에 나오기 때문에 + 1함
					예시) endDate = endDate.setDate(endDate.getDate() + 1);
                    			
                                              // 값 입력한 후에 배열에 넣기
					예시) events.push({
						  id: rsvtNo
						  // 아래부분들은 fullcalendar events에 필요한 key와 value들
						  , title: (달력에 표시될 부분)   // title = 이름 + (총 일수) 달력에 표시될 title
						  , start: startDate
						  , end: endDate                 // 종료일이 포함하지 않고 표시되어 날짜를 하루 더하여 넣음
						  , backgroundColor: "yellow" 
						  , borderColor: "yellow"
						  , allDay: true                 //false 하게 되면 title 부분 맨 앞에 '12a' 문자가 들어감 / 하루종일 여부
                                                  
                                                  // 그 이외의 것들은 info.event._def.extendedProps 안의 배열로 들어감. ***.
						  , rsvtNm: rsvtNm, ...
					       });
					}
					// 성공시 events Callback 
					successCallback(events);
				}
				, error : function ()
				{
					alert('일정 불러오기 서버요청실패');
				}
				, complete : function ()
				{
					windowStatus = "ready";
				}
			});
		}
			
		, expandRows: true               // 화면에 맞게 높이 재설정
		, eventClick: function (info){ 
                                                 // 달력의 이벤트 클릭 함수
		}
		, customButtons:                 // 버튼 커스텀
		{ 
			custom1: 
				{	// 예약버튼 클릭 이벤트
					text: '예약',
						click: function() 
						{
							fn_rsvtClear();
							$('#rsvtRegModal').modal('show');
							fn_daterangerpicker();
						}
				}
			
		}
		
		
		, contentHeight : 580             // 달력의 높이
		, editable  : false               // 이벤트 편집 여부 (늘리거나 줄이기 && 옮기기 여부)
		, ihandleWindowResize : true      //반응형 여부
	});
		calendar.render();
  })
  </script>

Ref