MSM8994의 화룡점정 블로그

[JSP] 단일 컬러 달력 출력 (오늘 날짜, 휴일도 표시) 본문

코딩

[JSP] 단일 컬러 달력 출력 (오늘 날짜, 휴일도 표시)

msm8994 2018. 8. 2. 16:30

지난 글에서 단색 달력을 출력하는 예제를 보셨습니다.  오늘은 이 예제를 바꿔서 색칠이 가능하도록 해보겠습니다.


시작해볼까요?

	div#calendar-sun {
		width: 30px; /* 가로 폭: 30px */
		float: left; /* 왼쪽 객체에 붙도록 함 */
		text-align: right; /* 안에 글 오른쪽 정렬 */
		color: red; /* 문자열 색상 빨강 */
	}
	div#calendar-holiday {
		width: 30px; /* 가로 폭: 30px */
		float: left; /* 왼쪽 객체에 붙도록 함 */
		text-align: right; /* 안에 글 오른쪽 정렬 */
		color: red; /* 문자열 색상 빨강 */
	}
	div#calendar-sat {
		width: 30px; /* 가로 폭: 30px */
		float: left; /* 왼쪽 객체에 붙도록 함 */
		text-align: right; /* 안에 글 오른쪽 정렬 */
		color: blue; /* 문자열 색상 빨강 */
	}
	div#calendar-today {
		width: 30px; /* 가로 폭: 30px */
		float: left; /* 왼쪽 객체에 붙도록 함 */
		text-align: right; /* 안에 글 오른쪽 정렬 */
		background-color: green; /* 배경 색상 초록 */
		color: white; /* 문자열 색상 흰색*/
	}

각각의 칸 별로 스타일을 주기 위해 특정 id의 div 태그별로 스타일을 여럿 만들었습니다.


Calendar calendar = Calendar.getInstance(); // 현재 년월일시분초 로 Calendar 객체 초기화
int todayYear = calendar.get(Calendar.YEAR); //현재 년도
int todayMonth = calendar.get(Calendar.MONTH)+1; // 현재 월
int todayDayOfMonth = calendar.get(Calendar.DAY_OF_MONTH); //현재 일


현재 시각으로 초기화되는 Calender 객체를 반복문 밖으로 꺼내고 오늘 날짜를 추출해 기억합니다.


// 휴일 정보를 담을 해시맵 객체 생성
HashMap<String,ArrayList<Integer>> holidays = new HashMap<>();

// 5월의 휴일정보를 담는 리스트 생성
ArrayList<Integer> hol201805 = new ArrayList<Integer>();
hol201805.add(5); // 2018년 5월 5일 어린이날
hol201805.add(7); // 2018년 5월 7일 어린이날이 토요일이므로 다음 평일이 대체공휴일
hol201805.add(22); // 2018년 5월 22일 부처님 오신날

holidays.put("2018-05",hol201805); // 2018년 5월의 휴일정보를 "2018-05" 키로 담기


휴일 정보는 Calendar 객체 등을 통해 제공되지 않으므로 직접 넣겠습니다. HashMap을 통해 특정 년과 월을 조합한 문자열을 키로 사용하는 배열리스트를 넣겠습니다. 물론 이 배열 리스트에는 휴일인 날들이 들어가 있습니다.


// 문자 스타일을 위한 id 지정 기본값: 평일
		String divId = "calendar-content"; 
		switch(dayOfWeek){
		case 1: //일요일
			divId = "calendar-sun";
			break;
		case 7: //토요일
			divId = "calendar-sat";
			break;
		}
		
		if(year == todayYear && month == todayMonth && day == todayDayOfMonth){
			// 현재와 년도가 같고 월이 같고 일이 같은 이 날은 오늘입니다.
			divId = "calendar-today";
		}
		
		%><div id="<%=divId%>"><%=day%></div><%
요일별로 색을 넣기 위해 코드를 일부 고쳤습니다. divId 문자열을 만들어 해당 id로 요일별/오늘여부 스타일이 적용되게 합니다.

// 이번 달의 휴일 정보를 가져옵니다. 2018-05 형식으로 가져오기 위해 10보다 작은 월은 앞에 0을 붙임
// 만약 찾을 수 없는 경우 null이 들어갑니다.
ArrayList<Integer> holidaysOfThisMonth = holidays.get(year+"-"+(month < 10? "0"+month : month));

휴일 정보를 미리 월이 시작할 때 꺼내놓습니다.

//휴일 판독
		if(holidaysOfThisMonth != null){
			//holidaysOfThisMonth 정보가 있는 경우;
			for(int holiday : holidaysOfThisMonth){
				if(holiday == day){
					//해당 일이 휴일인 경우
					divId = "calendar-holiday";
					// 반복을 나갑니다.
					break;
				}
			}
		}


일을 비교할 때 그 날이 휴일 목록에 있는 날인지를 확인해 휴일 스타일을 적용할지를 판단합니다.


if(year == todayYear && month == todayMonth && day == todayDayOfMonth){
			// 현재와 년도가 같고 월이 같고 일이 같은 이 날은 오늘입니다.
			divId = "calendar-today";
		}


오늘 날짜는 미리 넣어둔 값을 이용해 비교합니다. 나머지는 기존 소스와 다를게 없습니다.



전체 소스코드

<%@page import="java.util.ArrayList"%>
<%@page import="java.util.List"%>
<%@page import="java.util.HashMap"%>
<%@ 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; /* 안에 글 오른쪽 정렬 */
	}
	div#calendar-sun {
		width: 30px; /* 가로 폭: 30px */
		float: left; /* 왼쪽 객체에 붙도록 함 */
		text-align: right; /* 안에 글 오른쪽 정렬 */
		color: red; /* 문자열 색상 빨강 */
	}
	div#calendar-holiday {
		width: 30px; /* 가로 폭: 30px */
		float: left; /* 왼쪽 객체에 붙도록 함 */
		text-align: right; /* 안에 글 오른쪽 정렬 */
		color: red; /* 문자열 색상 빨강 */
	}
	div#calendar-sat {
		width: 30px; /* 가로 폭: 30px */
		float: left; /* 왼쪽 객체에 붙도록 함 */
		text-align: right; /* 안에 글 오른쪽 정렬 */
		color: blue; /* 문자열 색상 빨강 */
	}
	div#calendar-today {
		width: 30px; /* 가로 폭: 30px */
		float: left; /* 왼쪽 객체에 붙도록 함 */
		text-align: right; /* 안에 글 오른쪽 정렬 */
		background-color: green; /* 배경 색상 초록 */
		color: white; /* 문자열 색상 흰색*/
	}
	br#calendar-enter {
		clear: both; /* 붙는 설정 풀고 줄바꿈*/
	}
</style>
</head>
<body>
<%
Calendar calendar = Calendar.getInstance(); // 현재 년월일시분초 로 Calendar 객체 초기화
int todayYear = calendar.get(Calendar.YEAR); //현재 년도
int todayMonth = calendar.get(Calendar.MONTH)+1; // 현재 월
int todayDayOfMonth = calendar.get(Calendar.DAY_OF_MONTH); //현재 일

// 휴일 정보를 담을 해시맵 객체 생성
HashMap<String,ArrayList<Integer>> holidays = new HashMap<>();

// 5월의 휴일정보를 담는 리스트 생성
ArrayList<Integer> hol201805 = new ArrayList<Integer>();
hol201805.add(5); // 2018년 5월 5일 어린이날
hol201805.add(7); // 2018년 5월 7일 어린이날이 토요일이므로 다음 평일이 대체공휴일
hol201805.add(22); // 2018년 5월 22일 부처님 오신날

holidays.put("2018-05",hol201805); // 2018년 5월의 휴일정보를 "2018-05" 키로 담기

int year = 2018; //년도
for(int month = 1; month <= 12; month++){
	
	//int month = 1;
	calendar.clear(); // calendar 객체 초기화. 어차피 값을 따로 넣을 것이기 때문에 상관없다.
	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);

	// 이번 달의 휴일 정보를 가져옵니다. 2018-05 형식으로 가져오기 위해 10보다 작은 월은 앞에 0을 붙임
	// 만약 찾을 수 없는 경우 null이 들어갑니다.
	ArrayList<Integer> holidaysOfThisMonth = holidays.get(year+"-"+(month < 10? "0"+month : month));
	
	%>
	<p><%=year %>년 <%=month %>월</p>
	<div id="calendar-sun">일</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-sat">토</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++) {
		
		//요일별 색상 적용
		
		// 문자 스타일을 위한 id 지정 기본값: 평일
		String divId = "calendar-content"; 
		switch(dayOfWeek){
		case 1: //일요일
			divId = "calendar-sun";
			break;
		case 7: //토요일
			divId = "calendar-sat";
			break;
		}
		
		//휴일 판독
		if(holidaysOfThisMonth != null){
			//holidaysOfThisMonth 정보가 있는 경우;
			for(int holiday : holidaysOfThisMonth){
				if(holiday == day){
					//해당 일이 휴일인 경우
					divId = "calendar-holiday";
					// 반복을 나갑니다.
					break;
				}
			}
		}
		
		if(year == todayYear && month == todayMonth && day == todayDayOfMonth){
			// 현재와 년도가 같고 월이 같고 일이 같은 이 날은 오늘입니다.
			divId = "calendar-today";
		}
		
		%><div id="<%=divId%>"><%=day%></div><%
		if (dayOfWeek >= 7) {
			%><br id="calendar-enter" /><%
			dayOfWeek = 1;
		} else {
			dayOfWeek++;
		}
	}
	%><br id="calendar-enter" /><br /><%
}
%>
</body>
</html>


결과

결과. 지면상 가로로 붙였으나 실제로는 세로로 길게 나타나게 됩니다. 2018년 5월 휴일 정보만 넣었기에 5월만 휴일이 표시됩니다.


'코딩' 카테고리의 다른 글

[Ubuntu] WebRTC 안드로이드용 라이브러리 컴파일  (2) 2019.03.12
[JSP] 단색 달력 JSP 출력  (0) 2018.08.02
[JAVA] 윤년 구하는 코드 짧게 작성하기  (0) 2018.08.01
[JAVA] 정보처리 산업/기사 알고리즘 - 화폐매수 계산  (0) 2018.07.31
[JSP] 1부터 N까지의 자연수, 홀수, 짝수 합 구하기  (0) 2018.07.30
'코딩' Related Articles more
Comments