Spring
74일차//spring/ Tiles를 활용한 게시판만들기 _4(캘린더 작성, 수정, 삭제 ) 🗓Fullcalendar 버전
aesup
2021. 4. 25. 22:35
728x90
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">×</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";
}
}
728x90