IB Calendar
를 사용하기 위해서 다음 4~6가지 파일을 추가합니다.
<!----- ibsheet 기본 모듈 ----->
<!-- 종속 라이브러리 디자인 css -->
<link rel="stylesheet" type="text/css" href="ibcalendar/css/dependency.css">
<!-- 디자인 css -->
<link rel="stylesheet" type="text/css" href="ibcalendar/css/ibcalendar.css">
<!-- 종속 라이브러리 코어 파일 -->
<script src="ibcalendar/dependency.min.js"></script>
<!-- 캘린더 코어 파일 -->
<script src="ibcalendar/ibcalendar.min.js"></script>
<!-- 라이선스 파일 -->
<script src="ibcalendar/ibleaders.js"></script>
<!-- 메세지 파일 ko.js 나 en.js 중 하나 추가 -->
<script src="ibcalendar/locale/ko.js"></script>
이 후 캘린더 객체의 id, 달력이 그려질 DOM element, 생성 옵션과 같은 정보를 설정하고 IBSheet.create() 함수를 통해 객체를 생성합니다.
객체 생성이후 calendar.render() 함수를 실행해 주어야 실제 DOM에 달력이 그려집니다.
[자바스크립트 구문]
function initCalendar () {
var id = "calendar1",
el = document.getElementById("calendar-container"),
options = { // 캘린더 생성 옵션
headerToolbar: { // 헤더 툴바 표시 정보
left: "today prev next",
center: "title",
right: "dayGridMonth,timeGridWeek,listMonth"
},
height: "100%", // 부모 요소의 높이에 맞추어 생성
eventSources: [
{
id: "Softin",
events: eventData // 초기 로딩 데이터
}
]
};
IBCalendar.create(id, el, options); // 캘린더 객체 생성
IBCalendar.get(id).render(); // 캘린더 렌더링
}
[HTML 구문]
<body onload="initCalendar()">
<!-- 캘린더의 부모 요소 -->
<div style="width:100%; height:600px;">
<!-- 캘린더가 그려질 DIV 객체 -->
<div id="calendar-container"></div>
</div>
</body>
options
와 evnets
는 달력객체구조를 참고하세요.
eventSources: [
// your event source
{
id: "IBCalendar1"
events: function(info, successCallback, failureCallback) {
// jquery ajax 를 이용한 통신
// 비동기 문제로 인해 반드시 async: false 설정해야 한다.
$.ajax({
url: "/data/ibcalendar/devsample",
method: "GET",
async: false,
dataType: "json",
data: {
start: IBCalendar.DateTime.fromJSDate(info.start).toISO(),
end: IBCalendar.DateTime.fromJSDate(info.end).toISO()
},
success: function (result) {
successCallback(result); // 해당 함수에 일정 정보를 인자로 호출 시켜주어야 달력에 렌더링 됩니다.
},
error: function (xhr, status, errorThrown) {
failureCallback(status);
}
});
}
}
]