<html lang="ko">
<head>
<meta charset="UTF-8" name="viewport" content="width-device-width, initial-scale=1, maximunm-scale=1">
<title>Making Calendar</title>
<style>
.wrap
{
width: 500px;
margin : 0 auto;
}
.btn-holder
{
text-align: center;
margin : 10px 0 10px 0;
}
#calendar table {
text-align : center;
border-collapse : collapse;
}
#calendar table thead td {
height : 30px;
font-weight : bold;
}
#calendar table td {
border: solid 1px #000;
}
#calendar table td.date-cell {
height: 50px;
}
#calendar table td.sun {
color: red;
}
#calendar table td.sat {
color: blue;
}
#calendar table td.not-this-month {
background: #ddd;
color: #999;
}
</style>
<script src="http://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<script type="text/javascript">
$(function(){
var calendar = new controller();
calendar.init();
});
function controller(target){
var that = this;
var month = new Date();
month.setDate(1);
this.init = function(){
that.renderCalendar();
that.initEvent();
}
this.renderCalendar = function(){
var result = '<table><colgroup>';
for(var i=0; i < 7; i++){
result += '<col width="100">';
}
result += '<colgroup><thead><tr>';
var weekArr = ["일", "월", "화", "수", "목", "금", "토"];
for(var i=0; i < weekArr.length; i++){
result += '<td class="' + addDayClass(i) + '">' + weekArr[i] + '</td>';
}
result += '</tr></thead><tbody>';
var startDate = new Date(month.getTime());
startDate.setDate(startDate.getDate() - startDate.getDay());
for(var i=0; i < 100; i++){
if(i % 7 == 0)
result += '<tr>';
var dayClass = 'date-cell ';
dayClass += month.getMonth() != startDate.getMonth()? 'not-this-month ' : '';
dayClass += addDayClass(i);
result += '<td class="' + dayClass + '">' + startDate.getDate() + '</td>';
startDate.setDate(startDate.getDate() + 1);
if(i % 7 == 6){
result += '</tr>';
if(month.getMonth() != startDate.getMonth()) break;
}
}
result += '</tbody></table>';
$('#calendar').html(result);
that.changeMonth();
}
this.initEvent = function(){
$('#prevBtn').on('click', that.onPrevCalendar);
$('#nextBtn').on('click', that.onNextCalendar);
$('#calendar table td').on('click', that.onSelectTd);
}
this.onPrevCalendar = function(){
month.setMonth(month.getMonth() - 1);
that.renderCalendar();
}
this.onNextCalendar = function(){
month.setMonth(month.getMonth() + 1);
that.renderCalendar();
}
this.onSelectTd = function(e){
console.log('click td');
// console.log(e.currentTarget.innerText);
var selected = e.currentTarget;
var date = that.getYearMonth(month) + " " + selected.innerText + "일";
console.log(date);
var test = $(selected).hasClass('not-this-month');
console.log(test);
}
this.changeMonth = function(){
$('#currentDate').text(that.getYearMonth(month).substr(0, 9));
}
this.getYearMonth = function(date){
return date.getFullYear() + '년 ' + (date.getMonth() + 1) + '월';
}
};
function addDayClass(param){
return param % 7 == 0? 'sun' : ( param % 7 == 6? 'sat' : '') ;
};
</script>
</head>
<body>
<div class='wrap'>
<div class='btn-holder'>
<button id='prevBtn'><</button>
<span id='currentDate'></span>
<button id='nextBtn'>></button>
</div>
<div id='calendar'></div>
</div>
</body>
</html>