[JSP] Calendar 달력 만들기

[JSP] Calendar 달력 만들기

---

❌ CSS 파일 업로드 ❌

 

✔️ JSP 코드

1) Calendar 객체 만들어서 현재 연도/월/일 구하기

	Calendar cal = Calendar.getInstance();
	int ty = cal.get(Calendar.YEAR);
	int tm = cal.get(Calendar.MONTH) +1 ;
	int td = cal.get(Calendar.DATE);

 

2) 달력 최상단에 찍힐 년, 월 변수 따로 설정하기

일단 처음에는 클라이언트가 요청한 값이 없는 null 상태이기 때문에 현재 년, 월 시간 값을 year, month 에 넣는다.

	int year = cal.get(Calendar.YEAR);
	int month = cal.get(Calendar.MONTH) +1 ;

 

3) 클라이언트가 입력한 년, 월 값을 파라미터로 받기

	String sy = request.getParameter("year");
	String sm = request.getParameter("month");

이때, 처음에는 파라미터가 없는 상태니까, 현재 년, 월이 표시되는 달력을 보여준다.

클라이언트가 요청한 값이 있을 경우에는 year, month 안에 파라미터 값(sy 와 sm)을 넣는다.

	//처음에 파라미터 없을 때는 null
	if( sy != null){
		year = Integer.parseInt(sy);
	}
	
	if( sy != null){
		month = Integer.parseInt(sm);
	}

 

4) 클라이언트가 요청한 파라미터 값을 넣어서 다시 cal (캘린더) 객체를 set 세팅하고 년, 월 값을 추출해서 year, month 값에 저장한다. 

	cal.set(year, month-1, 1);
	year = cal.get(Calendar.YEAR);
	month = cal.get(Calendar.MONTH)+1;
	
	int week = cal.get(Calendar.DAY_OF_WEEK); // 1일 ~ 7토

 

 

✔️ HTML 코드

1) 클라이언트가 선택할 년, 월 태그 만들기

<a href="calendar.jsp?year=<%=year%>&month=<%=month-1%>">&lt;</a>
<label><%=year %>년 <%=month %>월</label>
<a href="calendar.jsp?year=<%=year%>&month=<%=month+1%>">&gt;</a>

 

2) 최상단에 요일 표시

    <thead>
        <tr>
            <td>일</td>
            <td>월</td>
            <td>화</td>
            <td>수</td>
            <td>목</td>
            <td>금</td>
            <td>토</td>
        </tr>
    </thead>

 

3) 1일 앞부분

for 문으로 달의 가장 첫번째 날부터 마지막 날까지 찍을텐데, 이때, 이전 달의 날짜도 찍히도록 작성해야한다.

- 캘린더 객체 하나를 복제한다. (이전달 preCal)

- 달력의 1일이 출력되기 전, 앞에 공백에는 이전 달의 날짜가 찍혀야하는데, 남는 공백만큼 출력할 날짜 계산은 week (요일)을 가지고 계산한다.

if, 10월 1일 날짜에 남는 공백에 9월 이전 날짜를 찍고 싶으면, 10월 1일이 출력되는 요일값을 구하고 그 요일의 -1 값 만큼 9월의 마지막 날짜들이 출력되면 된다. 9월 이전 날짜를 찍고 싶으니, 음수값으로 날짜를 빼면 된다. 

 

10월 1일 : 토요일 (자릿값 week : 7)

week -1 : 6개 ✨ 이게 바로 공백 갯수이다.

공백 갯수만큼 preCal 에서 날짜를 뺀다. (10월 1일부터 6일이 뒤로 빠지면 9월 25일이 나온다.)

9월 25일이 나온 값을 Calendar.DATE 로 추출한다. (preDate)

 

preDate 값은 9월 25일. for 문으로 9월 25일부터 ++ 연산하여 1일 앞부분을 값을 출력한다.

    Calendar preCal = (Calendar)cal.clone(); // 날짜 복사
    preCal.add(Calendar.DATE, -(week-1)); // 1일의 요일 값에서 -1 하면 앞에 공백 숫자 카운트됨
    int preDate = preCal.get(Calendar.DATE); // 공백 숫자 만큼 이전 달에서 'day' 일자를 빼고 추출

    out.print("<tr>");
    for(int i=1; i<week; i++){
        out.print("<td class='gray'>" +(preDate++)+"</td>");
    }

 

 

4) 1일 ~ 말일 출력

: 시스템의 오늘 날짜인 경우, today 라는 클래스 속성을 설정한다.

출력되는 날짜의 요일 값이 7(토요일) 인 경우, 테이블을 줄바꿈한다. <tr></tr>

    int lastDay = cal.getActualMaximum(Calendar.DATE);
    String cls;
    for(int i=1; i<=lastDay; i++){
        cls = year==ty&&month==tm&&i==td? "today" : "";

        out.print("<td class='"+cls+"'>" + i + "</td>");

        if(lastDay !=i && (++week)%7 ==1){
            out.print("</tr><tr>");
        }
    }

 

5) 마지막 주 출력

마지막 주에 생기는 공백은 어차피 다음달의 1일부터 시작이기 때문에, week 값에 공백 자리만큼 1부터 ++ 연산으로 카운트해서 출력한다.

    //마지막 주
    int n=1;
    for(int i=(week-1)%7; i<6; i++){
        out.print("<td class='gray'>" + (n++) + "</td>");
    }
    out.print("</tr>");

 

---

 

Selector 박스로 달력 캘린더 만들기

✔️ JSP 코드

위에 코드와 동일

 

✔️ HTML 코드

:  시스템 날짜 년, 월이 고정으로 선택되도록 작성하되, -5년과 +5년을 select 박스 선택지로 준다. (for문)

select 박스에 onchange() 메소드를 주는데, checkDate(this.form); 메소드는 select 값이 변경될 때 마다 submit 하도록 작성한다.

<script type="text/javascript">
function checkDate(obj){
	obj.submit();
	
}

</script>

<select name="year" onchange="checkDate(this.form);">
        <% for(int i=year-5; i<=year+5; i++) {%>
            <option value="<%=i%>" <%=i==year ? "selected='selected'" : "" %>> <%=i %>년</option>
        <% } %>
</select>

<select name="month" onchange="checkDate(this.form);">
    <%for(int i=1; i<=12; i++ ) {%>
        <option value="<%=i%>" <%=i==month ? "selected='selected'" : ""%>> <%=i %>월 </option>
    <%} %>
</select>

 

1일 앞부분, 1일부터 말일까지, 마지막주 출력 모두 이전 캘린더 만들기 코드와 동일하게 작성