[API] FullCalendar

• 참조링크 : https://fullcalendar.io/
• 다운로드 : https://fullcalendar.io/docs/getting-started

<!-- fullcalendar-5.1.0 -->

css는 link, js는 script문으로 원하는 jsp단에 적용

<link rel="stylesheet" href="<c:url  value='js/main.css'/>">

<link rel="stylesheet" href="<c:url  value='js/main.min.css'/>">

<script src="<c:url value='js/main.js' />"></script>

<script src="<c:url value='js/main.min.js'/>"></script>

<script src="<c:url value='js/locales-all.js'/>"></script>

<script src="<c:url value='js/locales-all.min.js'/>"></script>

<script src="<c:url value='js/fullcalendar-5.1.0/lib/locales/ko.js'/>"></script>



<!-- 사용방법 -->

<script>

document.addEventListener('DOMContentLoaded', function() {

		var calendarEl = document.getElementById('calendar');

		

		var calendar = new FullCalendar.Calendar(calendarEl, {

			initialView : 'dayGridMonth', // 월 달력

			// 달력 툴

			headerToolbar: {

			      left: 'prev',

			      center: 'title',

			      right: 'next today,dayGridMonth'

			 },

			editable: true,     // 드래그 수정 가능

			locale : 'ko',        // 한국어 설정(lib/locales/ko.js)

			 // 요일 클릭 이벤트

			dateClick : function() {

				alert('요일 클릭!');

			},

			// 일정 클릭 이벤트

			eventClick : function() {

				alert('일정 클릭!');

			}, 

		});	

		

		// 데이터 삽입방식

		calendar.addEvent({'title':'고객1-컷팅', 'start':'2020-07-16T15:00'});

		calendar.addEvent({'title':'고객2-펌', 'start':'2020-07-18T22:00'});

		calendar.addEvent({'title':'고객3-염색', 'start':'2020-07-20T09:00'});

		

		// 렌더링

		calendar.render();

	});

</script>