[코드이그나이터] FullCalendar을 이용한 일정관리 만들기 -1-

기존업무

 

1. 회사의 일정관리표를 중앙화면에 올림

 

2. 일정관리표는 엑셀로 작업후 -> PDF변환 -> JPG로 변환하여 올림

 

3. 사무실 화면만 표시하므로 일정공유 안됨

 

 

요청사항

 

1. 자체 솔루션 ERP의 Main 페이지에 일정관리표 표시 필요

 

2. DB와 연결하여 일정 관리가 필요

 

3. 전자결재를 도입하여 중간, 최종승인후 일정관리 등록 가능

 

 

업무계획

 

1. FullCalendar 라이브러리 HTML 화면 표시

 

2. Ajax를 이용한 DB 연결

 

3. 테스트 실행 & 최종 수정

 

 

FullCalendar 화면 표시 

 

1. CDN 연결

	<link href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/4.2.0/core/main.min.css" rel="stylesheet" type="text/css" />
	<link href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/4.2.0/daygrid/main.min.css" rel="stylesheet" type="text/css" />
	<link href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/4.2.0/timegrid/main.min.css" rel="stylesheet" type="text/css" />
	<link href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/4.2.0/list/main.min.css" rel="stylesheet" type="text/css" />
	<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/timepicker/1.3.5/jquery.timepicker.min.css">
	<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/4.2.0/core/main.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/4.2.0/daygrid/main.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/4.2.0/timegrid/main.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/4.2.0/list/main.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/4.2.0/interaction/main.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/4.2.0/moment/main.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/4.2.0/core/locales/ko.js"></script>
	<script src="//cdnjs.cloudflare.com/ajax/libs/timepicker/1.3.5/jquery.timepicker.min.js"></script>

 

 

2. JQuery 생성

 

$(document).ready(function() {
			var today = new Date();
			var year_month = today.format('yyyy-MM');
			var month = today.getMonth() + 1;
			$('#title_calendar').html(month+"월 행사 및 일정표");
            //일정표 로드
			setCalendar1();
			
		});

		Date.prototype.format = function (f) {

			if (!this.valueOf()) return " ";



			var weekKorName = ["일요일", "월요일", "화요일", "수요일", "목요일", "금요일", "토요일"];

			var weekKorShortName = ["일", "월", "화", "수", "목", "금", "토"];

			var weekEngName = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];

			var weekEngShortName = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];

			var d = this;



			return f.replace(/(yyyy|yy|MM|dd|KS|KL|ES|EL|HH|hh|mm|ss|a\/p)/gi, function ($1) {

				switch ($1) {

            case "yyyy": return d.getFullYear(); // 년 (4자리)

            case "yy": return (d.getFullYear() % 1000).zf(2); // 년 (2자리)

            case "MM": return (d.getMonth() + 1).zf(2); // 월 (2자리)

            case "dd": return d.getDate().zf(2); // 일 (2자리)

            case "KS": return weekKorShortName[d.getDay()]; // 요일 (짧은 한글)

            case "KL": return weekKorName[d.getDay()]; // 요일 (긴 한글)

            case "ES": return weekEngShortName[d.getDay()]; // 요일 (짧은 영어)

            case "EL": return weekEngName[d.getDay()]; // 요일 (긴 영어)

            case "HH": return d.getHours().zf(2); // 시간 (24시간 기준, 2자리)

            case "hh": return ((h = d.getHours() % 12) ? h : 12).zf(2); // 시간 (12시간 기준, 2자리)

            case "mm": return d.getMinutes().zf(2); // 분 (2자리)

            case "ss": return d.getSeconds().zf(2); // 초 (2자리)

            case "a/p": return d.getHours() < 12 ? "오전" : "오후"; // 오전/오후 구분

            default: return $1;

        }

    });

		};



		String.prototype.string = function (len) { var s = '', i = 0; while (i++ < len) { s += this; } return s; };

		String.prototype.zf = function (len) { return "0".string(len - this.length) + this; };

		Number.prototype.zf = function (len) { return this.toString().zf(len); };


//Callendar 스크립트
function setCalendar1(response){
			var calendarEl = document.getElementById('calendar');
			var today = new Date();
			var year_month = today.format('yyyy-MM');

			var calendar = new FullCalendar.Calendar(calendarEl, {
				plugins: [ 'dayGrid', 'timeGrid', 'list', 'interaction' ],
				header: {
					left: 'prev,next today, EventButton',
					center: 'title',
					right: 'dayGridMonth,listWeek'
				},
				locale: 'ko', //언어 설정
			// navLinks: true, 
			editable: true, 
			selectable: true,
			eventLimit: true, // allow "more" link when too many events
			dayMaxEvents: true,
			initialView: 'dayGridMonth',
			minTime: '00:00:00',
			maxTime: '24:00:00',
			contentHeight: 'auto',
			allDay : false, // will make the time show,
			//DB연결 일정 받는 이벤트
			eventSources: [

    // your event source
    {
      events: [ // put the array in the `events` property
      {
      	title  : 'event1',
      	start  : '2020-07-16'
      },
      {
      	title  : 'event2',
      	start  : '2020-07-05',
      	end    : '2020-07-07'
      },
      {
      	title  : 'event3',
      	start  : '2020-07-09T12:30:00',
      }
      ],
      color: 'black',     // an option!
      textColor: 'yellow' // an option!
  }

    // any other event sources...

    ]

});
			calendar.render();

		}

 

3. View 페이지 생성

<div class="contents_body">
		<div class="contents_side"></div>
		<div class="contents_middle"><div id="calendar"></div></div>
		<div class="contents_side"></div>
	</div>

 

 

4. 결과화면

 

 

5. Full 소스코드 복붙하면 무적권 나옴!!

 

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Full Calendar Example</title>

	<style type="text/css">

		#calendar {
			max-width: 100%;
			margin: 0 auto;
		}
		.fc-number-day {color:black;}
		.fc-sat > span { color: blue; }     /* 토요일 */
		.fc-sun > span { color: red; }    /* 일요일 */


		.li_table ul { clear : left; margin : 0; padding: 0; list-style-type : none; }
		.li_table ul li {text-align: left; float: left; margin:0; padding:2px, 1px; width:200px; }
		.modal.fade {top: -100%;}

		.contents_body {
			width: 100%;
		}

		.contents_side {
			width: 18%;
			display: inline-block;
		}

		.contents_middle {
			width: 60%;
			display: inline-block;
		}

		.ui-timepicker-container{ 
			z-index:1151 !important; 
		}
	</style>

	<link href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/4.2.0/core/main.min.css" rel="stylesheet" type="text/css" />
	<link href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/4.2.0/daygrid/main.min.css" rel="stylesheet" type="text/css" />
	<link href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/4.2.0/timegrid/main.min.css" rel="stylesheet" type="text/css" />
	<link href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/4.2.0/list/main.min.css" rel="stylesheet" type="text/css" />
	<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/timepicker/1.3.5/jquery.timepicker.min.css">
	<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/4.2.0/core/main.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/4.2.0/daygrid/main.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/4.2.0/timegrid/main.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/4.2.0/list/main.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/4.2.0/interaction/main.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/4.2.0/moment/main.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/4.2.0/core/locales/ko.js"></script>
	<script src="//cdnjs.cloudflare.com/ajax/libs/timepicker/1.3.5/jquery.timepicker.min.js"></script>

	<script>
		

		$(document).ready(function() {
			var today = new Date();
			var year_month = today.format('yyyy-MM');
			var month = today.getMonth() + 1;
			$('#title_calendar').html(month+"월 행사 및 일정표");
			setCalendar1();
		});

		Date.prototype.format = function (f) {

			if (!this.valueOf()) return " ";



			var weekKorName = ["일요일", "월요일", "화요일", "수요일", "목요일", "금요일", "토요일"];

			var weekKorShortName = ["일", "월", "화", "수", "목", "금", "토"];

			var weekEngName = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];

			var weekEngShortName = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];

			var d = this;



			return f.replace(/(yyyy|yy|MM|dd|KS|KL|ES|EL|HH|hh|mm|ss|a\/p)/gi, function ($1) {

				switch ($1) {

            case "yyyy": return d.getFullYear(); // 년 (4자리)

            case "yy": return (d.getFullYear() % 1000).zf(2); // 년 (2자리)

            case "MM": return (d.getMonth() + 1).zf(2); // 월 (2자리)

            case "dd": return d.getDate().zf(2); // 일 (2자리)

            case "KS": return weekKorShortName[d.getDay()]; // 요일 (짧은 한글)

            case "KL": return weekKorName[d.getDay()]; // 요일 (긴 한글)

            case "ES": return weekEngShortName[d.getDay()]; // 요일 (짧은 영어)

            case "EL": return weekEngName[d.getDay()]; // 요일 (긴 영어)

            case "HH": return d.getHours().zf(2); // 시간 (24시간 기준, 2자리)

            case "hh": return ((h = d.getHours() % 12) ? h : 12).zf(2); // 시간 (12시간 기준, 2자리)

            case "mm": return d.getMinutes().zf(2); // 분 (2자리)

            case "ss": return d.getSeconds().zf(2); // 초 (2자리)

            case "a/p": return d.getHours() < 12 ? "오전" : "오후"; // 오전/오후 구분

            default: return $1;

        }

    });

		};



		String.prototype.string = function (len) { var s = '', i = 0; while (i++ < len) { s += this; } return s; };

		String.prototype.zf = function (len) { return "0".string(len - this.length) + this; };

		Number.prototype.zf = function (len) { return this.toString().zf(len); };


		function setCalendar1(response){
			var calendarEl = document.getElementById('calendar');
			var today = new Date();
			var year_month = today.format('yyyy-MM');

			var calendar = new FullCalendar.Calendar(calendarEl, {
				plugins: [ 'dayGrid', 'timeGrid', 'list', 'interaction' ],
				header: {
					left: 'prev,next today, EventButton',
					center: 'title',
					right: 'dayGridMonth,listWeek'
				},
				locale: 'ko', //언어 설정
			// navLinks: true, 
			editable: true, 
			selectable: true,
			eventLimit: true, // allow "more" link when too many events
			dayMaxEvents: true,
			initialView: 'dayGridMonth',
			minTime: '00:00:00',
			maxTime: '24:00:00',
			contentHeight: 'auto',
			allDay : false, // will make the time show,
			//DB연결 일정 받는 이벤트
			eventSources: [

    // your event source
    {
      events: [ // put the array in the `events` property
      {
      	title  : 'event1',
      	start  : '2020-07-16'
      },
      {
      	title  : 'event2',
      	start  : '2020-07-05',
      	end    : '2020-07-07'
      },
      {
      	title  : 'event3',
      	start  : '2020-07-09T12:30:00',
      }
      ],
      color: 'black',     // an option!
      textColor: 'yellow' // an option!
  }

    // any other event sources...

    ]

});
			calendar.render();

		}


	</script>
</head>
<body>
	<div class="contents_body">
		<div class="contents_side"></div>
		<div class="contents_middle"><div id="calendar"></div></div>
		<div class="contents_side"></div>
	</div>

</div>


</body>
</html>

 

6. 다음편 예고

 

- DB를 연결 하려면 fullCalendar의 EventSource를 JSON으로 받아야 한다.

 

- JSON의 KEY 값을 뭘로 해야할까??

 

- 일정등록, 수정 페이지를 만들자