Full Calendar 정복하기
Full Calendar 를 정복하자
캘린더가 필요해서 직접 만들까 가져다쓸까 여러가지 시행착오 끝에 역시 가장 유명하고 멋드러진(?) Full Calendar를 사용하기로 마음먹었다.
영어도 부족하고 경험도 부족한 탓에… 항상 새로운 API를 더디고 어렵다…
부족하지만 하나하나 배운 것을 기록해보도록 하자
Install
공식 DOC 에 보면 설치하는 방법이 잘 나와있다.
방법은 Script Tag 와 Module 사용, 두 가지가 나와있다. 모듈사용은 웹팩 등을 사용해야 하는 것 같은데 필자는 간단하게 Script tag를 사용하기로 했다.
홈페이지의 downloads page 에서 캘린더 Zip을 다운받고,
jquery 와 Moment.js를 설치한다.
jquery 설치
npm install jquery
or
yan add jquery
Moment 설치
npm install moment --save # npm
yarn add moment # Yarn
Install-Package Moment.js # NuGet
spm install moment --save # spm
meteor add momentjs:moment # meteor
bower install moment --save # bower (deprecated)
Loading the Code
설치가 다 끝났으면 다운받은 Zip파일의 lib폴더와 fullcalendar.js 파일, fullcalendar.css 파일을 내 프로젝트로 가져온다.
필자는 js파일은 /js, css파일은 /css 폴더에 저장했다.
이제 코드를 만져보자.
html의 header 에 다음의 코드를 넣는다.
<link rel='stylesheet' href='fullcalendar/fullcalendar.css' />
<script src='lib/jquery.min.js'></script> <script src='lib/moment.min.js'></script>
<script src='fullcalendar/fullcalendar.js'></script>
그리고 sciprt에 다음의 함수를 하나 추가해준다.
<script>
$(function () {
// page is now ready, initialize the calendar...
$('#calendar').fullCalendar({
// put your options and callbacks here
})
});
</script>
그리고 body에 id "calendar"를 가진 div를 하나 만들어준다.
<div id="calendar"> </div>
여기까지 했으면 기본 캘린더가 하나 탄생한다!
html 파일은 다음과 같이 되겠다.
index.html
<!DOCTYPE html>
<html>
<head>
<link rel='stylesheet' href='css/fullcalendar.css' />
<script src='lib/jquery.min.js'></script>
<script src='lib/moment.min.js'></script>
<script src='js/fullcalendar.js'></script>
<script>
$(function () {
// page is now ready, initialize the calendar...
$('#calendar').fullCalendar({
// put your options and callbacks here
})
});
</script>
</head>
<body>
<div id="calendar">
</div>
</body>
</html>
정복한거 맞나요? ;;
답글삭제하시다가 정복당하신거같은데
삭제