-
달력 만들기SpringFrameWork/Spring 프로젝트 할때 참고 하면 좋은것들 2022. 10. 8. 10:38728x90
간단한 달력 만들기
Controller
public class CalendarController { @Autowired CalendarService calendarService; // 달력내역 가져오기 @RequestMapping(value="/calendar", method=RequestMethod.GET) public String calendarGet() { calendarService.getCalendar(); return "calendar/calendar/calendar"; } }
Service
public interface CalendarService { public void getCalendar(); }
ServiceImpl
public class CalendarServiceImpl implements CalendarService { @Override public void getCalendar() { // model객체를 사용하게되면 불필요한 메소드가 많이 따라오기에 여기서는 request객체를 사용했다. HttpServletRequest request = ((ServletRequestAttributes)RequestContextHolder.currentRequestAttributes()).getRequest(); // 오늘 날짜 저장시켜둔다.(calToday변수, 년(toYear), 월(toMonth), 일(toDay)) Calendar calToday = Calendar.getInstance(); int toYear = calToday.get(Calendar.YEAR); int toMonth = calToday.get(Calendar.MONTH); int toDay = calToday.get(Calendar.DATE); // 화면에 보여줄 해당 '년(yy)/월(mm)'을 셋팅하는 부분(처음에는 오늘 년도와 월을 가져오지만, '이전/다음'버튼 클릭하면 해당 년과 월을 가져오도록 한다. Calendar calView = Calendar.getInstance(); int yy = request.getParameter("yy")==null ? calView.get(Calendar.YEAR) : Integer.parseInt(request.getParameter("yy")); int mm = request.getParameter("mm")==null ? calView.get(Calendar.MONTH) : Integer.parseInt(request.getParameter("mm")); if(mm < 0) { // 1월에서 전월 버튼을 클릭시에 실행 yy--; mm = 11; } if(mm > 11) { // 12월에서 다음월 버튼을 클릭시에 실행 yy++; mm = 0; } calView.set(yy, mm, 1); // 현재 '년/월'의 1일을 달력의 날짜로 셋팅한다. int startWeek = calView.get(Calendar.DAY_OF_WEEK); // 해당 '년/월'의 1일에 해당하는 요일값을 숫자로 가져온다. int lastDay = calView.getActualMaximum(Calendar.DAY_OF_MONTH); // 해당월의 마지막일자(getActualMaxximum메소드사용)를 구한다. // 화면에 보여줄 년월기준 전년도/다음년도를 구하기 위한 부분 int prevYear = yy; // 전년도 int prevMonth = (mm) - 1; // 이전월 int nextYear = yy; // 다음년도 int nextMonth = (mm) + 1; // 다음월 if(prevMonth == -1) { // 1월에서 전월 버튼을 클릭시에 실행.. prevYear--; prevMonth = 11; } if(nextMonth == 12) { // 12월에서 다음월 버튼을 클릭시에 실행.. nextYear++; nextMonth = 0; } // 현재달력에서 앞쪽의 빈공간은 '이전달력'을 보여주고, 뒷쪽의 남은공간은 '다음달력'을 보여주기위한 처리부분(아래 6줄) Calendar calPre = Calendar.getInstance(); // 이전달력 calPre.set(prevYear, prevMonth, 1); // 이전 달력 셋팅 int preLastDay = calPre.getActualMaximum(Calendar.DAY_OF_MONTH); // 해당월의 마지막일자를 구한다. Calendar calNext = Calendar.getInstance();// 다음달력 calNext.set(nextYear, nextMonth, 1); // 다음 달력 셋팅 int nextStartWeek = calNext.get(Calendar.DAY_OF_WEEK); // 다음달의 1일에 해당하는 요일값을 가져온다. /* --------- 아래는 앞에서 처리된 값들을 모두 request객체에 담는다. ----------------- */ // 오늘기준 달력... request.setAttribute("toYear", toYear); request.setAttribute("toMonth", toMonth); request.setAttribute("toDay", toDay); // 화면에 보여줄 해당 달력... request.setAttribute("yy", yy); request.setAttribute("mm", mm); request.setAttribute("startWeek", startWeek); request.setAttribute("lastDay", lastDay); // 화면에 보여줄 해당 달력 기준의 전년도, 전월, 다음년도, 다음월 ... request.setAttribute("preYear", prevYear); request.setAttribute("preMonth", prevMonth); request.setAttribute("nextYear", nextYear); request.setAttribute("nextMonth", nextMonth); // 현재 달력의 '앞/뒤' 빈공간을 채울, 이전달의 뒷부분과 다음달의 앞부분을 보여주기위해 넘겨주는 변수 request.setAttribute("preLastDay", preLastDay); // 이전달의 마지막일자를 기억하고 있는 변수 request.setAttribute("nextStartWeek", nextStartWeek); // 다음달의 1일에 해당하는 요일을 기억하고있는 변수 } }
JSP
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %> <c:set var="ctp" value="${pageContext.request.contextPath}"/> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>calendar.jsp(달력연습)</title> <%@ include file="/WEB-INF/views/include/bs4.jsp" %> <style> #td1,#td8,#td15,#td22,#td29,#td36 { color: red; } #td7,#td14,#td21,#td28,#td35,#td42 { color: blue; } .today { font-size: 1.5em; background-color: pink; color: #fff; /* text-align: center; */ } </style> </head> <body> <div class="container"> <div class="col-sm-12" style="margin:30px 0px;font-size:1.4em;text-align:center"> <button class="btn btn-secondary btn-sm" onclick="location.href='${ctp}/study/calendar?yy=${yy-1}&mm=${mm}'" title="이전년도">◁◁</button> <button class="btn btn-secondary btn-sm" onclick="location.href='${ctp}/study/calendar?yy=${yy}&mm=${mm-1}'" title="이전월">◀</button> <font size="5">${yy}년 ${mm+1}</font> <button class="btn btn-secondary btn-sm" onclick="location.href='${ctp}/study/calendar?yy=${yy}&mm=${mm+1}'" title="다음월">▶</button> <button class="btn btn-secondary btn-sm" onclick="location.href='${ctp}/study/calendar?yy=${yy+1}&mm=${mm}'" title="다음년도">▷▷</button> <button class="btn btn-secondary btn-sm" onclick="location.href='${ctp}/study/calendar'" title="오늘날짜"><i class="fa fa-home"></i></button> </div> <br/> <div class="row"> <div class="col-sm-12" style="height:450px;"> <table class="table table-bordered" style="height:100%"> <tr style="text-align:center;font-size:1em;background-color:#eee;height:10%;"> <th style="color:red;width:13%;vertical-align:middle;">일</th> <th style="width:13%;vertical-align:middle;">월</th> <th style="width:13%;vertical-align:middle;">화</th> <th style="width:13%;vertical-align:middle;">수</th> <th style="width:13%;vertical-align:middle;">목</th> <th style="width:13%;vertical-align:middle;">금</th> <th style="color:blue;width:13%;vertical-align:middle;">토</th> </tr> <tr> <c:set var="cnt" value="1"/> <!-- 이전월의 마지막 날짜를 이용하여 앞쪽의 빈 공백을 채워준다.(요일의 숫자는 일요일은 '1', 토요일은 '7'이다. --> <!-- 즉, 2022년 1월을 예로들면 12월은 마지막날짜(preLastDay)가 31이고, 1월의 첫번째요일은 토요일(7)이기에 출력할 이전월(12월)의 시작일은 '31-(7-2)=26'일부터 출력해야한다.(-2는 상수값이다) --> <c:forEach var="preDay" begin="${preLastDay - (startWeek - 2) }" end="${preLastDay}"> <!-- 이전월(12월)의 26일부터 마지막일자(preLastDay : 31일)까지 출력한다. --> <td id="td${cnt}" style="color: #ddd;font-size:0.6em"> ${preYear}-${preMonth+1}-${preDay} </td> <c:set var="cnt" value="${cnt=cnt+1}"/> </c:forEach> <!-- 해당월에 대한 날짜를 반복 출력한다. --> <c:forEach begin="1" end="${lastDay}" varStatus="st"> <c:set var="todaySw" value="${yy == toYear && mm == toMonth && st.count == toDay ? 1 : 0}"/> <!-- 오늘날짜가 맞으면 toDay변수에 1을 셋팅 --> <td id="td${cnt}" ${todaySw == 1 ? 'class=today' : '' } style="font-size:0.9em;padding:8px;"> <!-- 오늘날짜가 맞으면 지정한 class로 디자인처리한다. --> ${st.count} </td> <c:if test="${cnt % 7 == 0}"> <!-- 한행이 꽉찾으면 다음줄로 넘어간다. --> </tr><tr> </c:if> <c:set var="cnt" value="${cnt=cnt+1}"/> <!-- 일수를 한개 증가 누적한다. --> </c:forEach> <!-- 다음월의 날짜를 출력한다.(출력시작위치는 다음달 1일에 해당하는 요일(nextStartWeek)부터이다. --> <c:forEach begin="${nextStartWeek}" end="7" varStatus="nextDay"> <td id="td${cnt}" style="color: #ddd;font-size:0.6em"> ${nextYear}-${nextMonth+1}-${nextDay.count} </td> <c:set var="cnt" value="${cnt=cnt+1}"/> </c:forEach> </tr> </table> </div> </div> </div> </body> </html>728x90'SpringFrameWork > Spring 프로젝트 할때 참고 하면 좋은것들' 카테고리의 다른 글
카카오(KaKao) 자동 로그인 해보기 (0) 2022.10.10 Iamport 결제 시스템 API 사용해보기 (0) 2022.10.09 Spring QR코드 생성하기 (0) 2022.10.07 UUID란? 사용법까지 (0) 2022.10.06 Spring 메일 보내는 법 (0) 2022.10.05