fullcalendar-1.4.7 이용한 schedule 달력 만들기
fullcalendar-1.4.7 는 free 입니다.
개발 환경은 전자정부프레임워크 (Spring 3.0, maven 등등)..
잘보이지도 않지만
대충 저런 방식으로 하는 달력 스케쥴러를 만드는 법에 대해서 공유해보고자 합니다.
일단 기본적으로 파일을 열어보시면 해당 plug-in 은 여러 셋팅이 가능한 것을 알수있습니다.
fullcalendar.js 파일을 열어 보시면
스크린샷에 보이는 것 처럼
버튼 위치와 달, 년도 위치를 조정하실수있습니다.
left, center, right 로 말이죠.
그리고 버튼 클릭시 이벤트 수정해줘야 부분도 있는데 그땐
이부분을 참조하시면 됩니다.
(왜이렇게 흐릿할까요 ㅡㅡ;;)
저 click 이란 부분에 이벤트 수정 하실 내용이 있으시다면 수정하시면 됩니다.
제가 구현하고자 했던 기능은
- 관리자 단에서 일정을 저장한 대로 달력에 스케줄을 출력해준다.
스케줄 이름, 기간 등.
- 해당 스케줄을 클릭했을 때, 상세 내용을 상단에 출력해준다.
첨부된 사진 및 제목, 간략한 정보 등.
캘린더 정보를 보시면 json 형식인 걸 아실 수 있습니다.
따라서 달력 정보 부분을 db에서 조회후
화면 단으로 가져와서
저 events : 값 을 해주면 스케쥴이 나올 거라 생각했습니다.
따라서
jQuery ajax를 이용해서,
db값을 json 형식으로 바인딩해서 뿌려주자 라고 생각 했습니다.
org.springframework.web.servlet.view.json.MappingJacksonJsonView
를 이용해서
ModelAndView 로해서 보낼 겁니다.
따라서 자바단에서
요론식으로 List
그리고
화면단에서
끼워주시고.
여기서 받아온 json DATA를 JSON.stringify(data) 한뒤에 “를 정규식을 이용해서 제거해줍니다.
그리고 Calendar로 넘겨서 eval(jsonData) 로 재정의를 해주면
달력 데이터가 바인딩 됩니다.
허접하지만 이상 입니다~