달력 만들기 with jQuery

var today = new Date(); //오늘 날짜//내 컴퓨터 로컬을 기준으로 today에 Date 객체를 넣어줌
var date  = new Date(); //today의 Date를 세어주는 역할

function getStartDay(){
 var startDate = new Date(today.getFullYear(), today.getMonth(), 1);
 return startDate.getDay();
}
function getLastDate(){
 var endDate = new Date(today.getFullYear(), today.getMonth(),0);
 return endDate.getDate();
}
function setYear(){
 var year = today.getFullYear();
 $("#searchYear").empty();
 $("#searchYear").append(""+year+"년");
 $("#searchYear").append(""+(year+1)+"년");
 $("#searchYear").append(""+(year+2)+"년");
 $("#searchYear").append(""+(year+3)+"년");
 $("#searchYear").append(""+(year+4)+"년");
}

function createData(date,day){
 var year = today.getFullYear(); //년도
 var month = today.getMonth(); //월

 if(day == null){
  return '';
 }else{
  if(today.getDate() == date){
   return ''+date+''+date+'년 '+date+'월 '+date+'일';
  }else{
   return ''+date+''+date+'년 '+date+'월 '+date+'일';
  }
 }
}

function createCalendar(){//현재 달 달력 만들기
 var year = today.getFullYear(); //년도
 var month = today.getMonth(); //월
 var date = today.getDate();  //일
 var day  = today.getDay();  //요일
 setYear();
 $("#searchMonth").val((month+1));

 $("#calendarBody tr").remove();

 var cnt = 0;
 var dayCnt = 1;
 var startDate = getStartDay();
 var lastDate = getLastDate();

 for(var i = 0;i<6 append="" calendarbody="" i="" tr="">

"); for(var j = 0;j<7 append="" calendarbody="" i="" j="" td="" tr:eq="">"); if(cnt >= startDate && lastDate >= dayCnt){ $("#calendarBody tr:eq('"+i+"') td").eq(j).html(createData(dayCnt,day)); dayCnt++; day++; if(day == 8){ day = 0; } }else{ if(lastDate <= dayCnt){ if(i == 5 && j == 0){ break; }else{ $("#calendarBody tr:eq('"+i+"') td").eq(j).html(createData(null,null)); } }else{ $("#calendarBody tr:eq('"+i+"') td").eq(j).html(createData(null,null)); } } cnt++; } } } $(document).ready(function(){ createCalendar(); $(".calnav_prev").click(function(){ today = new Date(today.getFullYear(), today.getMonth() - 1, 1); createCalendar(); }); $(".calnav_next").click(function(){ today = new Date(today.getFullYear(), today.getMonth() + 1, 1); createCalendar(); }); $("#searchYear").change(function(){ today = new Date($("#searchYear").val(), today.getMonth() , 1); createCalendar(); }); $("#searchMonth").change(function(){ today = new Date(today.getFullYear(), ($("#searchMonth").val()-1) , 1); createCalendar(); }); });

<table class="calendar">
<thead>
<tr>
<th scope="col" class="sun">
일</th>
<th scope="col">
월</th>
<th scope="col">
화</th>
<th scope="col">
수</th>
<th scope="col">
목</th>
<th scope="col">
금</th>
<th scope="col" class="sat">
토</th>
</tr>
</thead>
<tbody id="calendarBody">                                             </tbody>                                          </table>