달력 만들기

jquery를 이용해 달력을 만들어보자. 태그도 동적으로 생성하여 만들어보았다. 어떤사람은 이렇게 만들면 보기 어렵다고 한다. 나는 동적생성이 편하므로 그렇게 작업하겠다. 위에는 만든 샘플로 생성한 달력이다. 다음은 생성시키는 부분이다.

// 달력 생성

$.fn.showCalendar = function(thisMonth){

var tmpMonth = this.initCalendar(thisMonth); // 달력 월 초기화

var weekDateCntForMonth = this.getThisDay(); // 오늘의 요일

this.initYearMonthTag(); // 년월 출력

this.intCalendarTag(); // 전체 태그 생성

this.intWeekTag(); // 주간 태그 생성

this.initFristWeekEmptyTag(); // 첫주의 빈칸 생성

//달력 날짜 생성

while(tmpMonth == this.getMonth()){

var tmpdate = this.getDateForCalendar();

if( weekDateCntForMonth != 0 && (weekDateCntForMonth%7) == 0){

//주가 바뀜

this.addWeekTag();

this.intWeekTag();

}

this.addDateTag(tmpdate); // 날짜 추가

weekDateCntForMonth++;

}

//마지막주 빈칸 생성 및 추가

this.initLastWeekEmptyTag();

this.addWeekTag();

this.showCalendarTag(); // 달력 출력

}

$(document).ready(function(){

$('#calendar_div').showCalendar(1); // 1월 달력 생성

});

calendar_div에 달력을 만들어 붙인다. 다음 스크립트는 태그를 생성해주는 부분으로 여기를 수정하면 생성되는 태그를 바꿀 수 있다.

//  전체태그 초기화

$.fn.intCalendarTag = function(){

var sun = $('<th>').attr('scope','col').html('일');

var mon = $('<th>').attr('scope','col').html('월');

var tue = $('<th>').attr('scope','col').html('화');

var wed = $('<th>').attr('scope','col').html('수');

var thu = $('<th>').attr('scope','col').html('목');

var fri = $('<th>').attr('scope','col').html('금');

var sat = $('<th>').attr('scope','col').html('토');

this.cal = $('<table>');

this.colTitle = $('<tr>');

this.thead = $('<thead>').append(this.colTitle);

$(this.cal).append(this.thead );

$(this.cal).append($('<tbody>'));

$(this.colTitle).append(sun);

$(this.colTitle).append(mon);

$(this.colTitle).append(tue);

$(this.colTitle).append(wed);

$(this.colTitle).append(thu);

$(this.colTitle).append(fri);

$(this.colTitle).append(sat);

}

//주간태그 초기화

$.fn.intWeekTag = function(){

this.tr = $('<tr>');

}

//주간태그에 날짜태그 추가

$.fn.addDateTag = function(text){

if(text == null){

text = '';

}

this.td = $('<td>').html(text);

if(this.tr != null){

$(this.tr).append(this.td);

this.td = null;

}

}

//이번달  마지막주 빈칸 설정

$.fn.initYearMonthTag = function(text){

if(this.now != null){

var yearMonth = this.now.getFullYear() + '년  ' + (this.now.getMonth()+1) + '월';

$('<h3>').append(yearMonth).appendTo(this);

}

}

여기서 생성되는 태그는 다음과 같다.

<div id="calendar_div">

<h3>2013년  1월</h3>

<table>

<thead>

<tr>

<th scope="col">일</th>

<th scope="col">월</th>

<th scope="col">화</th>

<th scope="col">수</th>

<th scope="col">목</th>

<th scope="col">금</th>

<th scope="col">토</th>

</tr>

</thead>

<tbody>

<tr>

<td></td><td></td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td>

</tr>

<tr>

<td>6</td><td>7</td><td>8</td><td>9</td><td>10</td><td>11</td><td>12</td>

</tr>

<tr>

<td>13</td><td>14</td><td>15</td><td>16</td><td>17</td><td>18</td><td>19</td>

</tr>

<tr>

<td>20</td><td>21</td><td>22</td><td>23</td><td>24</td><td>25</td><td>26</td>

</tr>

<tr>

<td>27</td><td>28</td><td>29</td><td>30</td><td>31</td><td></td><td></td>

</tr>

</tbody>

</table>

</div>

달력생성에는 javascript의 Date 객체를 사용해서 만들었다. 날짜 계산을 복잡하게 내가 할 필요가 없어서 좋다.

calendar_jquery.html