[FullCalendar] 풀캘린더 이용해보기

풀캘린더 cdn 받아서 일단 넣어줍니다.

사진은 생략하겠습니다

 

캘린더가 들어갈 공간 id="calendar" 입니다~

 

 

 

이게 전체코드인데요 한개씩 설명해보겠습니다

 

db에서도 컬럼명 풀캘린더 속성이랑 똑같이 title, content, start, end, textColor (이거 근데 배경색으로썼어요), allday 이렇게 구성했습니다~

 

초반설정인데요 캘린더를 아이디가 캘린더인곳에 뿌려줍니다

저는 국경일 이런걸 구글캘린더에서 받아와가지고 넣어줬어요

헤더툴바는 저렇게 구성했습니다.

editable은 드래그 가능한거고 droppable은 옮기기 가능한 속성입니다. 

풀캘린더 속성 검색하면 잘 설명되어 있습니다

 

셀렉트는 눌렀을때입니다 근데 드래그해서 선택했을때도 포함이에요 info라는 파라미터를 받는데 info안에 여러가지 속성이 있고 자동으로 값이 들어옵니다 그래서 저도 info.~~~ 값 받아서 쓰고있는거 보이시죠 ? 시작일 마감일 제목 id 등 정보가 다 들어있습니다

 

 

셀렉트하면 등록하려고 모달창 띄웠습니다

 

 

events입니다  여기는 초기 데이터를 세팅하는곳인데요 저는 db에서 뽑아냈기 때문에 자바스크립트 객체선언 해주고

events.do로 요청해서 list형식으로 반환받았습니다

 

그리고 반환받은값을 사용해서 push로 넣어줬어요 근데 여기서 allday가 좀 문제였는데요 db에서는 문자열 형식으로 'true' 'false' 넣어줬었는데 가지고 와서 사용하려고 해보니 allDay속성은  boolean형식이라서요 isAllDay라는 조건을 만들어주었고 그걸로 하루종일을 구분합니다

 

 

 

이건 eventDrop입니다~ 옮겨다가 drop했을때 얘네들이 발생하겠죠?

저는 기간 update를 하려고요.. 

moment는 지금 시간 정확하게 알기 위해서 썼습니다~ 

allDay 이벤트를 왜 나눴냐면  allDay는 시분초가 필요가 없어서 그랬을거에요

 

JSON.stringify로 보내면 @RequestBody 어노테이션 필수입니다~

저는 map으로 받는거 좋아합니다

 

이렇게 업데이트 해주고요

 

 

eventClick 이건 클릭했을때입니다 

클릭하면 모달로 상세보기 뜨게끔 했어요~

 

이건 resize했을때에요 늘리고줄이고 하는겁니다

 이때도 info에 담긴 값을 가지고 info~ 했습니다 

풀캘린더에서는 제가 해봤을땐 allday만 리사이즈가 가능했었어요 

그다음 위에거 다 하고나면 calendar.render()로 캘린더를 뿌려줍시다