자바스크립트 유용한 달력 라이브러리 full calendar 사용법 한글 옵션 적용

 

자바스크립트 유용한 달력 라이브러리 full calendar 사용법 한글 옵션 적용

 

 

full calendar 는 달력을 사용해 일정관리 페이지를 만들때 유용하게 사용된다.

 

그럼 사용법을 보자.

아래의 Link를 클릭하면 홈페이지로 이동된다.

 

Link : http://fullcalendar.io/

 

 

 

정말 깔끔한 라이브러리고 사용법도 어렵지 않다.

다운로드를 하기 위해서 상단 메뉴의 Download를 클릭한다.

 

그럼 상단에 최신 압축파일을 다운로드 할수 있다(Latest)

 

다운받은 파일을 압축풀면 아래와 같은 파일들이 있고

개발할때는 선택된 3개의 파일만이 필요하니 복사해서 원하는 위치에 붙여넣는다.

 

 

이제 full calendar 를 사용할 페이지에 3개의 파일을 불러온다.

 

 

 

<link rel="stylesheet" type="text/css" href="${ctx }/css/fullcalendar.css" />
<link rel="stylesheet" type="text/css" href="${ctx }/css/fullcalendar.min.css" />
<script type="text/javascript" src="<c:url value='/js/fullcalendar.min.js'/>"></script>

 

그리고 body내에 div를 추가한다.

 

<div id="calender"></div>

 

그리고 스크립트 부분에 아래의 코드를 추가해 주면 된다.

아래의 코드는 한글로 표시되도록 옵션을 수정한 한 것이다.

 

<script type="text/javascript">

$(function(){
 calendarEvent();
});

function calendarEvent(eventData){
 $("#calender").html("");
 var date = new Date();
 var d = date.getDate();
 var m = date.getMonth();
 var y = date.getFullYear();
 var calendar = $('#calender').fullCalendar({
  header: {
   left: "",
   center: "title",
//    right: "month,basicWeek,basicDay"
   right: "today prev,next"
   },
   editable: true,
   titleFormat: {
   month: "yyyy년 MMMM",
   week: "[yyyy] MMM dd일{ [yyyy] MMM dd일}",
   day: "yyyy년 MMM d일 dddd"
   },
   allDayDefault: false,
   defaultView: "month",
   editable: false,
   monthNames: ["1월","2월","3월","4월","5월","6월","7월","8월","9월","10월","11월","12월"],
   monthNamesShort: ["1월","2월","3월","4월","5월","6월","7월","8월","9월","10월","11월","12월"],
   dayNames: ["일요일","월요일","화요일","수요일","목요일","금요일","토요일"],
   dayNamesShort: ["일","월","화","수","목","금","토"],
   buttonText: {
   today : "오늘",
   month : "월별",
   week : "주별",
   day : "일별",
   },
   events : eventData,
   timeFormat : "HH:mm",
 });
</script>

 

 

 

그럼 위와 같은 달력이 출력된다.

위의 달력은 css를 약간 수정해서 토요일과 일요일 바탕색을 바꿔주었다.

훨씬더 깔끔한 달력이 되었다.

 

css가 적용된 파일은 아래 파일은 다운받아 적용하면 된다 ㅎ

fullcalendar.css

fullcalendar.min.css

 

 

full calendar 라이브러리를 활용한 다양한 기능들은 아래의 Link를 참조~!

 

Link : full calendar 스케줄 데이터 불러오기

Link : full calendar 특정일자 배경색 바꾸기

Link : full calendar 날짜 클릭 시 이벤트

Link : full calendar 이벤트 클릭 시 이벤트

Link : full calendar 오른쪽 버튼 클릭시 이벤트