자바스크립트로 달력 그리기

HTML

<div class="widget cell">

<h3>

달력 <span></span>

</h3>

<hr />

<div class="widget-board-container">

<div class="widget-board calendar">

<div class="row week">

<div class="cell day sun">일</div>

<div class="cell day">월</div>

<div class="cell day">화</div>

<div class="cell day">수</div>

<div class="cell day">목</div>

<div class="cell day">금</div>

<div class="cell day sat">토</div>

</div>

</div>

</div>

</div>

스크립트 소스

<script>

var calendar = document.querySelector(".widget-board.calendar");

var date = new Date();

var currentYear = date.getFullYear();

var currentMonth = date.getMonth() + 1; // 0~11 0:1월

/* date : 일 day: 요일 */

var currentDate = date.getDate();

date.setDate(1);

var currentMonthFirstDay = date.getDay();

var lastDay = new Date(currentYear, currentMonth, 0).getDate();

var dateString = new Array('sun', 'mon', 'tue', 'wed', 'thu',

'fri', 'sat');

var currentMonthWeek = Math

.ceil((currentMonthFirstDay + lastDay) / 7);

var day = 1;

for (var j = 0; j < currentMonthWeek; j++) {

var row = document.createElement("div");

row.classList.add('row', 'week');

for (var i = 0; i < 7; i++) {

var cell = document.createElement("div");

if (i == 0)

cell.classList.add('cell', 'day', 'sun');

else if (i == 6)

cell.classList.add('cell', 'day', 'sat');

else

cell.classList.add('cell', 'day');

if ((j == 0 && i < currentMonthFirstDay)|| (j == (currentMonthWeek - 1) && day > lastDay)) {

cell.textContent = " ";

} else {

if (day == currentDate)

cell.classList.add('today');

cell.textContent = day;

day++;

}

row.appendChild(cell);

}

calendar.appendChild(row);

}

</script>