fullcalenda 캘린더 raido버튼으로 일정구분

국비지원 최종 프로젝트

​

팀 이름 : 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.14 풀캘린더 일정 버튼 구현하기.

​

---

​

​

내용 - 우리가 계획 하는 그룹웨어는 부서별,개인별 일정이 각자 따로따로 있다.

팀장급이상은 부서에 일정을 적어 부서에 공지를 띄울수도 있고, 개인일정을 작성할수도 있어야 한다.

팀장급밑은 부서 일정을 볼수는 있지만 작성할수 없고, 개인일정을 등록할수 있다.

​

​

미리보기

[ 오부장 ]이 부서에 따로 글을 작성한 내용이 보이게 되며, 개인글로 작성한 글은 보이지 않는다.

[ 오부장 ]이 홍보팀이라면 오부장이 쓴 홍보팀은 부서를 클릭하면 글이 보이게 된다.

​

미리보기

[ 오부장 ]이 개인이 작성한 일정을 볼수 있으며, 부서 와는 상관없이 개인 일정을 등록할수 있다. (자신만의 일정)

​

​

​

---

​

​

일정을 등록할때, 부서로 올릴 것 인지 개인으로 올릴 것 인지 체크를 하고 그 값을 저장하게 해줬다.

부서면 dept,

개인은 user,

로 값을 넘어오게 해주었다.

매니저 일정추가 Controller , DTO에 setDivide로 값을 넣어준상태.

​

 

 

메인페이지.jsp

: {"type": type} 으로 Controller에 값을 전달한다.

$.ajax({
	         url: "/miracle/schedule/managerListAll",
	         type: "get",
	         data:{"type": type},
	               
			 success:function(data, textStatus, xhr){
			 	 console.log(data);
	
				 let allData = data;								
					
				 let allDataArray = [];							
				 let oneDayData = {};						
					
				 for(let i = 0; i < allData.length; i++){
					
					oneDayaData = {
						"start" : allData[i].start,			
						"end" : allData[i].end,
						"title": allData[i].title,
						"divide": allData[i].divide,
						"deptCode": allData[i].deptCode
					}
					allDataArray.push(oneDayaData);				 
				}
				
				 
				
	
				 let calendarEl = $('#calendar')[0];
		         let calendar = new FullCalendar.Calendar(calendarEl, {
			              headerToolbar: {
			                  left: 'prev,next today',
			                  center: 'title',
			                  right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
			              },
			                         
			               eventClick: function(info) {
				        	   console.log("title : " + info.event.title);
				        	   console.log("divide : " + info.event._def.extendedProps.divide);
			               },
			           	   events: allDataArray					
			           	   
			               ,locale: 'ko'
			           });
			           calendar.render();
		     },
			 error:function(xhr, status, error){
				 console.log(error);
			 }
	        });

 

 

​

Controller

: ajax에서 넘어온 값을 확인하게 위해 type을 찍고 잘들어 왔으면 작업을 시작해도 좋다.

if 절을 이용해 type에 들어온 값이 "dept 면 부서 "user"면 개인으로 값을 넣어주었다.

​

세션을 통해 로그인한 사용자의 deptCdoe를 넣어 memberDTO -> ScheduleDTO 순으로 넣어주었다.

 

/**
	 * <pre>
	 *   manager 메인 페이지 
	 * </pre>
	 * @return
	 */
	@GetMapping(value="/managerListAll", produces = "application/json; charset=utf-8")
	@ResponseBody
	public String managerAllMenuList(@RequestParam(value="type", required=false)String type,
			      HttpServletRequest request) {
		
		System.out.println("넘어온 type : " + type);
		
		ScheduleDTO scheduleDTO = new ScheduleDTO();

		if(type.equals("dept")) {
			scheduleDTO.setDivide("부서");
		}else if(type.equals("user")) {
			scheduleDTO.setDivide("개인");
		} 
		
		System.out.println("들어온 값 확인 : " + scheduleDTO);	
		
		MemberDTO memberDTO = new MemberDTO();
		
		String deptCode = (((LoginDTO)request.getSession().getAttribute("loginMember")).getDeptCode());
		System.out.println("deptC 확인 : " + deptCode);

		memberDTO.setDeptCode(deptCode);
		
		System.out.println("mem확인 : " + memberDTO);
		
		scheduleDTO.setMemberDTO(memberDTO);

		
		System.out.println("scheduleDTO 값 출력 : " + scheduleDTO);
	
		// 1 조회
		List<ScheduleDTO> list = scheduleService.managerAllSchedule(scheduleDTO);	
		
		

		// 2. 조회된 결과 출력
		System.out.println("마지막 전달할 list값 : " +list);
		
		Gson gson =  new GsonBuilder()
				.setDateFormat("yyyy-MM-dd").create();
		
		String jsString = gson.toJson(list);
		System.out.println(jsString);
		
		return jsString;
	}

 

 

 

mapper.xml 쿼리

association 을 통해 주입

 

 

<select id="managerScheduleList"  resultMap="scheduleMap">
SELECT
	       A.SC_START_DATE
	     , A.SC_END_DATE
	     , A.USER_NO
	     , A.SC_NO
	     , A.SC_CONTENT
	     , A.SC_DIVIDE
	     , A.SC_YN
	     , A.SC_ALLDAY
	     , A.SC_DEFID
	     , A.SC_INSTANCEID
  FROM SCHEDULE A
   JOIN MRC_MEMBER M ON(A.USER_NO = M.USER_NO)
WHERE  A.SC_DIVIDE = #{ divide } 
	AND M.DEPT_CODE = #{ memberDTO.deptCode } 
    
</select>

 

로그인을하고 일정을 누를시에 부서에 Checked를 해놔서 일정을 누르면

바로 작성한 부서목록을 볼수 있고,

​

"개인"을 눌러주면 개인 일정을 볼수 있다.