달력 만들기

Javascript/jQuery 2013.01.17 13:52

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






'Javascript > jQuery' 카테고리의 다른 글

jQuery Attributes vs. Properties  (0) 2016.02.15
타이머 만들기  (0) 2013.03.12
달력 만들기  (0) 2013.01.17
단축키를 눌러 특정위치로 이동  (0) 2012.11.22
레이어를 화면 중앙에 띄우기  (0) 2012.11.08
offsetParent()  (0) 2012.10.04
Trackbacks 0 : Comments 0