fullcalenda 캘린더 일정추가

국비지원 최종 프로젝트

​

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

팀 인원 인원 : 5명 - -1명이탈 = 4명

​

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~09 풀캘린더 일정추가 구현하기.

캘린더 : 메인화면,추가,수정,삭제 jsp를 각자 따로따로 만들어 주었고,

모달창을 띄워 sciprt 로 이벤트 를 넣었음

​

event : 이벤트 hover시 색이 변하고 사용자(user)가 어떤 이벤트를 클릭 했는지를 알수있다.

, 또한 각자 입맛에 맞는 css를 통해 background-color 색 등등을 바꿨다.

​

​

---

​

​

​

​

​

Fullcalendar 데모버전을 들어가면 간단한 div 태그와

javascript를 받으면 완성 된 캘린더를 구현해준다.

​

​

하지만 일정추가, 일정수정, 일정삭제는 내가 직접 구현하기로 한다. ( 달력만 빌린셈 )

fullcalendar.io

​

​

​

* 피그마로 어떻게 만들지를 일단 스케치를 했다.

​

​

​

일단 구현이 완성된 모습이다. * ScheduleUserMain 화면

추가,수정,삭제는 따로 jsp를 만들기로 했다.

​

​

​

- 일정 추가 과정 예시 -

​

​

​

​

---

​

​

​

- 일정 추가 코드 -

​

1. jsp에서 div로 복사 붙여넣기 한다

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

​

2. 스크립트 부분

<script>
        let calendar = null;
        let Alldata = {};
        $(function(){

            let calendarEl = $('#calendar')[0];

             calendar = new FullCalendar.Calendar(calendarEl, { 

                expandRows: true, // 화면에 맞게 높이 재설정
                slotMinTime: '08:00', // Day 캘린더에서 시작 시간
                slotMaxTime: '20:00', // Day 캘린더에서 종료 시간

                headerToolbar: {
                    left: 'prev,next',
                    center: 'title',
                    right: 'dayGridMonth'
                },

                initialView: 'dayGridMonth',
                editable: true,
                selectable: true, // 달력 일자 드래그 설정가능
                nowIndicator: true, // 현재 시간 마크
                dayMaxEvents: true, // 이벤트가 오버되면 높이 제한 (+ 몇 개식으로 표현)
                locale: 'ko', // 한국어 설정
                
                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 = {
                        "start": sDate,
                        "end": eDate,
                        "title": obj.event._def["title"],
                        "allday": obj.event._def["allDay"],
                        "defId": obj.event._instance["defId"],
                        "instanceId": obj.event._instance["instanceId"]
                    };

                    let allEvent = calendar.getEvents();
                    console.log(allEvent);

                     let jsondata = JSON.stringify(Alldata);
                     console.log("jsondata : " + jsondata);

                     
                },
                eventChange: function(obj) { // 이벤트가 수정되면 발생하는 이벤트
                    console.log(obj);

                },
                eventRemove: function(obj){ // 이벤트가 삭제되면 발생하는 이벤트
                    console.log(obj);

                },
                 eventClick : function(obj){
                    console.log(obj);

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

        });

        function allSave() {
        	
			 console.log(allData); */
		document.getElementById("submenu").style.display = "block";

			 
             $.ajax({
                 url: "/miracle/schedule/userScAdd",
                 type: "post",
                 data: {addEvent : JSON.stringify(Alldata)},

				 success:function(data, textStatus, xhr){
					 console.log(data);
					 
				 },
				 error:function(xhr, status, error){
					 console.log(error);
				 }
				
				 

             });
        }

​

​

3. Controller 컨트롤러부분

private ScheduleService scheduleService;
	
@Autowired
	public ScheduleController(ScheduleService scheduleService) {
	this.scheduleService = scheduleService;
}
@PostMapping("/userScAdd")
	@ResponseBody
	public String insertSchedule(@RequestParam("addEvent") String addEvent, HttpServletRequest request) throws ParseException {
		
		System.out.println("addEvent 확인 : "+ addEvent);

	    JSONParser jsonParser = new JSONParser();
		JSONObject jsonObject = (JSONObject) jsonParser.parse(addEvent);
		
		ScheduleDTO scheduleDTO = new ScheduleDTO();
		
		
		scheduleDTO.setUserNo(((LoginDTO) request.getSession().getAttribute("loginMember")).getUserNo());

		if(((LoginDTO) request.getSession().getAttribute("loginMember")).getUserNo() > 10000) {
			scheduleDTO.setDivide("부서");
		} else {
			scheduleDTO.setDivide("개인");
		}
		
        scheduleDTO.setStart(java.sql.Date.valueOf((String)jsonObject.get("start")));
        scheduleDTO.setEnd(java.sql.Date.valueOf((String)jsonObject.get("end")));
		scheduleDTO.setTitle((String) jsonObject.get("title"));
		scheduleDTO.setAllday((boolean) jsonObject.get("allday"));
		scheduleDTO.setDefId(Integer.parseInt((String)jsonObject.get("defId")));
		scheduleDTO.setInstanceId(Integer.parseInt((String)jsonObject.get("instanceId")));

		System.out.println("scheduleDTO : "+ scheduleDTO);

	    int result = scheduleService.insertService(scheduleDTO);
	    
	    String message = null;
	    
	    if(result > 0) {
	    	message = "success";
	    } else {
	    	message = "fail";
	    }

		return message;
	}

​

​

4. Service & ServiceImpl 서비스

public interface ScheduleService {
	int insertService(ScheduleDTO scheduleDTO);
}

 

@Service
public class ScheduleServiceImpl implements ScheduleService {
	
	private ScheduleMapper mapper;
	
	@Autowired
	public void ScheduleService(ScheduleMapper schedulemapper) {
		this.mapper = schedulemapper;
	}
	@Override
	public int insertService(ScheduleDTO scheduleDTO) {
		return mapper.scheduleinsert(scheduleDTO);
	}

 

 

 

 

 

5. mapper

public interface ScheduleMapper {

	int scheduleinsert(ScheduleDTO scheduleDTO);
}

6. mapper.xml

<insert id="scheduleinsert" parameterType="ScheduleDTO">
	INSERT /*com.project.miracle.schedule.model.dao.ScheduleMapper#scheduleinsert() */
	   INTO SCHEDULE A
	   (
	   	 A.SC_NO
	   , A.SC_START_DATE
	   , A.SC_END_DATE
	   , USER_NO
	   , A.SC_CONTENT
	   , A.SC_DIVIDE
	   , A.SC_ALLDAY
	   , A.SC_DEFID
	   , A.SC_INSTANCEID  
	   , A.SC_YN
	   ) 
	  	VALUES
	   (
	     SEQ_SCHEDULE.NEXTVAL
	   , #{ start }
	   , #{ end }
	   , #{ userNo }
	   , #{ title }
	   , #{ divide }
	   , #{ allday }
	   , #{ defId }
	   , #{ instanceId }
	   , 'N'
	   )
</insert>