<!doctype html public "-//w3c//dtd html 4.0 transitional//en">
<html>
<head>
<title> Customizable Calendar Script </title>
</head> <body> <style type="text/css">
#YearCalendar{width:600px;border:1px #E5E5E5 solid;}
#YearCalendar td.TestContainer{text-align:center;border:1px #E5E5E5 solid;} /* This is the Default Calendar Theme*/
.tblCalendar{border:2px #333 solid;border-collapse:collapse;font:normal 31px Verdana, Arial, sans-serif;background:#E5E5E5;}
.tblCalendar td{border:1px #333 solid;text-align:center;padding:2px;}
.tblCalendar td.SelectedDay{background:#999999;color:red;}
.tblCalendar td.Title{font-weight:bold;background:#000000;color:#C0C0C0;}
.tblCalendar .WeekName td{font-weight:bold;} /* These are some customised themes. The class name has to be passed to the function as the 4th argument*/
.CalendarStyle{border:2px #333 solid;border-collapse:collapse;font:normal 31px Verdana, Arial, sans-serif;background:#A8DCB7;}
.CalendarStyle td{border:1px #333 solid;text-align:center;padding:2px;}
.CalendarStyle td.SelectedDay{background:#999999;color:red;}
.CalendarStyle td.Title{font-weight:bold;background:#378D44;color:#C0C0C0;}
.CalendarStyle .WeekName td{font-weight:bold;}
</style> <script>
year = 2008;
month = 2;
day = 25; document.write(' <tr> ');
document.write(' <td class="TestContainer"> ');
id = Calendar(year, month, day, null, 'CalendarStyle' ); document.write(' <input type="button" onclick="ShowHide(this,\''+id+'\');" value="Hide"> </td> ');
document.write(" </tr> "); function ShowHide(btn, id)
{
StyleObj = document.getElementById(id).style;
if (StyleObj.display != 'none')
{
StyleObj.display = 'none';
btn.value = 'Show';
}
else
{
StyleObj.display = 'block';
btn.value = 'Hide';
}
} function Calendar(Year, Month, Day, ContainerId, ClassName)
{
Calendar.MonthNames = new Array('January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'); //If no parameter is passed use the current date.
this.oDate = new Date();
this.Year = (Year == null) ? this.oDate.getFullYear() : Year;
this.Month = (Month == null) ? this.oDate.getMonth() : Month - 1;
this.Day = (Day == null) ? 0 : Day;
this.oDate = new Date(this.Year, this.Month, 1);
this.NextMonth = new Date(this.Year, this.Month + 1, 1);
this.WeekStart = this.oDate.getDay(); // Get the number of months in current month
this.MonthDays = Math.round((this.NextMonth.getTime() - this.oDate.getTime()) / 86400000) + 1;
this.HTML = ' <table id="mytable" class="' + ((ClassName == null) ? 'tblCalendar' : ClassName) + '" cellspacing="0"> '; // Title bar
this.HTML += ' <tr> <td colspan="7" class="Title"> ' + Calendar.MonthNames[this.Month] + ' ' + this.Year + ' </td> </tr> '; // Week Names
this.HTML += ' <tr class="WeekName"> <td> S </td> <td> M </td> <td> T </td> <td> W </td> <td> T </td> <td> F </td> <td> S </td> </tr> ';
this.HTML += ' <tr> '; // Fill the previous month days with space
for(DayCounter = 0; DayCounter < this.WeekStart; DayCounter++)
{
this.HTML += ' <td> </td> ';
} // Populate current month
for(DayCounter = 1; DayCounter < this.MonthDays; DayCounter++)
{
if((DayCounter + this.WeekStart) % 7 == 1) this.HTML += ' <tr> '; if(DayCounter == this.Day)
this.HTML += ' <td class="SelectedDay"> ' + DayCounter + ' </td> ';
else this.HTML += ' <td> ' + DayCounter + ' </td> '; if((DayCounter + this.WeekStart) % 7 == 0) this.HTML += ' </tr> ';
} // Fill the next month days with space
for(j = (42 - (this.MonthDays + this.WeekStart)), DayCounter = 0; DayCounter <= j; DayCounter++)
{
this.HTML += ' <td> </td> ';
if((j - DayCounter) % 7 == 0) this.HTML += ' </tr> ';
} this.HTML += ' </table> '; // Check whether the Container Id is null
if(ContainerId != null)
{
this.Container = document.getElementById(ContainerId); if(this.Container) // If an object exists with the given ContainerId insert the Calendar into the object
document.getElementById(ContainerId).innerHTML = this.HTML;
else // Else create an element with the given id and insert the calendar
document.write(' <div id="' + ContainerId + '"> ' + this.HTML + ' </div> ');
}
else
{
// Loop until a unique id is obtained for the container
do
{
ContainerId = 'tblCalendar' + Math.round(Math.random() * 1000);
}
while(document.getElementById(ContainerId)); // create an element with the new id and insert the calendar
document.write(' <div id="' + ContainerId + '" style="display:none"> ' + this.HTML + ' </div> ');
//document.write(' <div id="' + ContainerId + '"> ' + this.HTML + ' </div> '); } // Returns Id of the element containing the calendar
return ContainerId;
}
/////////////////////////////////////////////
/////////////////////////////////////////////
for(var i = 1; i < 50; i++)
{
document.getElementById('mytable').getElementsByTagName('td')[i].onclick = test;
}
function test()
{
if(this.innerHTML.match(/\d/))
{
alert(this.innerHTML);
}
}
</script> </body>
</html> -。-
<html>
<head>
<title> Customizable Calendar Script </title>
</head> <body> <style type="text/css">
#YearCalendar{width:600px;border:1px #E5E5E5 solid;}
#YearCalendar td.TestContainer{text-align:center;border:1px #E5E5E5 solid;} /* This is the Default Calendar Theme*/
.tblCalendar{border:2px #333 solid;border-collapse:collapse;font:normal 31px Verdana, Arial, sans-serif;background:#E5E5E5;}
.tblCalendar td{border:1px #333 solid;text-align:center;padding:2px;}
.tblCalendar td.SelectedDay{background:#999999;color:red;}
.tblCalendar td.Title{font-weight:bold;background:#000000;color:#C0C0C0;}
.tblCalendar .WeekName td{font-weight:bold;} /* These are some customised themes. The class name has to be passed to the function as the 4th argument*/
.CalendarStyle{border:2px #333 solid;border-collapse:collapse;font:normal 31px Verdana, Arial, sans-serif;background:#A8DCB7;}
.CalendarStyle td{border:1px #333 solid;text-align:center;padding:2px;}
.CalendarStyle td.SelectedDay{background:#999999;color:red;}
.CalendarStyle td.Title{font-weight:bold;background:#378D44;color:#C0C0C0;}
.CalendarStyle .WeekName td{font-weight:bold;}
</style> <script>
year = 2008;
month = 2;
day = 25; document.write(' <tr> ');
document.write(' <td class="TestContainer"> ');
id = Calendar(year, month, day, null, 'CalendarStyle' ); document.write(' <input type="button" onclick="ShowHide(this,\''+id+'\');" value="Hide"> </td> ');
document.write(" </tr> "); function ShowHide(btn, id)
{
StyleObj = document.getElementById(id).style;
if (StyleObj.display != 'none')
{
StyleObj.display = 'none';
btn.value = 'Show';
}
else
{
StyleObj.display = 'block';
btn.value = 'Hide';
}
} function Calendar(Year, Month, Day, ContainerId, ClassName)
{
Calendar.MonthNames = new Array('January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'); //If no parameter is passed use the current date.
this.oDate = new Date();
this.Year = (Year == null) ? this.oDate.getFullYear() : Year;
this.Month = (Month == null) ? this.oDate.getMonth() : Month - 1;
this.Day = (Day == null) ? 0 : Day;
this.oDate = new Date(this.Year, this.Month, 1);
this.NextMonth = new Date(this.Year, this.Month + 1, 1);
this.WeekStart = this.oDate.getDay(); // Get the number of months in current month
this.MonthDays = Math.round((this.NextMonth.getTime() - this.oDate.getTime()) / 86400000) + 1;
this.HTML = ' <table id="mytable" class="' + ((ClassName == null) ? 'tblCalendar' : ClassName) + '" cellspacing="0"> '; // Title bar
this.HTML += ' <tr> <td colspan="7" class="Title"> ' + Calendar.MonthNames[this.Month] + ' ' + this.Year + ' </td> </tr> '; // Week Names
this.HTML += ' <tr class="WeekName"> <td> S </td> <td> M </td> <td> T </td> <td> W </td> <td> T </td> <td> F </td> <td> S </td> </tr> ';
this.HTML += ' <tr> '; // Fill the previous month days with space
for(DayCounter = 0; DayCounter < this.WeekStart; DayCounter++)
{
this.HTML += ' <td> </td> ';
} // Populate current month
for(DayCounter = 1; DayCounter < this.MonthDays; DayCounter++)
{
if((DayCounter + this.WeekStart) % 7 == 1) this.HTML += ' <tr> '; if(DayCounter == this.Day)
this.HTML += ' <td class="SelectedDay"> ' + DayCounter + ' </td> ';
else this.HTML += ' <td> ' + DayCounter + ' </td> '; if((DayCounter + this.WeekStart) % 7 == 0) this.HTML += ' </tr> ';
} // Fill the next month days with space
for(j = (42 - (this.MonthDays + this.WeekStart)), DayCounter = 0; DayCounter <= j; DayCounter++)
{
this.HTML += ' <td> </td> ';
if((j - DayCounter) % 7 == 0) this.HTML += ' </tr> ';
} this.HTML += ' </table> '; // Check whether the Container Id is null
if(ContainerId != null)
{
this.Container = document.getElementById(ContainerId); if(this.Container) // If an object exists with the given ContainerId insert the Calendar into the object
document.getElementById(ContainerId).innerHTML = this.HTML;
else // Else create an element with the given id and insert the calendar
document.write(' <div id="' + ContainerId + '"> ' + this.HTML + ' </div> ');
}
else
{
// Loop until a unique id is obtained for the container
do
{
ContainerId = 'tblCalendar' + Math.round(Math.random() * 1000);
}
while(document.getElementById(ContainerId)); // create an element with the new id and insert the calendar
document.write(' <div id="' + ContainerId + '" style="display:none"> ' + this.HTML + ' </div> ');
//document.write(' <div id="' + ContainerId + '"> ' + this.HTML + ' </div> '); } // Returns Id of the element containing the calendar
return ContainerId;
}
/////////////////////////////////////////////
/////////////////////////////////////////////
for(var i = 1; i < 50; i++)
{
document.getElementById('mytable').getElementsByTagName('td')[i].onclick = test;
}
function test()
{
if(this.innerHTML.match(/\d/))
{
alert(this.innerHTML);
}
}
</script> </body>
</html> -。-
this.style.borderBottom = "1px solid #eee";
this.style.backgroundColor = "#aaa";