I'm making a simple calendar using javascript for my task. I tried to add a class on the day that the column will be selected. But i got problem with that if i did on this day that code successfully, but if i did on next/prev month it's not working. How do I resolve this?
here's my code :
<script type="text/javascript">
cal_days_labels = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
cal_months_labels = ['January', 'February', 'March', 'April',
'May', 'June', 'July', 'August', 'September',
'October', 'November', 'December'];
cal_days_in_month = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
cal_current_date = new Date();
var today = new Date();
var dd = today.getDate();
var mm = today.getMonth();
var yyyy = today.getFullYear();
function Calendar(month, year) {
this.html = '';
}
Calendar.prototype.generateHTML = function(){
var firstDay = new Date(yyyy, mm, 1);
var startingDay = firstDay.getDay();
var monthLength = cal_days_in_month[mm];
if (mm == 1) { // February only!
if((yyyy % 4 == 0 && yyyy % 100 != 0) || yyyy % 400 == 0){
monthLength = 29;
}
}
var monthName = cal_months_labels[mm];
var html = '<table border=1 class="table table-bordered calendar-table">';
html += '<tr><th colspan="7">';
html += monthName + " " + yyyy;
html += '</th></tr>';
html += '<tr class="calendar-header">';
for(var i = 0; i <= 6; i++ ){
html += '<td class="calendar-header-day">';
html += cal_days_labels[i];
html += '</td>';
}
html += '</tr><tr>';
var day = 1;
for (var i = 0; i < 9; i++) {
for (var j = 0; j <= 6; j++) {
if (day <= monthLength && (i > 0 || j >= startingDay)) {
html += '<td class="calendar-day">';
html += "<span class='cal-day'>"+day+"</span>";
day++;
}else{
html += "<td class='pass-day'>";
}
html += '</td>';
}
if (day > monthLength){ break; }
else { html += '</tr><tr>'; }
}
html += '</tr></table>';
this.html = html;
}
Calendar.prototype.getHTML = function() {
return this.html;
}
</script>
<body>
<button class="btn btn-default prev"><i class="glyphicon glyphicon-circle-arrow-left"></i></button>
<button class="btn btn-default next"><i class="glyphicon glyphicon-circle-arrow-right"></i></button>
<div class="cal"></div>
<script type="text/javascript">
var cal = new Calendar();
cal.generateHTML();
var count = 1;
$(document).ready(function(){
$(".cal").html(cal.getHTML());
$(".next").click(function(){
today.setMonth(today.getMonth()+count);
today.setYear(today.getFullYear());
mm = (today.getMonth());
yyyy = today.getFullYear();
var cal = new Calendar();
cal.generateHTML();
$(".cal").html(cal.getHTML());
});
//here's code for addClass "choose"
$(".calendar-table tr .calendar-day").click(function(){
$(".calendar-day").removeClass("choose");
$(this).addClass("choose");
});
//
});
</script>
</body>
*Sorry my english is not very good :)
