JS 상호작용되는 달력 만들기 (2) - 날짜 검색 달력

순서

1. 구조

ㄱ. HTML
ㄴ. Java script

2. 날짜를 구하기 위한 준비

3. 달력 구성하기

ㄱ. 달력을 만들어서 출력할 table 및 tableTitle을 참조
ㄴ. 현재 달력의 첫날과 마지막날을 구함
ㄷ. 작성할 테이블을 초기화
ㄹ. 달의 첫 날까지 빈 셀을 생성합니다.
ㅁ. 본격적으로 달력에 요일 채우기
ㅂ. 달력의 마지막날 뒤 빈칸 행으로 채우기

4. 선택한 일자를 출력하기

5. 이전달, 다음달로 이동하기

6. 추가작업

1. 구조

ㄱ. HTML

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>예약을 원하시는 날짜를 선택해 주세요</title>
</head>

<script type="text/javascript">

 //...
 
</script>
<body>
<table id="calendar" align="center">
		<tr>
			<td align="center"><label onclick="prevCalendar()"> ◀ </label></td>
			<td colspan="5" align="center" id="calendarTitle">yyyy년 m월</td>
			<td align="center"><label onclick="nextCalendar()"> ▶ </label></td>
		</tr>
		<tr>
			<td align="center"><font color ="#F79DC2">일</td>
			<td align="center">월</td>
			<td align="center">화</td>
			<td align="center">수</td>
			<td align="center">목</td>
			<td align="center">금</td>
			<td align="center"><font color ="skyblue">토</td>
		</tr>
		<script type="text/javascript">buildCalendar();</script>
	</table>
</body>
</html>

기억해야할 것

Table id : calendar
Table title id : calendarTitle
테이블 초기화시엔 두번째 row까지 남긴다 (타이틀, 요일표시)

ㄴ. Java script

var today = new Date();

function buildCalendar() {...};
function nextCalendar() {...};
function prevCalendar() {...};

상세코드는 2, 3, 4항목에 걸쳐서 후술하겠습니다.

2. 날짜를 구하기위한 준비

달력을 출력하려면 어떤 달력을 출력할지를 알려주는게 우선입니다. Date타입을 사용합니다.

var today = new Date();

var today : Date의 인스턴스로, 오늘기준의 날자데이터를 가지고 있습니다.

3. 달력 구성하기

달력을 생성하는 buildCalendar() 함수입니다.

전혀 어렵지 않으니 한단계씩 보도록 하겠습니다.

function buildCalendar(){
	var row = null
	var cnt = 0;
    
    //...

ㄱ. 달력을 만들어서 출력할 table 및 tableTitle을 참조

var calendarTable = document.getElementById("calendar");
var calendarTableTitle = document.getElementById("calendarTitle");
calendarTableTitle.innerHTML = today.getFullYear()+"년"+(today.getMonth()+1)+"월";

today로 현재 연도와 월은 알 수 있으니, 타이틀은 참조와 동시에 입력해줍니다.

ㄴ. 현재 달력의 첫날과 마지막날을 구함

var firstDate = new Date(today.getFullYear(), today.getMonth(), 1);
var lastDate = new Date(today.getFullYear(), today.getMonth()+1, 0);

ㄷ. 작성할 테이블을 초기화

while(calendarTable.rows.length > 2){
	calendarTable.deleteRow(calendarTable.rows.length -1);
}

타이틀과 요일표시는 남기도록 3번째행까지만 삭제합니다.

ㄹ. 달의 첫 날까지 빈 셀을 생성합니다.

row = calendarTable.insertRow();
for(i = 0; i < firstDate.getDay(); i++){
	cell = row.insertCell();
	cnt += 1;
}

ㅁ. 본격적으로 달력에 요일 채우기

row = calendarTable.insertRow();
	
for(i = 1; i <= lastDate.getDate(); i++){
	cell = row.insertCell();
	cnt += 1;
    
   	cell.setAttribute('id', i);
	cell.innerHTML = i;
	cell.align = "center";
    
	if (cnt % 7 == 0){
		row = calendar.insertRow();
	}
}

for구문의 i가 곧 요일이므로, 이후 일자를 구해오기 위해 셀의 id속성을 i로 입력해둡니다.
마지막 if문으로 한 행에 7번을 입력했으면 다음행으로 개행합니다.

ㅂ. 달력의 마지막날 뒤 빈칸 행으로 채우기

if(cnt % 7 != 0){
	for(i = 0; i < 7 - (cnt % 7); i++){
		cell = row.insertCell();
	}
}

4. 선택한 일자를 출력하기

cell.onclick = function(){
	clickedYear = today.getFullYear();
	clickedMonth = ( 1 + today.getMonth() );
	clickedDate = this.getAttribute('id');
	
	clickedDate = clickedDate >= 10 ? clickedDate : '0' + clickedDate;    
	clickedMonth = clickedMonth >= 10 ? clickedMonth : '0' + clickedMonth;
	clickedYMD = clickedYear + "-" + clickedMonth + "-" + clickedDate;
				
	opener.document.getElementById("date").value = clickedYMD;
	self.close();
}

3-ㅁ에서 cell.align = "center"; 이후에 입력됩니다.
cell.onlcik = funtion() {...} 으로 만든 cell에 클릭이벤트를 입력합니다.

클릭이벤트의 내용

today로부터 연, 월을 불러옵니다.
클릭된 cell의 id로부터 일자를 불러옵니다.
연월일을 yyyy-mm-dd로 출력할 수 있게 형식 만듭니다.
부모창에 계산된 일자를 출력하고 현재창은 닫습니다.

5. 이전달, 다음달로 이동

function prevCalendar(){
	today = new Date(today.getFullYear(), today.getMonth()-1, today.getDate());
	buildCalendar();
}

function nextCalendar(){
	today = new Date(today.getFullYear(), today.getMonth()+1, today.getDate());
	buildCalendar();
}

today의 월을 더하거나 뺀 후 buildCalendar를 호출합니다.

6. 추가작업

저대로면 밋밋합니다.

토요일은 파랗게, 일요일은 빨갛게 출력하도록 해보겠습니다.

if (cnt % 7 == 1) {
	cell.innerHTML = "<font color=#F79DC2>" + i + "</font>";
}  

if (cnt % 7 == 0){
	cell.innerHTML = "<font color=skyblue>" + i + "</font>";
	row = calendar.insertRow();
}

3-ㅁ에서 개행하는 부분에 추가하면 됩니다.

일월화수목금토 순서이므로, 7로 나눠떨어지면 토요일, 나머지가 1이라면 일요일입니다.

전체 코드

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>예약을 원하시는 날짜를 선택해 주세요</title>
</head>
<script type="text/javascript">
var today = new Date();
function buildCalendar(){
  var row = null
  var cnt = 0;
  var calendarTable = document.getElementById("calendar");
  var calendarTableTitle = document.getElementById("calendarTitle");
  calendarTableTitle.innerHTML = today.getFullYear()+"년"+(today.getMonth()+1)+"월";
  
  var firstDate = new Date(today.getFullYear(), today.getMonth(), 1);
  var lastDate = new Date(today.getFullYear(), today.getMonth()+1, 0);
  while(calendarTable.rows.length > 2){
  	calendarTable.deleteRow(calendarTable.rows.length -1);
  }

  row = calendarTable.insertRow();
  for(i = 0; i < firstDate.getDay(); i++){
  	cell = row.insertCell();
  	cnt += 1;
  }

  row = calendarTable.insertRow();

  for(i = 1; i <= lastDate.getDate(); i++){
  	cell = row.insertCell();
  	cnt += 1;

    cell.setAttribute('id', i);
  	cell.innerHTML = i;
  	cell.align = "center";

    cell.onclick = function(){
    	clickedYear = today.getFullYear();
    	clickedMonth = ( 1 + today.getMonth() );
    	clickedDate = this.getAttribute('id');

    	clickedDate = clickedDate >= 10 ? clickedDate : '0' + clickedDate;
    	clickedMonth = clickedMonth >= 10 ? clickedMonth : '0' + clickedMonth;
    	clickedYMD = clickedYear + "-" + clickedMonth + "-" + clickedDate;

    	opener.document.getElementById("date").value = clickedYMD;
    	self.close();
    }

    if (cnt % 7 == 1) {
    	cell.innerHTML = "<font color=#F79DC2>" + i + "</font>";
    }

    if (cnt % 7 == 0){
    	cell.innerHTML = "<font color=skyblue>" + i + "</font>";
    	row = calendar.insertRow();
    }
  }

  if(cnt % 7 != 0){
  	for(i = 0; i < 7 - (cnt % 7); i++){
  		cell = row.insertCell();
  	}
  }
}

function prevCalendar(){
	today = new Date(today.getFullYear(), today.getMonth()-1, today.getDate());
	buildCalendar();
}

function nextCalendar(){
	today = new Date(today.getFullYear(), today.getMonth()+1, today.getDate());
	buildCalendar();
}
</script>
<body>
<table id="calendar" align="center">
		<tr>
			<td align="center"><label onclick="prevCalendar()"> ◀ </label></td>
			<td colspan="5" align="center" id="calendarTitle">yyyy년 m월</td>
			<td align="center"><label onclick="nextCalendar()"> ▶ </label></td>
		</tr>
		<tr>
			<td align="center"><font color ="#F79DC2">일</td>
			<td align="center">월</td>
			<td align="center">화</td>
			<td align="center">수</td>
			<td align="center">목</td>
			<td align="center">금</td>
			<td align="center"><font color ="skyblue">토</td>
		</tr>
		<script type="text/javascript">buildCalendar();</script>
	</table>
</body>
</html>

저작자표시 (새창열림)

'IDE & Framework > 분류중' 카테고리의 다른 글

JS 상호작용되는 달력 만들기 (4) - 예약달력 (중) (0)	2021.06.01
JS 상호작용되는 달력 만들기 (3) - 예약달력 (상) (5)	2021.06.01
JS 상호작용되는 달력 만들기 (1) - 시작하며 (1)	2021.05.31
JSP 이미지CRUD가 가능한 페이징된 게시판 구현 (0)	2021.05.31
JSP 페이징된 게시판 만들기 (0)	2021.05.30