달력 만들기 - fullCalendar
달력을 일일히 다 만드려면 힘들지만 유용한 라이브러리가 있다.
FullCalendar
이 라이브러리를 쓰면 단 몇줄로 달력을 구현할 수 있다. 많은 기능도 제공한다.
사용법
라이브러리 다운 및 로드
node.js를 사용한다면 npm으로 다운받을 수 있다.
$ npm install fullcalendar
직접 라이브러리 파일을 다운받을 수 있다.
파일들 중 사용할 2개의 파일만 가져와 프로젝트의 css, js 파일에 넣는다.
그리고 불러오면 되는데 fullcalendar는 bootstrap, jquery, moment를 사용한다.
먼저 이 셋을 로드하고 라이브러리를 사용할 수 있다.
<script src="../static/vendor/jquery/jquery.min.js"></script>
<script src="../static/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>
<link href="fullcalendar/fullcalendar.min.css" rel="stylesheet">
<script src="fullcalendar/fullcalendar.min.js" type="text/javascript"></script>
html, js
- html
<div id='calendar'></div>
- js
$(function() {
// page is now ready, initialize the calendar...
$('#calendar').fullCalendar({
// put your options and callbacks here
})
});
이렇게만 하면 달력이 나온다.
events data
달력에 특정 이벤트 데이터를 표시할 수 있다.
- html
<div id='calendar'></div>
- js
$(function() {
// page is now ready, initialize the calendar...
$('#calendar').fullCalendar({
events: [
{
title: "Java seminar",
start: "2018-08-27",
end: new Date()
}
]
})
});
