문제를 잘 정의하는 것은 문제를 절반 해결한 것이다. - 2023.12

이 문서는 읽기 전용입니다. 원본을 볼 수는 있지만 바꿀 수는 없습니다. 문제가 있다고 생각하면 관리자에게 문의하세요.
====== FullCalendar ======
<WRAP left notice 80%>
  * description : FullCalendar 관련 내용 기술
  * author      : slaptear
  * email       : sgjang@repia.com
  * lastupdate  : 2023-03-02
</WRAP>
<WRAP clear/>

===== 적용 방법 =====
  * FullCalendar css, script 추가
  * 본인은 bootstrap package에 fullcalendar가 존재하여 아래와 같이 설정함

<code>
  <!-- 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>	
</code>

  * calendar load
<code>
 <script>
    let Calendar = FullCalendar.Calendar;
    let calendarEl = document.getElementById('calendar');

    let calendar = new Calendar(calendarEl, { 
        //아래 FullCalendar와 toolbar 활용 예시 참고        
    }
    
    calendar.render();
 </script>
</code>
  * 위와 같이 설정한 후에 달력을 표시할 div 생성

<code>
 <body>
   <div id="calendar"></div> 
 </body>
</code>



===== Tip =====
=== FullCalendar와 toolbar 활용 예시 ===
<code>
  <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>
</code>

===== Ref =====
  * [[https://fullcalendar.io/docs|FullCalendar 공식 문서]]
  * [[https://doongjun.tistory.com/46|FullCalendar DB 입력]]
  * [[https://vivi-world.tistory.com/107|FullCalendar 기능 정리]]


{{tag>slaptear fullcalendar}}
문제를 잘 정의하는 것은 문제를 절반 해결한 것이다. - 2023.12

사용자 도구

사이트 도구

문서 도구
