ajax 활용 캘린더 만들기

Spring 프레임워크와 ajax를 활용하여 비동기 방식 캘린더를 구현했다.

 

 

 

구현 방식은 캘린더 상단에 new Date()를 이용하여 기본값으로 현재 년, 월을 표시하였고,

버튼을 눌러 표시하는 년, 월의 숫자가 바뀔 때 그 태그 text값을 JQuery를 사용하여 가져와 ajax Data로 넘겨주었다.

버튼을 누를때마다 ajax를 재호출하는 방식.

년, 월의 값을 컨트롤러로 보내어 해당 월의 스케줄을 List 형식으로 가져오고, 

각 월의 첫째날 요일, 마지막날 요일, 마지막 일수 등을 구해 기본 form을 만들고 

append()를 통해 만든 태그를 뿌려주었다.

년, 월이 바뀔때마다 남아있던 태그는 초기화하고 뿌려야 하기 때문에, 생성된 tr태그의 class 이름을 통일하여

remove()로 삭제해주었다.

기능구현하는 함수들은 따로 만들어 호출해주었다.

 

 

 

 

calendarlist.jsp

<%@page import="java.util.List"%>
<%@page import="java.util.Calendar"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    

<style type="text/css">

#menu { 
	float:right; 
	list-style-type:none; 
	margin:0 0 1em; 
	padding:8px 0 0 10px; 
	white-space:nowrap; 
	width:100%; 
}

.pagination {
   justify-content: center;
}

</style>


<div align="center">
	<!-- 달력 테이블 -->
	<table class="table" border="1" id="calTable">
		<col width="100"><col width="100"><col width="100"><col width="100">
		<col width="100"><col width="100"><col width="100">
			<tr height="100">
				<!-- 첫번째 행 (보이는 년,월과 버튼) -->
			 	<td colspan="7" align="center" style="padding-top: 20px">
			 	
			 	<a href='javascript:prevYear()'><img src='image/left.gif'></a>
			 	<a href='javascript:prevMonth()'><img src='image/prec.gif'></a>
			 	
				<font id="yyyy" color="black" style="font-size: 40px">
		 		</font>
				<font color="black" style="font-size: 40px">년
		 		</font>
				<font id="MM" color="black" style="font-size: 40px">
		 		</font>
				<font color="black" style="font-size: 40px">월
		 		</font>
		 		
		 		<a href='javascript:nextMonth()'><img src='image/next.gif'></a>
		 		<a href='javascript:nextYear()'><img src='image/last.gif'></a>
			 	</td>
			</tr>	
		 	
		 	<!-- 두번째 행 (요일) -->
		 	<tr height="50">
		 		<th align="center">일</th>
		 		<th align="center">월</th>
		 		<th align="center">화</th>
		 		<th align="center">수</th>
		 		<th align="center">목</th>
		 		<th align="center">금</th>
		 		<th align="center">토</th>
		 	</tr>
		 	
		 	
	</table>
</div>


<script type="text/javascript">


let now = new Date();
let year = now.getFullYear();	//년
let month = now.getMonth()+1;	//월
let date = now.getDate();	//일
let day = now.getDay();	//요일 0~6
//alert(date);


$('#yyyy').text(year);
$('#MM').text(month);


getCalListData();

//bbslist를 취득
function getCalListData() {
	
	let selectYear = $('#yyyy').text();
	let selectMonth = $('#MM').text();
	
	
	$.ajax({
		url:"./callistData.do",
		type:"get",
		data:{
			year:selectYear,
			month:selectMonth
		},
		success:function(list){
			//alert('success');
			//alert("년/월 : "+selectYear+"/"+selectMonth);
			
			$('.calCls').remove();
			
			let lastDay = (new Date(selectYear, selectMonth, 0)).getDate();	// 마지막 일수
			//alert("마지막날 일수 : "+lastDay);
			let firstDayOfWeek = (new Date(selectYear, selectMonth-1, 1)).getDay();	//첫날 요일
			//alert("첫날요일 : "+firstDayOfWeek);
			let lastDayOfWeek = (new Date(selectYear, selectMonth, 0)).getDay();	//마지막날 요일
			//alert("마지막날요일 : "+lastDayOfWeek);
			
			let middle = '<tr class="calCls" height="100" align="left" valign="top">';
			
			/* 첫번째 줄 회색칸 */
			for(i = 1; i <= firstDayOfWeek; i++) {
				middle += "<td style='background-color: #cecece'>&nbsp;</td>";
			} 
			
			/* 날짜 표시 */
			for(i = 1; i <= lastDay; i++) {
				
				middle += "<td>"
					+ callist(selectYear, selectMonth, i)
					+ "&nbsp;&nbsp;"
					+ showPen(selectYear, selectMonth, i)
					+ makeTable(selectYear, selectMonth, i, list)
					+ "</td>";
				
		     	if( (i + firstDayOfWeek) % 7 == 0 && i != lastDay) {				
					middle += "</tr><tr class='calCls' height='100' align='left' valign='top'>";				
				} 			
		     	
			}
			
			/* 마지막 줄 회색칸 */
			for(i = 1; i <= 6 - lastDayOfWeek; i++) {
				middle += "<td style='background-color: #cecece'>&nbsp;</td>";
			} 
			
			middle += "</tr>";
			
			$("#calTable").append(middle);	
   
		},
		
		error:function(){
			alert('error');
		}
	});
};



function prevYear() {
	
	year -= 1;
	
	$('#yyyy').text(year);
	
	getCalListData();
}

function prevMonth() {
	
	month -= 1;
	
	if(month < 1) {
		month = 12;
		year -= 1;
	}
	
	$('#yyyy').text(year);
	$('#MM').text(month);
	
	getCalListData();
}

function nextMonth() {
	
	month += 1;
	
	if(month > 12) {
		month = 1;
		year += 1;
	}
	
	$('#yyyy').text(year);
	$('#MM').text(month);
	
	getCalListData();
}

function nextYear() {
	
	year += 1;
	
	$('#yyyy').text(year);
	
	getCalListData();
}




/* 날짜를 클릭하면 그 날의 일정을 모두 볼 수 있는 callist.jsp로 이동하는 url 만드는 메소드 */

function callist(year, month, day) {
	
	let str = "&nbsp;<a href='calDayList.do?year="+year+"&month="+month+"&day="+day+"'>"+day+"</a>";
	/* <a href='calDetail.do?year=2021&month=3&day=19'>19</a> */
	return str;
	
}

 

/* 일정을 추가하기 위해서 pen 이미지를 클릭하면 calwrite.jsp로 이동하는 url 만드는 메소드 */
function showPen(year, month, day) {
	
	let str = "";
	let image = "<img src='image/pen.png' width='18px' height='18px'>";
	
	str += "<a href='calWrite.do?year="+year+"&month="+month+"&day="+day+"'>"+image+"</a>";
	
	/* ex)	<a href='calwrite.jsp?year=2021&month=3&day=19'><img src='image/pen2.png' width='18px' height='18px'></a> */
	
	return str;
	
}


/* 달력의 날짜 별로 스케줄을 설정할 테이블을 작성하는 메소드 */
function makeTable(year, month, day, list) {

	let str = "";
	let dates = (year+"") + two(month+"") + two(day+"");	//월과 일은 한자리일때 두자리로 바꿔줌
	str += "<table>";
	str += "<col width='100'>";
	
	$.each(list, function (i, val) {
		if(val.rdate.substring(0, 8) ==dates) {	//'list안의 날짜'가 '입력하는 날짜'와 같을 때,
			str += "<tr>"
			+ "<td style='line-height: 3px; overflow: hidden; border-collapse:collapse;'>"
			+ "<a href='calDetail.do?seq=" + val.seq + "'>"
			+ "<font style='font-size:13px; color:blue'>"
			+ dot3(val.title)
			+ "</font>"
			+ "</a>"
			+ "</td>"
			+ "</tr>";
		}
	})
	
	str += "</table>";
	
	return str;
	
}


/* 한 문자를 두 문자로 변경해주는 메소드 (ex 3월 - > 2021319 가 아닌 20210319로 만든다) */
function two(msg) {
	
	return msg.length < 2 ? "0"+msg : msg;
	//길이가 2보다 작으면 앞에 0을 붙여준다.
}


/* 일정의 제목이 길 때 ... 으로 처리하는 메소드 (ex 4글자 제한일 때, CGV에서 데이트 -> CGV에... ) */
function dot3(msg) {
	let str = "";
	if(msg.length > 4) {
		str = msg.substring(0, 4); // ex) CGV에서 데이트 -> CGV에...
		str += "...";
	}
	else {
		str = msg;
	}
	return str;
}



</script>

 

 

calWrite.jsp

 

일정을 작성하는 페이지.

el태그와 core태그를 활용했다.

select 태그에서 기본 selected 값이 선택한 월,일로 표시되고 싶었는데,

자바스크립트에서 선택하는 방법을 찾아 활용해보았다.

 

 

※ JSP에서는 EL태그와 자바스크립트 템플릿 리터럴 표현식 모양이 ${}로 똑같다.

그래서 리터럴 표현식에는 구분을 주기 위해 달러 사인 앞에 \(역슬래시)를 넣어주면 정상적으로 작동하게 된다.

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
 


<div align="center">
	<form action="calWriteAf.do" method="get">
	
		<table border="1">
			<col width="50"><col width="500">
				<tr>
					<th>ID</th>				
					<td>${login.id }<input type="hidden" name="id" value="${login.id }"> </td>
				</tr>
				<tr>
					<th>제목</th>
					<td>
						<input type="text" size="60" name="title">
					</td>
				</tr>
				<tr>
					<th>일정</th>
					<td>
					
						<!-- -------연도 선택------- -->
						<c:if test="${param.year != null }">
						<select id="year" name="year">
							<c:forEach begin="${param.year - 5 }" end="${param.year + 5 }" step="1" var="i">
								<option value="${i}">${i}</option>
							</c:forEach>
						</select>년
						</c:if>
						
						
						<!-- -------월 선택------- -->
						<c:if test="${param.month != null }">
						<select id="month" name="month">
							<c:forEach begin="1" end="12" step="1" var="i">
								<option value="${i}">${i}</option>
							</c:forEach>
						</select>월
						</c:if>
						
						
						<!-- -------일 선택------- -->
						<c:if test="${param.month != null }">
						<select id="day" name="day">
							<c:forEach begin="1" end="${maxDay }" step="1" var="i">
								<option value="${i}">${i}</option>
							</c:forEach>
						</select>월
						</c:if>	
						
						
						<!-- 시 선택------- -->
						<c:if test="${param.month != null }">
						<select id="hour" name="hour">
							<c:forEach begin="0" end="23" step="1" var="i">
								<option value="${i}">${i}</option>
							</c:forEach>
						</select>시
						</c:if>		
							
						
						<!-- 분 선택------- -->
						<c:if test="${param.month != null }">
						<select id="min" name="min">
							<c:forEach begin="0" end="59" step="1" var="i">
								<option value="${i}">${i}</option>
							</c:forEach>
						</select>분
						</c:if>		
						
						
					</td>
				</tr>
				
				<tr>
					<th>내용</th>
					<td>
						<textarea rows="20" cols="60" name="content"></textarea>
					</td>
				</tr>
				<tr>
					<td colspan="2" align="center">
						<br><input type="submit" value="일정추가">
					</td>
				</tr>
		</table>
	</form>
</div>


<script type="text/javascript">

	let now = new Date();
	let hour = now.getHours();
	let minutes = now.getMinutes();

	$('#year > option[value="${param.year}"]').attr('selected', true);
	$('#month > option[value="${param.month}"]').attr('selected', true);
	$('#day > option[value="${param.day}"]').attr('selected', true);
	$(`#hour > option[value=\${hour}]`).attr('selected', true);
	$(`#min > option[value=\${minutes}]`).attr('selected', true);


</script>

 

 

Calcontroller.java

package bit.com.a.controller;

import java.util.Calendar;
import java.util.List;

import javax.servlet.http.HttpServletRequest;
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.ModelAttribute;
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.BbsDto;
import bit.com.a.dto.CalParam;
import bit.com.a.dto.CalendarDto;
import bit.com.a.dto.MemberDto;
import bit.com.a.service.CalService;
import util.UtilEx;

@Controller
public class CalController {
	
	
	@Autowired
	CalService calService;
	
	
	@RequestMapping(value = "callist.do", method = RequestMethod.GET)
	public String callist(Model model) {
		
		model.addAttribute("doc_title", "일정관리");
		
		return "callist.tiles";
	};
	
	
	@ResponseBody
	@RequestMapping(value = "callistData.do", method = RequestMethod.GET)
	public List<CalendarDto> callistData(String year, String month, HttpServletRequest req) {
		System.out.println("year : "+year+ " month : "+month);
		MemberDto mDto = (MemberDto)req.getSession().getAttribute("login");
		CalParam param = new CalParam(mDto.getId(), year+UtilEx.two(month));
		List<CalendarDto> list = calService.getCalList(param);
		
		return list;
	}
	
	
	@RequestMapping(value = "calDetail.do", method = { RequestMethod.GET, RequestMethod.POST })
	public String calDetail(Model model, Integer seq) {
		
		if(seq == null) seq = 0;
		System.out.println("seq : "+seq);
		CalendarDto dto = calService.calDetail(seq);
		model.addAttribute("cal", dto);
		model.addAttribute("doc_title", "일정 상세페이지");
		return "calDetail.tiles";
	}
	
	@RequestMapping(value = "calWrite.do", method = { RequestMethod.GET, RequestMethod.POST })
	public String calWrite(Model model, CalParam param) {
		model.addAttribute("doc_title", "일정쓰기");
		model.addAttribute("param", param);
		Calendar cal = Calendar.getInstance();
		int year = Integer.parseInt(param.getYear());
		int month = Integer.parseInt(param.getMonth());
		cal.set(year, month-1, 1);
		int maxDay = cal.getActualMaximum(Calendar.DAY_OF_MONTH);
		//System.out.println(year+"년 "+month+"월의 일수 : "+maxDay);
		model.addAttribute("maxDay", maxDay);
		
		
		
		
		
		return "calWrite.tiles";
	}
	
	
	
	@RequestMapping(value = "calWriteAf.do", method = { RequestMethod.GET, RequestMethod.POST })
	public String calWriteAf(CalendarDto dto, CalParam param) {
		
		String rdate = param.getYear()+UtilEx.two(param.getMonth())
						+UtilEx.two(param.getDay())+UtilEx.two(param.getHour())+UtilEx.two(param.getMin());
		System.out.println("글쓴시간 : "+rdate);
		System.out.println(dto.toString());
		dto.setRdate(rdate);

		int write = calService.calWrite(dto);
		if(write > 0 ) {
			System.out.println("글쓰기 성공");
			return "redirect:/callist.do";
		} else {
			System.out.println("글쓰기 실패");
			return "redirect:/calWrite.do";
		}
	}
	
	
	@RequestMapping(value = "calDelete.do", method = RequestMethod.GET) 
	public String calDelete(int seq) {
		
		int del = calService.calDelete(seq);
		
		if(del > 0 ) {
			System.out.println("삭제 성공");
		} else {
			System.out.println("삭제 실패");
		}
		
		return "redirect:/callist.do";
	}
	
	
	@RequestMapping(value = "calUpdate.do", method = { RequestMethod.GET, RequestMethod.POST })
	public String calUpdate(Model model, int seq) {
		model.addAttribute("doc_title", "일정수정");
		
		CalendarDto dto = calService.calDetail(seq);
		CalParam param = new CalParam(null, null, 
									dto.getRdate().substring(0, 4),
									dto.getRdate().substring(4, 6),
									dto.getRdate().substring(6, 8),
									dto.getRdate().substring(8, 10),
									dto.getRdate().substring(10, 12));
		System.out.println(param.toString());
		System.out.println(dto.toString());
		model.addAttribute("param1", param);
		model.addAttribute("cal", dto);
		
		return "calUpdate.tiles";
	}

	
	@RequestMapping(value = "calUpdateAf.do", method = { RequestMethod.GET, RequestMethod.POST })
	public String calUpdateAf(CalendarDto dto, CalParam param) {
		
		String rdate = param.getYear()+UtilEx.two(param.getMonth())
						+UtilEx.two(param.getDay())+UtilEx.two(param.getHour())+UtilEx.two(param.getMin());
		System.out.println("글쓴시간 : "+rdate);
		dto.setRdate(rdate);
		System.out.println(dto.toString());

		int update = calService.calUpdate(dto);
		if(update > 0 ) {
			System.out.println("수정 성공");
			return "redirect:/callist.do";
		} else {
			System.out.println("수정 실패");
			return "redirect:/calWrite.do";
		}
	}
	
	
	@RequestMapping(value = "calDayList.do", method = { RequestMethod.GET, RequestMethod.POST })
	public String calDayList(Model model, @ModelAttribute("param2")CalParam param, HttpSession session) {
		model.addAttribute("doc_title", "하루 일정");
		MemberDto mDto = (MemberDto)session.getAttribute("login");
		
		param.setId(mDto.getId());
		param.setYyyyMMdd(param.getYear()+UtilEx.two(param.getMonth())+UtilEx.two(param.getDay()));
		
		System.out.println(param.toString());
		List<CalendarDto> list = calService.getDayList(param);
		
		model.addAttribute("dayList", list);
		
		return "calDayList.tiles";
	}
	
	
	

}

 

 

 

calendar.xml

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper
  PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
  "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
  
  
<mapper namespace="Cal">



 <!-- 캘린더 리스트 -->
<select id="callist" parameterType="bit.com.a.dto.CalParam" resultType="bit.com.a.dto.CalendarDto">
	SELECT SEQ, ID, TITLE, CONTENT, RDATE, WDATE
	FROM 
	(SELECT ROW_NUMBER()OVER(PARTITION BY SUBSTR(RDATE, 1, 8)ORDER BY RDATE ASC) AS RNUM,  
	SEQ, ID, TITLE, CONTENT, RDATE, WDATE 
	FROM CALENDAR 
	WHERE ID=#{id} AND SUBSTR(RDATE, 1, 6)=#{yyyyMM} ) 
	WHERE RNUM BETWEEN 1 AND 3
</select>


<!-- 디테일 -->
<select id="detail" parameterType="int" resultType="bit.com.a.dto.CalendarDto">
	SELECT *
	FROM CALENDAR
	WHERE SEQ=#{seq}
</select>


<!-- 글쓰기 -->
<insert id="write" parameterType="bit.com.a.dto.CalendarDto">
	INSERT INTO CALENDAR(SEQ, ID, TITLE, CONTENT, RDATE, WDATE)
	VALUES(SEQ_CAL.NEXTVAL, #{id}, #{title}, #{content}, #{rdate}, SYSDATE)
</insert>



<!-- 글삭제 -->
<delete id="delete" parameterType="int">
	DELETE FROM CALENDAR
	WHERE SEQ=#{seq}
</delete>


<!-- 글수정 -->
<update id="update" parameterType="bit.com.a.dto.CalendarDto">
	UPDATE CALENDAR
	SET TITLE=#{title}, CONTENT=#{content}, RDATE =#{rdate} 
	WHERE SEQ=#{seq}
</update>


<!-- 하루 일정 -->
<select id="daylist" parameterType="bit.com.a.dto.CalParam" resultType="bit.com.a.dto.CalendarDto">
	SELECT SEQ, ID, TITLE, CONTENT, RDATE, WDATE 
	FROM 
	(SELECT ROW_NUMBER()OVER(PARTITION BY SUBSTR(RDATE, 1, 8)ORDER BY RDATE ASC) AS RNUM,
	SEQ, ID, TITLE, CONTENT, RDATE, WDATE
	FROM CALENDAR
	WHERE ID=#{id} AND SUBSTR(RDATE, 1, 8)=#{yyyyMMdd} )
	ORDER BY RDATE ASC
</select>



</mapper>