function MonthlyCalendar(year, month, displayElementID, instanceID, clickHandler)//monthly calendar class
{
var today = new Date();
this.doClick = clickHandler;
this.container = document.getElementById(displayElementID);
this.currentYear = today.getFullYear(); //system's current year
this.currentMonth = today.getMonth(); //system's current month
this.currentDate = today.getDate(); //system's current date in the month
if (year) //year passed in
{
this.givenYear = year; //given year from outside that needs to display, given
}
else //year not passed in
{
this.givenYear = this.currentYear; //given year from outside that needs to display, not given, use current year
}
if (month) //month passed in
{
this.givenMonth = month - 1; //given month from outside that needs to display, given
}
else //month not passed in
{
this.givenMonth = this.currentMonth; //given month from outside that needs to display, not given, use current month
}
this.totalDaysOfGivenMonth = function()//system's current total days of the specified month
{
var daysInMonths = new Array(31, 29, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31);
if (1 == this.givenMonth)//February
{
if ((this.givenYear % 400 == 0) || ((this.givenYear % 4 == 0) && (this.givenYear % 100 != 0))) //leap year
{
return 28;
}
else //not leap year
{
return 29;
}
}
else//Other months
{
return daysInMonths[this.givenMonth];
}
};
this.html = function()// function that will generate the inner html for the element passed in
{
var firstDayOfTheGivenMonth = new Date();
firstDayOfTheGivenMonth.setFullYear(this.givenYear);
firstDayOfTheGivenMonth.setMonth(this.givenMonth);
firstDayOfTheGivenMonth.setDate(1);
var innerHTML = "<table border=\"1px\">";
innerHTML += "<tr>";
innerHTML += "<td>";
innerHTML += "Sunday";
innerHTML += "</td>";
innerHTML += "<td>";
innerHTML += "Monday";
innerHTML += "</td>";
innerHTML += "<td>";
innerHTML += "Tuesday";
innerHTML += "</td>";
innerHTML += "<td>";
innerHTML += "Wednsday";
innerHTML += "</td>";
innerHTML += "<td>";
innerHTML += "Thursday";
innerHTML += "</td>";
innerHTML += "<td>";
innerHTML += "Friday";
innerHTML += "</td>";
innerHTML += "<td>";
innerHTML += "Saturday";
innerHTML += "</td>";
var weekDayOfFirstDayOfTheGivenMonth = firstDayOfTheGivenMonth.getDay();
var dayIndexOfTheGivenMonth = 0;
var totalDaysOfGivenMonth = this.totalDaysOfGivenMonth();
for (var row = 0; row < 6; row++) //5 rows of the days in months
{
innerHTML += "<tr>";
for (var column = 0; column < 7; column++) //from sunday to saturday
{
innerHTML += "<td>";
if ((weekDayOfFirstDayOfTheGivenMonth <= dayIndexOfTheGivenMonth) && (dayIndexOfTheGivenMonth < totalDaysOfGivenMonth + weekDayOfFirstDayOfTheGivenMonth)) //in this month
{
innerHTML += "<span onclick=\""+instanceID+".doClick('" + this.givenYear + "','" + (this.givenMonth+1) + "','" + (dayIndexOfTheGivenMonth - weekDayOfFirstDayOfTheGivenMonth + 1) + "')\">";
innerHTML += dayIndexOfTheGivenMonth - weekDayOfFirstDayOfTheGivenMonth + 1;
innerHTML += "</span>";
}
else //not in this month
{
//alert(dayIndexOfTheGivenMonth - weekDayOfFirstDayOfTheGivenMonth);
}
innerHTML += "</td>";
dayIndexOfTheGivenMonth++;
}
innerHTML += "</tr>";
}
innerHTML += "</table>";
return innerHTML;
};
this.showCurrentMonth = function() //show current month to the container
{
this.container.innerHTML = this.html();
};
this.showNextMonth = function() //show next month to the container
{
if (this.givenMonth == 11) //December
{
this.givenMonth = 0;
this.currentYear = this.givenYear + 1;
}
else //other months
{
this.givenMonth = this.givenMonth + 1;
}
this.container.innerHTML = this.html();
};
this.showPreviousMonth = function() //show previous month to the container
{
if (this.givenMonth == 0) //January
{
this.givenMonth = 11;
this.currentYear = this.givenYear - 1;
}
else //other months
{
this.givenMonth = this.givenMonth - 1;
}
this.container.innerHTML = this.html();
};
this.setNewYearAndMonth = function(year, month) //set new year and month to the calender and show
{
this.givenYear = year;
this.givenMonth = month - 1;
}
}
</script>
<div id="test">
<div>
<select id="yearDropDown" onchange="changeCalendar()">
<option value="2007">2007</option>
<option value="2008">2008</option>
<option value="2009">2009</option>
</select>
<select id="monthDropDown" onchange="changeCalendar()">
<option value="1">January</option>
<option value="2">February</option>
<option value="3">March</option>
<option value="4">April</option>
<option value="5">May</option>
<option value="6">June</option>
<option value="7">July</option>
<option value="8">August</option>
<option value="9">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
</select>
</div>
<div id="container">
<table border="1px">
<tr>
<td>
Sunday
</td>
<td>
Monday
</td>
<td>
Tuesday
</td>
<td>
Wednsday
</td>
<td>
Thursday
</td>
<td>
Friday
</td>
<td>
Saturday
</td>
</tr>
<tr>
<td>
1
</td>
<td>
2
</td>
<td>
3
</td>
<td>
4
</td>
<td>
5
</td>
<td>
6
</td>
<td>
7
</td>
</tr>
<tr>
<td>
1
</td>
<td>
2
</td>
<td>
3
</td>
<td>
4
</td>
<td>
5
</td>
<td>
6
</td>
<td>
7
</td>
</tr>
<tr>
<td>
1
</td>
<td>
2
</td>
<td>
3
</td>
<td>
4
</td>
<td>
5
</td>
<td>
6
</td>
<td>
7
</td>
</tr>
<tr>
<td>
1
</td>
<td>
2
</td>
<td>
3
</td>
<td>
4
</td>
<td>
5
</td>
<td>
6
</td>
<td>
7
</td>
</tr>
<tr>
<td>
1
</td>
<td>
2
</td>
<td>
3
</td>
<td>
4
</td>
<td>
5
</td>
<td>
6
</td>
<td>
7
</td>
</tr>
</table>
</div>
</div>
<script>
var mc = new MonthlyCalendar(2008, 9, "container", "mc", clickHandler);
mc.showCurrentMonth();
function changeCalendar() {
var year = document.getElementById("yearDropDown").value;
var month = document.getElementById("monthDropDown").value;
mc.setNewYearAndMonth(year, month);
mc.showCurrentMonth();
}
function clickHandler(year, month, day) {
alert(year+"/"+month+"/"+day);
}
</script>