카테고리 없음

Javascript로 Calendar 구현

철이아부지 2010. 12. 14. 15:09
자바 스크립트로 달력 그릴일이 생겼는데 java같은 calendar 클래스가 없어서 개발 새발 만들어봄
혹시 이거 쓰는 사람이 혹시라도 생기게 되면 오류에 대해 Feedback 주세요~

calendar.js
function fillZero(value, length) {
var result = "" + value;

for( var step = result.length; step < length; step++ ) {
result = "0" + result;
}

return result;
}

function Calendar() {
this.date = new Date();
this.set = function(newDate) {
this.date = newDate;
};
this.get = function() {
return this.date;
};
this.getLongTime = function() {
return this.date.getTime();
};
this.setLongTime = function(millisec) {
return this.date.setTime(millisec);
};
this.addDay = function( day ) {
this.setLongTime(this.getLongTime() + day * 86400000);
}
this.getYear = function() {
return this.date.getFullYear();
};
this.setYear = function(year) {
this.date.setFullYear(year);
};
this.getMonth = function() {
return this.date.getMonth();
};
this.setMonth = function(month) {
this.date.setMonth(month);
};
this.getDayOfMonth = function() {
return this.date.getDate();
};
this.setDayOfMonth = function(dayOfMonth) {
this.date.setDate(dayOfMonth);
};
this.getDayOfWeek = function() {
return this.date.getDay();
};
this.setDayOfWeek = function(dayOfWeek) {
this.addDay(this.getDayOfWeek() * -1);
this.addDay(dayOfWeek);
};
this.setDate = function( year, month, dayOfMonth ) {
this.setYear(year);
this.setMonth(month);
this.setDayOfMonth(dayOfMonth);
};

this.getDate = function() {
return this.getYear() + "-" + fillZero((this.getMonth() + 1), 2) + "-" + fillZero(this.getDayOfMonth(), 2);
};


this.getHours = function() {
return this.date.getHours();
};
this.setHours = function(hours) {
this.date.setHours(hours);
};
this.getMinutes = function() {
return this.date.getMinutes();
};
this.setMinutes = function(minutes) {
this.date.setMinutes(minutes);
};
this.getSeconds = function() {
return this.date.getSeconds();
};
this.setSeconds = function(seconds) {
this.date.setSeconds(seconds);
};

this.getMilliseconds = function() {
return this.date.getMilliseconds();
};

this.setMilliseconds = function(seconds) {
this.date.setMilliseconds(seconds);
};
this.setTime = function( hour, minute, second) {
this.setHours(hour);
this.setMinutes(minute);
this.setSeconds(second);
this.setMilliseconds(0);
};

this.getTime = function() {
return fillZero(this.getHours(),2) + ":" + fillZero(this.getMinutes(), 2)  + ":" + fillZero(this.getSeconds(), 2);
};

this.getDateTime = function() {
return this.getDate() + " " + this.getTime();
};

this.format = function(format) {
var result = format;

result = result.replace( "yyyy", this.getYear() );
result = result.replace( "yy", this.getYear() % 100 );
result = result.replace( "MM", fillZero(this.getMonth()+1,2));
result = result.replace( "M", this.getMonth()+1);
result = result.replace( "dd", fillZero(this.getDayOfMonth(),2));
result = result.replace( "d", this.getDayOfMonth());
result = result.replace( "a", this.getHours() > 12 ? "PM" : "AM");
result = result.replace( "HH", fillZero(this.getHours(), 2));
result = result.replace( "H", this.getHours());
result = result.replace( "hh", fillZero(this.getHours() == 0 || this.getHours() == 12 ? 12 : this.getHours() % 12, 2));
result = result.replace( "h", this.getHours() == 0 || this.getHours() == 12 ? 12 : this.getHours() % 12 );
result = result.replace( "mm", fillZero(this.getMinutes(), 2));
result = result.replace( "m", this.getMinutes());
result = result.replace( "ss", fillZero(this.getSeconds(), 2));
result = result.replace( "s", this.getSeconds());
return result;
};

this.parseDate = function(dateString) {
if( dateString == null || dateString.length <= 0 ) {
return false;
}

var dateItem = dateString.split("-");

if( dateItem.length < 3 ) {
return false;
}

var year = parseInt(dateItem[0]);
var month = parseInt(dateItem[1]);
var day = parseInt(dateItem[2]);

if( isNaN(year) == true || isNaN(month) == true || isNaN(day) == true ) {
return false;
}

this.setDate(year, month-1, day);
return true;
}

this.parseTime = function(timeString) {
if( timeString == null || timeString <= 0 ) {
return false;
}

var timeItem= timeString.split(":");

if( timeItem.length < 3 ) {
return false;
}

var hour = parseInt(timeItem[0]);
var minute = parseInt(timeItem[1]);
var second = parseInt(timeItem[2]);

if( isNaN(hour) == true || isNaN(minute) == true || isNaN(second) == true ) {
return false;
}

this.setTime(hour, minute, second);
return true;
}

this.parse = function(dateTimeString) {
if( dateTimeString == null || dateTimeString <= 0 ) {
return false;
}

var dateTimeItem= dateTimeString.split(" ");

if( dateTimeItem.length < 2 ) {
return false;
}

if( this.parseDate(dateTimeItem[0]) == false || this.parseTime(dateTimeItem[1]) == false ) {
return false;
}

return true;
}
}

예제 HTML
<html>
<head>
<script src="calendar.js"></script>
<script>
function drawCalendar(pannelId) {
var pannel = document.getElementById(pannelId);

var calendarText = "";
var calendar = new Calendar();
calendarText = "<b>" + calendar.format("yyyy년 MM월") + "</b><br/>";
var currMonth = calendar.getMonth();
var currYear = calendar.getYear();

calendar.setDayOfMonth(1);
calendar.setDayOfWeek(0);
calendarText += 
"<table><tr>" +
"<td>일</td>" +
"<td>월</td>" +
"<td>화</td>" +
"<td>수</td>" +
"<td>목</td>" +
"<td>금</td>" +
"<td>토</td></tr>";
while( currMonth >= calendar.getMonth() && currYear >= calendar.getYear() ) {
calendarText += "<tr>";

for( var step = 0; step < 7; step++ ) {
calendarText += "<td>" + calendar.format("dd") + "</td>";
calendar.addDay(1);
}

calendarText += "</tr>";
}

calendarText += "</table>";
pannel.innerHTML = calendarText;
}

function parseTest() {
var calendar = new Calendar();
calendar.parseDate( "2010-10-12" );
alert( calendar.getDate() );
calendar.parseTime( "14:02:11" );
alert( calendar.getTime() );
calendar.parse( "1999-01-01 17:18:19");
alert( calendar.getDateTime() );
}
</script>
</head>
<body onload="drawCalendar('calendar')">
<div id="calendar"></div>
<button onclick="parseTest()">parse test</button>
<body>
</html>