Lets write a calender with JavaScript:
HTML file :
<script type="text/JavaScript">
calender("May 25, 2007");
</script>
JavaScript file :
function calender(calendarDay)
{
if(calendarDay == null) calDate = new Date();
else var calDate = new Date (calendarDay);
document.write('<table id="calendar_table">');
writeCalTitle(calDate);
writeDayNames();
writeCalDays(calDate);
document.write('</table>');
}
function writeCalTitle(calendarDay)
{
var monthName = new Array("Fanuary", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December");
var thisMonth = calendarDay.getMonth();
var thisYear = calendarDay.getFullYear();
document.write('<tr>');
document.write('<th id="calendar_head" colspan="7">');
document.write(monthName[thisMonth] + " " + thisYear);
document.write('</th>');
document.write('</tr>');
}
function writeDayNames()
{
var dayName = new Array("Sun","Mon","Tue","Wed","Thu","Fri","Sat");
document.write('<tr>');
for (var i = 0; i < dayName.length; i++)
{
document.write('<th class="calendar_weekdays">' + dayName + '</th>');
}
document.write('</tr>');
}
function writeCalDays(calendarDay)
{
var currentDay = calendarDay.getDate();
var dayCount = 1;
var totalDays = daysInMonth(calendarDay);
calendarDay.setDate(1);
var weekDay = calendarDay.getDay();
document.write('<tr>');
for (var i=0; i<weekDay; i++)
{
document.write('<td></td>');
}
while(dayCount <= totalDays)
{
if(weekDay == 0) document.write('<tr>');
if(dayCount == currentDay)
{
document.write('<td class="calendar_dates" id="calendar_today">' + dayCount + '</td>');
}
else
{
document.write('<td class="calendar_dates">' + dayCount + '</td>');
}
if(weekDay == 6) document.write('</tr>');
dayCount++;
calendarDay.setDate(dayCount);
weekDay = calendarDay.getDay();
}
document.write('</tr>');
}
function daysInMonth(calendarDay)
{
var thisMonth = calendarDay.getMonth();
var thisYear = calendarDay.getFullYear();
var dayCount = new Array (31,28,31,30,31,30,31,31,30,31,30,31);
if((thisYear % 4) == 0)
{
if((thisYear %100 !=0) || (thisYear % 400 != 0))
{
dayCount[1] = 29;
}
}
return dayCount[thisMonth];
}
CSS file :
#calendar_table {float: right; background-color: white; font-size: 9pt;
font-family: Arial, Helvetica, sans-serif;
border-style: outset; border-width: 5px; margin: 0px 0px 5px 5px}
#calendar_head {background-color: orange; color: ivory; letter-spacing: 4}
.calendar_weekdays {width: 30px; font-size: 10pt; border-bottom-style: solid}
.calendar_dates {text-align: center; background-color: white}
#calendar_today {font-weight: bold; color: orange; background-color: ivory;
border: 1px solid black}
