스프링 Tiles를 활용한 게시판만들기 (캘린더 작성, 수정, 삭제) 풀캘린더 활용

Fullcalendar 전체화면

 

 

<%@page import="bit.com.a.dto.CalendarPlugDto"%>
<%@page import="java.util.List"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>

<link href="<%=request.getContextPath() %>/fcalLib/main.css" rel="stylesheet">
<script src="<%=request.getContextPath() %>/fcalLib/main.js"></script>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>

<style>
.body {
  margin: 40px 10px;
  padding: 0;
  font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
  font-size: 12px;
}

#calendar {
  max-width: 900px;
  margin: 0 auto;
} 
</style>

<%
List<CalendarPlugDto> list = (List<CalendarPlugDto>)request.getAttribute("callist");
/*
for(CalendarPlugDto c : list){
	System.out.println(c.toString());
}
*/



// JSONObject, JSONArray <-- java json

String events = "[";

for(CalendarPlugDto c : list){
	events += "{ id:'" + c.getId() + "', title:'" + c.getTitle() + "', start:'" + c.getStartdate() + "', end:'" + c.getEnddate() + "', constraint:'" + c.getContent() + "',color:'" +c.getColor()+ "',seq:'"+c.getSeq()+"'},";	
}



events = events.substring(0, events.lastIndexOf(","));
events += "]";

System.out.println(events);

request.setAttribute("events", events);
%>






<!--칼렌더 리스트 -->
<div class="body">
	<div id="calendar"></div>
</div>

Fullcalendar.js

 

<script type="text/javascript">
document.addEventListener("DOMContentLoaded", function () {
	
	let calendarEl = document.getElementById('calendar');
	
	let calendar = new FullCalendar.Calendar(calendarEl, {
		
		headerToolbar: {
			left: "prev,next today",
			center: "title",
			right: 'dayGridMonth,timeGridWeek,timeGridDay,listMonth'
		},
		initialDate: new Date(),     // '2021-05-01',	처음 실행시 기분이 되는 날짜
		locale: 'ko',				 // 한글설정
		navLinks: true,
		businessHours: true,
		events:<%=request.getAttribute("events") %>
		
		
		<%-- <%=request.getAttribute("events") %> --%>
	});
	
	
	
	
	
	
	calendar.render();	// rendering	
	
	calendar.on("dateClick", function (info) {
		//alert('dateClick');
		$('#exampleModal').modal('show');
	});
	
	//클릭시 디테일 화면
	calendar.on("eventClick", function(info) {
		//alert(info.event.seq);
		$('#datail').modal('show');
		
		
		$('#d_title').val(info.event.title);
		$('#d_id').val(info.event.id);
		$('#d_content').val(info.event.constraint);
		$('#d_start').val(info.event.start);
		
		
		//사용자가 종료날짜를 입력하지 않을시 
		//종료날짜에 시작날짜 입력
		if($("#d_end").val() == ""){
			$('#d_end').val(info.event.start);
		}else{
			$('#d_end').val(info.event.end);
		}
		
	
		$('#d_laval').val();
		
	});
	
	
	
});

 $("#ajaxlist").click(function () {
	 $.ajax({
	      url: "Acalendarpluglist.do",
	      type: "GET",
	      cache: false,
	      dataType: "json",
	      data: $('#like_form').serialize(), //아이디가 like_form인 곳의 모든 정보를 가져와 파라미터 전송 형태(표준 쿼리형태)로 만들어줌
	      success:
	      function(data){ //ajax통신 성공시 넘어오는 데이터 통째 이름 =data
	      
			var list = date;	      
	      
	      },
	      error:
	      function (request, status, error){
	      alert("ajax실패")
	      }
	      });
})
 

</script>

CALENDARPLUG TABLE

 

fcal js파일 위치

<link href="<%=request.getContextPath() %>/fcalLib/main.css" rel="stylesheet">
<script src="<%=request.getContextPath() %>/fcalLib/main.js"></script>

목록 좌측 메뉴의 "일정추가" 클릭시

화면전환되지않고 modal을 사용하여 그 페이지에서 사용자가 일정추가 가능

제목, 캘린더에 일정을 표시할 색상, 시작날짜, 종료날짜, 내용 추가가능

 

---

left-calendar.jsp

왼쪽 메뉴에서 일정추가 누를시 모달로 창 생성

 

<%@page import="java.util.Calendar"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
   <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/timepicker/1.3.5/jquery.timepicker.min.css"> 
   <script src="//cdnjs.cloudflare.com/ajax/libs/timepicker/1.3.5/jquery.timepicker.min.js"></script>
  <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
    
    <%
    Calendar cal = Calendar.getInstance();
    
    int thour = cal.get(Calendar.HOUR_OF_DAY);
    int tmin = cal.get(Calendar.MINUTE);
    
    %>
    

<div class="menu_table">
	<ul style="width: 100%">
		<li class="title">일정관리</li>
		<li class="subtitle">일정</li>
		<li class="menu_item">
			<a href="calendarpluglist.do" title="일정">일정목록</a>
		</li>
		<li class="menu_item">
			<a href="#none" id = "insertDate" title="일정추가" data-toggle="modal" data-target="#insertCal">일정추가</a>
		</li>					
	</ul>
</div>      

<!-- 모달 창 테두리 -->
    <div class="modal fade" id="insertCal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
      <!-- 모달 대화창 본체-->
      <div class="modal-dialog" role="document">
        <!-- 모달 콘텐츠 부분 -->
        <div class="modal-content">
          <!-- 모달 헤더ー -->
          <div class="modal-header">
            <!-- 모달 제목 -->
            <h5 class="modal-title" id="exampleModalLabel">일정추가</h5>
            <!-- 닫기 아이콘 -->
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
             <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <!-- 모달 본문 -->
          <div class="modal-body">

						<form action="" id="_frm">          	
						<table class = "list_table">
						<col width="500"><col width="450">
						
						<tr>
						
							<th>ID</th>
							<td>
							${mem.id }
							<input type = "hidden" name = "id" value = "${mem.id }">
							</td>
						</tr>
						
						<tr>
						
							<th>제목</th>
							<td>
								<input type = "text" size = "60" name = "title">
							</td>
						</tr>
						
						<tr>
							
							<th>라벨 색상</th>
							<td>
							일정에 표시할 라벨 색상을 고르세요!
							<select name = "color">
								<option value="red">레드</option>
								<option value="blue">블루</option>
								<option value="orange">오렌지</option>
								<option value="yellow">엘로우</option>
								<option value="black">블랙</option>
							</select>
							
							</td>
						</tr>
						
						
							<tr><!--일정  -->
							
								<th>일정</th>
								<td>
									시작일<input name="startdate" type="datetime-local" id="time-holder" value="" />
									<br>
									종료일<input name="enddate" type="datetime-local"  id="time-holder2" />
									
								
									
							</tr><!--일정끝  -->
								
								<tr>
									<th>내용</th>
									<td>
										<textarea rows="20" cols="60" name = "content"></textarea>
									</td>
									
								</tr>
								
								
								<tr>
								
									<td colspan="2">
										<input type="button" id = "_btnWrite" value = "일정추가">
									
									</td>
								</tr>
								
									</table>
						          	
						 </form>         	
						          	
          	
          	
          </div>
          <!-- 모달 꼬리말 -->
          <div class="modal-footer">
            <!-- 닫기 버튼 -->
            <button type="button" class="btn btn-secondary" data-dismiss="modal">닫기</button>
          </div>
        </div>
      </div>
    </div>

<script>

$("#_btnWrite").click(function () {
	$("#_frm").attr("action","calplugwriteAf.do").submit();
	
});


//일정 추가시 현재시간으로 설정
//https://hianna.tistory.com/319


$("#insertDate").click(function () {
	
	document.getElementById('time-holder').value= new Date().toISOString().slice(0, 16);
	document.getElementById('time-holder2').value= new Date().toISOString().slice(0, 16);

});
</script>

CalendarPlugController

 

package bit.com.a.controller;

import java.util.List;

import javax.servlet.http.HttpSession;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.ResponseBody;

import bit.com.a.dto.CalendarPlugDto;
import bit.com.a.dto.MemberDto;
import bit.com.a.service.CalendarPlugService;

@Controller
public class CalendarPlugController {
	
	@Autowired
	CalendarPlugService service;
	
	@RequestMapping(value = "calendarpluglist.do", method = RequestMethod.GET)
	public String calendarpluglist(Model model, HttpSession session) {
		
		model.addAttribute("doc_title", "일정목록plug");
		
		//로그인 세션저장
		MemberDto dto = (MemberDto)session.getAttribute("login");
		model.addAttribute("mem", dto);
		
		//callist를 하기위해 cal 인스턴스 선언
		//일정은 자기껏만 볼수있다
		
		CalendarPlugDto cal = new CalendarPlugDto();
		cal.setId(dto.getId());
		
		List<CalendarPlugDto> list = service.getCalendarPlugList(cal);
		
		model.addAttribute("callist", list);
		
		return "calendarpluglist.tiles";
	}
	
	@RequestMapping(value = "calplugwriteAf.do", method = RequestMethod.GET)
	public String calwrtieAf(CalendarPlugDto dto) {
		
		System.out.println("calplugwriteAf Controller");
		
		boolean calwrite = service.addCal(dto);
		
		if(calwrite) {
			System.out.println("일정이 성공적으로 추가되었습니다");
			return "redirect:/calendarpluglist.do";
		}
		
		return "redirect:/calendarpluglist.do";
	}
	



}