fullcalendar-1.4.7 이용한 schedule 달력 만들기

 

fullcalendar-1.4.7.zip

fullcalendar-1.4.7 는 free 입니다.

개발 환경은 전자정부프레임워크 (Spring 3.0, maven 등등)..

 

잘보이지도 않지만

대충 저런 방식으로 하는 달력 스케쥴러를 만드는 법에 대해서 공유해보고자 합니다.

 

일단 기본적으로 파일을 열어보시면 해당 plug-in 은 여러 셋팅이 가능한 것을 알수있습니다.

 

fullcalendar.js 파일을 열어 보시면

스크린샷에 보이는 것 처럼

버튼 위치와 달, 년도 위치를 조정하실수있습니다.

left, center, right 로 말이죠.

 

그리고 버튼 클릭시 이벤트 수정해줘야 부분도 있는데 그땐

이부분을 참조하시면 됩니다.

 

 

(왜이렇게 흐릿할까요 ㅡㅡ;;)

 

저 click 이란 부분에 이벤트 수정 하실 내용이 있으시다면 수정하시면 됩니다.

 

-------------------------------------------------------------------------

제가 구현하고자 했던 기능은

1. 관리자 단에서 일정을 저장한 대로 달력에 스케줄을 출력해준다.

   스케줄 이름, 기간 등.

2. 해당 스케줄을 클릭했을 때, 상세 내용을 상단에 출력해준다.

   첨부된 사진 및 제목, 간략한 정보 등.

 

 

캘린더 정보를 보시면 json 형식인 걸 아실 수 있습니다.

 

따라서 달력 정보 부분을 db에서 조회후

화면 단으로 가져와서

저 events : 값 을 해주면 스케쥴이 나올 거라 생각했습니다.

따라서

jQuery ajax를 이용해서,

db값을 json 형식으로 바인딩해서 뿌려주자 라고 생각 했습니다.

 

org.springframework.web.servlet.view.json.MappingJacksonJsonView

를 이용해서

ModelAndView 로해서 보낼 겁니다.

 

따라서 자바단에서

 

요론식으로 List<hashMap> 해서 보내줍니다.

 

그리고

 

화면단에서

<script src="/js/json2.js"></script>

끼워주시고.

Colored By Color Scripter™
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
$(document).ready(function() {
  displayLoading(true);
  $.ajax({
   
     type : "POST" //"POST", "GET"
     , url : "/shows/calendarAjax.do" //Request URL
     , dataType : "json" //전송받을 데이터�� 타입
                 , contentType: "application/x-www-form-urlencoded; charset=UTF-8"
     , error : function(request, status, error) {
     alert("code : " + request.status + "\r\nmessage : " + request.reponseText);
     }
     , success : function(data) {
     setCalendar(data.data);
     displayLoading(false);
    }
   });
  
 
 });
 
 function setCalendar( data ){
  var date = new Date();
  var d = date.getDate();
  var m = date.getMonth();
  var y = date.getFullYear();
  var jsonData = JSON.stringify(data).replace(/\"/gi,"");
 
  
  $('#calendar').fullCalendar({
   editable: false,
   events: eval(jsonData)
  });
  
  $("#calendar a").click(function(){
   
   $(this).attr("href","javascript:goDetail('"+$(this).attr("href")+"')");
  });
 
  
 }
 

 

여기서 받아온 json DATA를 JSON.stringify(data) 한뒤에 "를 정규식을 이용해서 제거해줍니다.

 

그리고 Calendar로 넘겨서 eval(jsonData) 로 재정의를 해주면

 

달력 데이터가 바인딩 됩니다.

 

허접하지만 이상 입니다~

[출처] fullcalendar-1.4.7 이용한 schedule 달력 만들기|작성자 헤헤