on
[코드이그나이터] FullCalendar을 이용한 일정관리 만들기 -1-
[코드이그나이터] FullCalendar을 이용한 일정관리 만들기 -1-
기존업무
1. 회사의 일정관리표를 중앙화면에 올림
2. 일정관리표는 엑셀로 작업후 -> PDF변환 -> JPG로 변환하여 올림
3. 사무실 화면만 표시하므로 일정공유 안됨
요청사항
1. 자체 솔루션 ERP의 Main 페이지에 일정관리표 표시 필요
2. DB와 연결하여 일정 관리가 필요
3. 전자결재를 도입하여 중간, 최종승인후 일정관리 등록 가능
업무계획
1. FullCalendar 라이브러리 HTML 화면 표시
2. Ajax를 이용한 DB 연결
3. 테스트 실행 & 최종 수정
FullCalendar 화면 표시
1. CDN 연결
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 페이지 생성
4. 결과화면
5. Full 소스코드 복붙하면 무적권 나옴!!
Full Calendar Example #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; } $(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(); }
6. 다음편 예고
- DB를 연결 하려면 fullCalendar의 EventSource를 JSON으로 받아야 한다.
- JSON의 KEY 값을 뭘로 해야할까??
- 일정등록, 수정 페이지를 만들자
from http://jjack-coding.tistory.com/14 by ccl(S) rewrite - 2021-01-05 18:26:21