WORK
[JAVASCRIPT] 달력(calendar) 만들기, 날짜 요일 구하기
8밀리
2020. 7. 27. 19:24
달력형태로 저장된 일정을 보여줘야하는 기능이 추가되어, 처음에는 플러그인을 쓰려고 찾아봤는데 단순히 조회해서 보여주기만 하는 형태라 javascript로 달력 만들기로 했다.
관련 내용은 검색하면 바로 쓸만한 괜찮은 소스들이 많다.
참고 : [JavaScript]달력 만들기, Date 객체 (https://jerryjerryjerry.tistory.com/26)
위 사이트 소스를 참고하여 약간 수정한 내용이다.
우선 소스를 바로 보기 전에 기본적으로 알고 있어야할 Date() 관련 함수들을 정리하자.
오늘 날짜 및 요일 구하기
<!DOCTYPE html>
<html lang="ko">
<script language="javascript">
var today = new Date(); //오늘 날짜
console.log("new Date() : " + today);
console.log("today.getFullYear() : " + today.getFullYear());
console.log("today.getMonth() : " + today.getMonth());
console.log("today.getDate() : " + today.getDate());
console.log("today.getDay() : " + today.getDay());
</script>
</html>
new Date() : Mon Jul 27 2020 14:37:00 GMT+0900 (대한민국 표준시)
today.getFullYear() : 2020
today.getMonth() : 6
today.getDate() : 27
today.getDay() : 1
확인해보면 알겠지만 달과 요일의 경우 시작 기준인 1월, 일요일의 값이 0시작한다.
그러니 현재의 달을 표현해주려면 +1을 해주면 되고, getDay 결과값을 통해 오늘이 월요일이라는 정보를 가져올 수 있다.
요일 구하는 함수
<!DOCTYPE html>
<html lang="ko">
<script language="javascript">
//특정 날짜의 요일 구하기
function getInputDayLabel() {
var week = new Array('일요일', '월요일', '화요일', '수요일', '목요일', '금요일', '토요일');
var today = new Date('2020-07-27').getDay();
var todayLabel = week[today];
return todayLabel;
}
</script>
</html>참고 : elena90.tistory.com/entry/Java-Script-오늘날짜-특정-날짜의-요일-구하기-예제-년도-월-일-요일
달력 (Calendar)
그러면 이제 캘린더를 그리는 함수를 확인해보자.
참고 소스와 달리 월요일부터 시작하는 달력이 필요해서 관련 내용을 수정했다.
<!DOCTYPE html>
<html lang="ko">
<style>
table {
width: 800px;
height: 700px;
border: 1px solid #444444;
border-collapse: collapse;
}
</style>
<script language="javascript">
var today = new Date(); //오늘 날짜
var date = new Date();
//이전달
function beforem() //이전 달을 today에 값을 저장
{
today = new Date(today.getFullYear(), today.getMonth() - 1, today.getDate());
autoReload(); //만들기
}
//다음달
function nextm() //다음 달을 today에 저장
{
today = new Date(today.getFullYear(), today.getMonth() + 1, today.getDate());
autoReload();
}
//오늘선택
function thisMonth(){
today = new Date();
autoReload();
}
function autoReload()
{
var nMonth = new Date(today.getFullYear(), today.getMonth(), 1); //현재달의 첫째 날
var lastDate = new Date(today.getFullYear(), today.getMonth() + 1, 0); //현재 달의 마지막 날
var tbcal = document.getElementById("calendar"); // 테이블 달력을 만들 테이블
var yearmonth = document.getElementById("yearmonth"); // 년도와 월 출력할곳
yearmonth.innerHTML = today.getFullYear() + "년 "+ (today.getMonth() + 1) + "월"; //년도와 월 출력
if(today.getMonth()+1==12) // 눌렀을 때 월이 넘어가는 곳
{
before.innerHTML=("<"+today.getMonth())+"월";
next.innerHTML="1월"+">";
}
else if(today.getMonth()+1==1) // 1월 일 때
{
before.innerHTML="<"+"12월";
next.innerHTML=(today.getMonth()+2)+"월" +">";
}
else // 12월 일 때
{
before.innerHTML="<"+(today.getMonth())+"월";
next.innerHTML=(today.getMonth()+2)+"월"+">";
}
// 남은 테이블 줄 삭제
while (tbcal.rows.length > 2)
{
tbcal.deleteRow(tbcal.rows.length - 1);
}
var row = null;
row = tbcal.insertRow();
var cnt = 0;
var dayCheck = (nMonth.getDay()==0) ? 7 : nMonth.getDay(); //일요일을 마지막으로 넣기 위해서.
// 1일 시작칸 찾기
for (i = 0; i < (dayCheck-1); i++)
{
cnt = cnt + 1; //요일값
cell = row.insertCell();
if (i>4) { //주말
cell.style.backgroundColor = "#f7f7f7";
}
}
// 달력 출력
for (i = 1; i <= lastDate.getDate(); i++) // 1일부터 마지막 일까지
{
cell = row.insertCell();
var str="";
str += "<div>"+i+"</div>";
var day = (i<10) ? "0"+i : i;
str += "<div id='"+day+"'></div>"; //나중에 원하는 날에 일정을 넣기위해 id값을 날자로 설정
cell.innerHTML = str;
cnt = cnt + 1;
if (cnt % 7 == 6) {//토요일
var str="";
str += "<div>"+i+"</div>";
var day = (i<10) ? "0"+i : i;
str += "<div id='"+day+"'>";
str += "</div>";
cell.innerHTML = str;
cell.style.color = "#009de0";
cell.style.backgroundColor = "#f7f7f7";
}
if (cnt % 7 == 0) { //일요일
var str="";
str += "<div>"+i+"</div>";
var day = (i<10) ? "0"+i : i;
str += "<div id='"+day+"'>";
str += "</div>";
cell.innerHTML = str;
row = calendar.insertRow();// 줄 추가
cell.style.color = "#ed5353";
cell.style.backgroundColor = "#f7f7f7";
}
//마지막 날짜가 지나면 일요일까지 칸 그리기
if(lastDate.getDate() == i && ((cnt % 7) != 0)){
var add = 7 - (cnt % 7);
for(var k = 1; k <= add; k++){
cell = row.insertCell();
cnt = cnt + 1;
if (cnt % 7 == 6) {//토요일
cell.style.backgroundColor = "#f7f7f7";
}
if (cnt % 7 == 0) { //일요일
cell.style.backgroundColor = "#f7f7f7";
}
}
}
//오늘날짜배경색
if( today.getFullYear() == date.getFullYear() && today.getMonth() == date.getMonth() && i==date.getDate() )
{
cell.style.backgroundColor = "#e2f3da"; //오늘날짜배경색
}
//마지막 날짜가 지나면 일요일까지 칸 그리기
if(lastDate.getDate() == i && ((cnt % 7) != 0)){
var add = 7 - (cnt % 7);
for(var k = 1; k <= add; k++){
cell = row.insertCell();
cnt = cnt + 1;
if (cnt % 7 == 6) {//토요일
cell.style.backgroundColor = "#f7f7f7";
}
if (cnt % 7 == 0) { //일요일
cell.style.backgroundColor = "#f7f7f7";
}
}
}
}
//원하는 날짜 영역에 내용 추가하기
var tdId = "01"; //1일
var str = "";
str += "<br>09:00 일정1";
str += "<br>12:00 일정2 \n";
document.getElementById(tdId).innerHTML = str;
}
</script>
<body onload="autoReload();">
<table align="center" id="calendar">
<tr>
<td>
<a id="before" href="javascript:beforem()"></a>
</td>
<td colspan="4" align="center">
<div id="yearmonth"></div>
</td>
<td>
<a id="next" href="javascript:nextm()"></a>
</td>
<td>
<a href="javascript:thisMonth()">오늘</a>
</td>
</tr>
<tr>
<td width="14%"> 월 </td>
<td width="14%"> 화 </td>
<td width="14%"> 수 </td>
<td width="14%"> 목 </td>
<td width="14%"> 금 </td>
<td width="14%"><font color="#009de0">토</font></td>
<td width="14%"><font color="#ed5353">일</font></td>
</tr>
</table>
</body>
</html>
포스팅에 디자인을 다 넣을 수 없어서 뺐더니 약간 이상해졌지만.. 완성하면 이렇다
