fullcalenda 캘린더 변경

국비지원 최종 프로젝트

​

팀 이름 : Miracle Job A ( 미라클 잡아 ) , 이끌렸으

팀 인원 인원 : 5명

​

Front-end

: HTML5 , CSS3, JavaScript

​

Back-end

: Java11, OracleDB 18c, SpringFrameWork, Maven, Tomcat8.5, Spring Sequrity

​

프로젝트 설명

: 기업내 간단한 그룹웨어를 구현

프로젝트 UI/UX

: Notion 페이지

: 기간 : 2022.03.27 ~ 2022.04.01 Figma를 이용한 설계진행

: ​DA#을 통한 데이터베이스 모델링

​

주요기능

: 회원관리/게시판/주소록/일정관리/전자결재

​

---

현재 : 2022.04.08 ~ Srping mybatis 구현시작

팀프로젝트 진행 과정중 [ 일정 관리 부분을 맡게 되었다. ]

나는 날짜,시간 Date 넣는게 자신이 없다.

더더욱 일정 추가라니 ...

​

​

1. 원래의 계획

- 사용자 / 매니저 일정관리 메뉴 화면이 다르게 설계 되었다.

- 회사, 부서 ,개인을 클릭시 원하는 일정을 볼수 있었다.

- 일정추가시 추가 jsp로 이동하여[ 일정추가 ]를 눌렀을시 DB에 저장과 동시에 일정이 추가 되어야 한다.

- 수정 클릭시 수정 화면으로 가서 일정 부분이 Update가 되어야 한다.

- 삭제 메인화면에서 일정 클릭후 삭제시 바로 삭제 되어야 한다.

​

2. 문제점 발생

- 웹스톰(HTML5)를 다 만들고 이제 한시름 놓은것.

​

3. 원인

- 캘린더 table로 만들었는데. 날짜를 변경할 수 없었다. 이 일정 관리는 계속 3월 이였다... 4월.. 5월 .. 볼수 없다.. 추가할수 없었다.

​

4. 해결

- 이점을 선생님과 같이 고민하였다.

- 부트 스트랩 (캘린더) 를 사용 해보라는 말씀을 해주셨다.

​

---

​

풀캘린더에 가서 데모버전을 사용해본다.

​

5. 놀라운결과

<div id='calendar-container'> <div id='calendar'></div> </div>

단 이코드 와 js 파일 CND 를 추가 해줬을 뿐인데 캘린더가 생성 되었고,

이제 3월만 있는게 아니라 여러 달을 클릭할수 있게 되었다 .

​

​

​

---

​

6. 새로운 문제점 발생

​

내가 프로젝트에서 구현하고 싶은건 사용자가 캘린더 안에 클릭후

작성하고 싶은 내용을 적으면 그 내용이 DB에 저장되어

추가 해주고 싶었다. 하지만 이 [ 풀 캘린더 ]는 그렇게 할수 없었다.

그래서 이벤트들을 추가를 해줘야만 했다.

​

select: function(arg) { // 캘린더에서이벤트를 생성 let title = prompt('일정 내용을 입력하세요 :'); if (title) { calendar.addEvent({ title: title, start: arg.start, end: arg.end, allDay: arg.allDay }) }

​

eventAdd: function(obj) { // 이벤트가 추가되면 발생하는 이벤트 sDate = obj.event._instance.range["start"].getFullYear() + '-'+(obj.event._instance.range["start"].getMonth() +1) + '-' + obj.event._instance.range["start"].getDate(); eDate = obj.event._instance.range["end"].getFullYear() + '-'+(obj.event._instance.range["end"].getMonth() +1) + '-' + (obj.event._instance.range["end"].getDate() -1); Alldata = { "startDate": sDate, "endDate": eDate, "content": obj.event._def["title"], "allday": obj.event._def["allDay"], "defId": obj.event._instance["defId"], "instanceId": obj.event._instance["instanceId"] };

​

​

​

​

​

내가 필요한 데이터 뽑아오기.

1. 일정 시작 날짜

2. 일정 마지막 날짜

3. 사용자가 작성한 내용

3. allDay가 true인지 false인지 ( true 이면 하루종일 이벤트 라고 한다.. 검색해봄... )

4. 혹시 몰라서 defId 값과 instanceId 값도 가져오기로 한다.

​

5. getMonth() +1 을 해줘야 우리 나라의 달이 나오게 되었고

6. getDate() -1 을 해줘야 사용자가 이벤트를 준 날짜를 정확하게 가져오는걸 확인했다.

​

​

allSave() -> 일정추가를 클릭했을시 이벤트

​

​

​