본문 바로가기

STUDY/JSP

20240308 달력(3월)

728x90

해당하는 월의 달력을 출력하는 페이지이다.

Calendar 클래스를 사용해 객체를 만든다.

 

오늘의 날짜에서 일을 1로 변경한다.

 

달력을 table태그를 통해 만들 것이고,

td에 해당 달력의 칸의 공백을 나타내기 위해 시작 일자(1일)앞의 공백 개수를 구한다.

 

Calendar.DAY_OF_WEEK를 사용해 1일의 요일값을 구한다.

1일의 요일값(일요일이면 0, 월요일이면 1, ... 토요일이면 6)을 구해 1을 빼면 앞의 공백 개수를 구할 수 있다.

공백 개수는 preBlank라는 변수에 담는다

 

getMximum()메소드를 통해 해당 월의 마지막 달을 구해 lastDate에 담는다.(마지막 일은 28,29,30,31로 해당 월에 따라 달라지기때문)

 

또한 마지막 일자 뒤의 공백도 필요하기 때문에 afterBlank변수에 담아준다.

마지막 공백을 구하기 위해서는

(1일의 앞 공백 + 마지막 일(일자가 적혀있는 총 칸의 개수를 위해) + 마지막 일 뒤의 공백)를 7로 나누면

나머지가 0이 나와야 하기 때문에 계산을 하면

afterBlank는 7 - (1일의 앞 공백 + 마지막 일(일자가 적혀있는 총 칸의 개수를 위해) + 마지막 일 뒤의 공백) % 7로 계산이 가능하다.

 

위의 값들로 전체 td의 개수를 구하고

 

 while문을 통해 나머지가 1일때마다 tr을 닫아 행을 추가한다.

if문으로 일자를 1에서 lastDate까지 조건을 주어 td에 담는다.

 

추가적으로 if문을 사용해 토요일(나머지가 0이되는 날), 일요일(나머지가 1이 되는날)에는 각각 파란색, 빨간색로 css를 변경했다.

marchVer2.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ page import="java.util.Calendar"%>    
<%
	// 1) 오늘 날짜를 구하고
	Calendar firstDate = Calendar.getInstance();
	// 2) 1)의 오늘 날짜를 일만 1로 변경한다.
	firstDate.set(Calendar.DATE, 1);	// 2024/03/08 -> 2024/03/01
	// 3) 시작 빈 TD의 개수를 구하기 위해 firstDate의 요일값을 구한다
	// 일요일 -> 1 ~ 토요일 -> 7
	int yo = firstDate.get(Calendar.DAY_OF_WEEK);
	// 시작 빈 TD는 일요일 -> 0, 월요일 -> 1, ... 토요일 -> 6
	// 4) 패턴을 보면 요일 값에서 -1하면 시작 공백 TD의 개수와 일치한다.
	int preBlank = yo - 1;
	// 5) firstDate가 가질 수 있는 제일 큰 날짜값(마지막 날짜 - 28/39/30/31)
	int lastDate = firstDate.getMaximum(Calendar.DATE);
	// 6) 테이블 출력에 필요한 전체 TD개수를 구하려고 하니 lastDate 뒤 공백 TD의 개수가 필요
	// 일단 0으로 설정.
	int afterBlank = 0;
	
	// 7) 전체 TD의 개수는 7로 나누어 떨어져야 한다.
	if((preBlank + lastDate + afterBlank) % 7 != 0){
		// 1이 남는다 -> 6개의 TD가 필요
		// 2가 남는다 -> 5개의 TD가 필요
		afterBlank = 7 - (preBlank + lastDate + afterBlank) % 7; 
	}
	
	// 8) 전체 TD의 개수는 
	int total = preBlank + lastDate + afterBlank;
	// TD를 원하는 개수만큼 반복시켜 출력
	int year = firstDate.get(Calendar.YEAR);	// 2024
	int month = firstDate.get(Calendar.MONTH);	// 2
	
%>    
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<!-- 메뉴 -->
	<div>
		<a href="../index.jsp">index</a>
	</div>
	
	<h1><%=year%>년 <%=month+1%>월</h1>
	<table border="1" width="100%">
		<tr>
			<th style="color: red">일</th>
			<th>월</th>
			<th>화</th>
			<th>수</th>
			<th>목</th>
			<th>금</th>
			<th style="color: blue">토</th>
		</tr>
		<tr>
			<%
				int d = 1;
				while(d <= total) {
					if((d-1)% 7 == 0) {
			%>
						</tr><tr>
			<%			
					}
			%>
					<td>
						<%
							int t = d - preBlank;
							if(t >= 1 && t <=lastDate) {
								if(d % 7 == 1) {
						%>
									<span style="color: red;"><%=t%></span>
						<%
								} else if(d % 7 == 0){
						%>
										<span style="color: blue;"><%=t%></span>
						<%		
								} else {
						%>			
										<span><%=t%></span>
						<%
								}
							}
						%>
					</td>
			<%
					d = d + 1;
				}
			%>
		</tr>
	</table>
	
	
</body>
</html>

 

728x90

'STUDY > JSP' 카테고리의 다른 글

20240312 원피스 출력  (0) 2024.03.12
20240312 로또 추첨기  (0) 2024.03.12
20240308 구구단  (0) 2024.03.08
20240307 주민번호 분석기  (0) 2024.03.07
20240307 계산기 페이지  (0) 2024.03.07