MSM8994의 화룡점정 블로그

[JSP] 단색 달력 JSP 출력 본문

코딩

[JSP] 단색 달력 JSP 출력

msm8994 2018. 8. 2. 07:00

결과


배열에 월당 일수를 넣어두고 달력 출력
배열에 월별 일 수를 넣어두고 달력을 출력합니다. 0월은 없으므로 [0]에는 허수를 집어넣었습니다.


<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>배열에 일 수를 저장하고 달력출력</title>
<style>
	div#calendar-content {
		/* border : 1px solid red; */ /* 외곽선: 1px 실선 red색 */
		width: 30px; /* 가로 폭: 30px */
		float: left; /* 왼쪽 객체에 붙도록 함 */
		text-align: right; /* 안에 글 오른쪽 정렬 */
	}
	br#calendar-enter {
		clear: both; /* 붙는 설정 풀고 줄바꿈*/
	}
</style>
</head>
<body>
<%
int year = 2018; //년도
int[] daysOfMonth = {0, 31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31}; // 12월까지 일 갯수. 0월은 없다
int dayOfWeek = 2; // 해당 주 중에 몇 번째 칸인지 저장,  2018년 1월은 월요일부터 시작하므로 2 입력;
for(int month = 1; month <= 12; month++){
	%>
	<p><%=year %>년 <%=month %>월</p>
	<div id="calendar-content">일</div>
	<div id="calendar-content">월</div>
	<div id="calendar-content">화</div>
	<div id="calendar-content">수</div>
	<div id="calendar-content">목</div>
	<div id="calendar-content">금</div>
	<div id="calendar-content">토</div>
	<br id="calendar-enter" />
	<%
	
	for (int blankDay = 1; blankDay < dayOfWeek; blankDay++) {
		// 여기는 띄워야할 칸을 작성하는 구간입니다.
		// firstDayOfWeek 이 첫날의 요일을 제시(일:1 월:2 ... 토:7)하므로
		//그 전까지만 채워야 한다
		%><div id="calendar-content"> </div><%
	}

	int daysPerMonth = daysOfMonth[month]; // 해당 월의 일 수
	for (int day = 1; day <= daysPerMonth; day++) {
		%><div id="calendar-content"><%=day%></div><%
		if (dayOfWeek >= 7) {
			%><br id="calendar-enter" /><%
			dayOfWeek = 1;
		} else {
			dayOfWeek++;
		}
	}
	%><br id="calendar-enter" /><br /><%
}
%>
</body>
</html>



Calendar 클래스를 사용한 달력 출력 (함정: 위에 적힌 소스를 그대로 쓰셨다면 2018년 밖에 안되겠군요. 흠흠)

Calendar 클래스는 날짜 계산을 편하게 도와주는 클래스입니다. 여기서는 해당 객체에 2018년 month월 1일의 요일을 구해서 거기부터 시작하게 됩니다. 배열을 이용한 달력과 다르게 특정월만 출력하게 만드는 것도 수월합니다. 또한 Calendar 객체를 통해 특정 월 1일의 요일을 알 수 있으므로 dayOfWeek 을 반복문 안으로 넣을 수 있었습니다. int year 를 for 등의 반복문 안에 넣으시면 여러해 달력도 가능하시겠죠?


<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ page import="java.util.Calendar" %> <!-- Calendar 클래스 임포트 -->
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Calendar 객체를 활용한 달력 출력</title>
<style>
	div#calendar-content {
		/* border : 1px solid red; */ /* 외곽선: 1px 실선 red색 */
		width: 30px; /* 가로 폭: 30px */
		float: left; /* 왼쪽 객체에 붙도록 함 */
		text-align: right; /* 안에 글 오른쪽 정렬 */
	}
	br#calendar-enter {
		clear: both; /* 붙는 설정 풀고 줄바꿈*/
	}
</style>
</head>
<body>
<%

Calendar calendar = Calendar.getInstance(); // 현재 년월일시분초 로 Calendar 객체 초기화

int year = 2018; //년도
for(int month = 1; month <= 12; month++){
	
	//int month = 1;
    calendar.clear(); // 캘린더 객체를 빈 값으로 초기화
	calendar.set(Calendar.YEAR, year);	// Calendar.YEAR 는 해당 년도(2018)를 넣는다
	calendar.set(Calendar.MONTH, month-1); // Calendar.MONTH에 들어갈 January는 0이다. (0부터 시작)
	calendar.set(Calendar.DAY_OF_MONTH, 1); // Calendar.DAY_OF_MONTH에는 첫날을 넣는다
	int firstDayOfWeek = calendar.get(Calendar.DAY_OF_WEEK);
	
	%>
	<p><%=year %>년 <%=month %>월</p>
	<div id="calendar-content">일</div>
	<div id="calendar-content">월</div>
	<div id="calendar-content">화</div>
	<div id="calendar-content">수</div>
	<div id="calendar-content">목</div>
	<div id="calendar-content">금</div>
	<div id="calendar-content">토</div>
	<br id="calendar-enter" />
	<%
	
	int dayOfWeek = 1;	// 해당 주 중에 몇 번째 칸인지 저장
	for (int blankDay = 1; blankDay < firstDayOfWeek; blankDay++) {
		// 여기는 띄워야할 칸을 작성하는 구간입니다.
		// firstDayOfWeek 이 첫날의 요일을 제시(일:1 월:2 ... 토:7)하므로
		//그 전까지만 채워야 한다
		%><div id="calendar-content"> </div><%
		dayOfWeek++;
	}

	int daysPerMonth = calendar.getActualMaximum(Calendar.DAY_OF_MONTH); // 해당 월의 일 수
	for (int day = 1; day <= daysPerMonth; day++) {
		%><div id="calendar-content"><%=day%></div><%
		if (dayOfWeek >= 7) {
			%><br id="calendar-enter" /><%
			dayOfWeek = 1;
		} else {
			dayOfWeek++;
		}
	}
	%><br id="calendar-enter" /><br /><%
}
%>
</body>
</html>


색깔있는 달력, 오늘을 강조하고픈 달력을 원하신다면 이 글도 참고해주세요.



Comments