<!-- TWO STEPS TO INSTALL ANNUAL CALENDAR WITH EVENTS:
1. Copy the coding into the HEAD of your HTML document
2. Add the last code into the BODY of your HTML document -->
<!-- STEP ONE: Paste this code into the HEAD of your HTML document -->
<HEAD>
<style type="text/css">
body {
background-color : #effeff;
}
div.hol {
background-color : yellow;
}
td.outer {
cellpadding : 1em;
border : solid blue;
}
table.inner {
background-color : #efefdd;
font-size : 8pt;
}
</style>
<script type="text/javascript">
var months = ["January","February","March","April","May","June","July","August","September","October","November","December"];
var daycounts = [31,28,31,30,31,30,31,31,30,31,30,31]; //for leap years, remember to set february to 29 days
//2002 firstdays = [1,4,4,0,2,5,0,3,6,1,4,6];
var firstdays = [2,5,5,1,3,6,1,4,0,2,5,0];
//2004 firstdays = [3,6,7,3,5,1,3,6,2,4,0,2];
// This is where you put in the appointments. follow pattern [fromday,frommonth,today,tomonth,message]
var apps = [
[15,3,13,4,"Holiday in New Zealand"],
[12,6,12,6,"my birthday"],
[28,8,2,9,"Trip to Paris"],
[22,11,22,11,"Party with colleagues"],
[20,12,30,12,"Christmas with family"]
];
function CheckDate(month,dayno)
{
var retval = new String(dayno);
var m = month + 1;
for(var app = 0; app < apps.length; app++)
{
if(m == apps[app][1] ) //first month
{
if(apps[app][3] - apps[app][1] > 0)
{
if(dayno >= apps[app][0])
{
retval = "<div class='hol' title='" + apps[app][4] + "'>" + dayno + "</div>";
}
}
else
{
if(dayno >= apps[app][0] && dayno <= apps[app][2])
{
retval = "<div class='hol' title='" + apps[app][4] + "'>" + dayno + "</div>";
}
}
}
else if(m == apps[app][3]) // second month
{
if(dayno <= apps[app][2])
{
retval = "<div class='hol' title='" + apps[app][4] + "'>" + dayno + "</div>";
}
}
else if( m > apps[app][1] && m < apps[app][3] )
{
retval = "<div class='hol' title='" + apps[app][4] + "'>" + dayno + "</div>";
}
}
return retval;
}
function PrintMonth(month)
{
var done = false;
var day = 0;
document.write("<table class='inner'><caption><b>" + months[month] + "</b></caption><thead>");
document.write("<th>Mon</th><th>Tue</th><th>Wed</th><th>Thu</th><th>Fri</th><th>Sat</th><th>Sun</th></thead>");
while(!done)
{
document.write("<tr>");
PrintWeek(month,day, firstdays[month], daycounts[month]);
document.write("</tr>");
day = day + 7;
if( day > daycounts[month] + firstdays[month])
{
done = true;
}
}
document.write("</tbody></table><p>");
}
function PrintWeek(monthno,start,min,max)
{
var d;
var desc;
for(var j = 0; j < 7; j++)
{
document.write("<td>");
d = start + j;
if(d >= min && d < max + min)
{
desc = CheckDate(monthno,d - min + 1);
document.write(desc);
}
document.write("</td>");
}
}
</script>
</HEAD>
<!-- STEP TWO: Copy this code into the BODY of your HTML document -->
<BODY>
<center><h1>2003 Calendar</h1></center>
Hold mouse over date to see message
<table>
<tr>
<td class="outer">
<script type="text/javascript">
PrintMonth(0);
</script>
</td>
<td class="outer">
<script type="text/javascript">
PrintMonth(1);
</script>
</td>
<td class="outer">
<script type="text/javascript">
PrintMonth(2);
</script>
</td>
</tr>
<tr>
<td class="outer">
<script type="text/javascript">
PrintMonth(3);
</script>
</td>
<td class="outer">
<script type="text/javascript">
PrintMonth(4);
</script>
</td>
<td class="outer">
<script type="text/javascript">
PrintMonth(5);
</script>
</td>
</tr>
<tr>
<td class="outer">
<script type="text/javascript">
PrintMonth(6);
</script>
</td>
<td class="outer">
<script type="text/javascript">
PrintMonth(7);
</script>
</td>
<td class="outer">
<script type="text/javascript">
PrintMonth(8);
</script>
</td>
</tr>
<tr>
<td class="outer">
<script type="text/javascript">
PrintMonth(9);
</script>
</td>
<td class="outer">
<script type="text/javascript">
PrintMonth(10);
</script>
</td>
<td class="outer">
<script type="text/javascript">
PrintMonth(11);
</script>
</td>
</tr>
</table>
<!-- Script Size: 5.48 KB -->
{ 0 comments... Views All / Send Comment! }
Post a Comment