I was looking round every where for a simple calendar, but they are always complicated PHP ones that look yucky. So I decided to create simple ones that you can easily update every month by copying and pasting the code below the calendar you want. But first of all you need to copy and paste this code Right after the body tag...this won't have to be changed every time you change the month for your calendar

// Correct Year for year 2000+
        if (strYear < 1000)
            strYear += 1900;

// Get WeekDay
        switch(strWeekday)
        {
            case 0:
                strWeekday = "Sunday";
                break;
            case 1:
                strWeekday = "Monday";
                break;
            case 2:
                strWeekday = "Tuesday";
                break;
            case 3:
                strWeekday = "Wednesday";
                break;
            case 4:
                strWeekday = "Thursday";
                break;
            case 5:
                strWeekday = "Friday";
                break;
            case 6:
                strWeekday = "Saturday";
                break;
        }
    
        // Get Month
        switch(strMonth)
        {
            case 0:
                strMonth = "Jan"
                break;
            case 1:
                strMonth = "Feb"
                break;
            case 2:
                strMonth = "Mar"
                break;
            case 3:
                strMonth = "Apr"
                break;
            case 4:
                strMonth = "May"
                break;
            case 5:
                strMonth = "Jun"
                break;
            case 6:
                strMonth = "Jul"
                break;
            case 7:
                strMonth = "Aug"
                break;
            case 8:
                strMonth = "Sept"
                break;
            case 9:
                strMonth = "Oct"
                break;
            case 10:
                strMonth = "Nov"
                break;
            case 11:
                strMonth = "Dec"
                break;
        }

document.write (strWeekday + " " + strToday + " " + strMonth + " " + strYear);
    }
    //]]>-->
    </script>
    <script type="text/javascript">

/***********************************************
* Scrolling Tooltip Script- © Dynamic Drive (www.dynamicdrive.com)
* This notice must stay intact for use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/

function ietruebody(){ //Dynamicdrive added function
return (document.compatMode!="BackCompat")? document.documentElement : document.body
}

if (!document.layers&&!document.all)
event="test"
function showtip2(current,e,text){

if (document.all&&document.readyState=="complete"){
document.all.tooltip2.innerHTML=''+text+''
document.all.tooltip2.style.pixelLeft=event.clientX+ietruebody().scrollLeft+4
document.all.tooltip2.style.pixelTop=event.clientY+ietruebody().scrollTop+4
document.all.tooltip2.style.visibility="visible"
}

else if (document.layers){
document.tooltip2.document.nstip.document.write('<b>'+text+'</b>')
document.tooltip2.document.nstip.document.close()
document.tooltip2.document.nstip.left=0
currentscroll=setInterval("scrolltip()",100)
document.tooltip2.left=e.pageX+4
document.tooltip2.top=e.pageY+4
document.tooltip2.visibility="show"
}
}
function hidetip2(){
if (document.all)
document.all.tooltip2.style.visibility="hidden"
else if (document.layers){
clearInterval(currentscroll)
document.tooltip2.visibility="hidden"
}
}

function scrolltip(){
if (document.tooltip2.document.nstip.left>=-document.tooltip2.document.nstip.document.width)
document.tooltip2.document.nstip.left-=5
else
document.tooltip2.document.nstip.left=150
}

</script>

<div id="tooltip2" style="position:absolute;visibility:hidden;clip:rect(0 150 50 0);width:100px;align:justify;padding:2pt;z-index:10" class="footer">
<layer name="nstip"></layer>
</div>
<style>
.header{
font-weight:bold;
font-size:7pt;
font-family:verdana;
color:white;
background:#39ADFF;
border:1pt solid #0997FB}

.footer{
font-weight:bold;
font-size:7pt;
font-family:verdana;
color:white;
background:#93D1FD;
border:1pt solid #0997FB}

.td{font-size:7pt;
color: #0997FB;
font-family:verdana;
background:white;
border:1pt solid #0997FB}

a{font-weight:bold; color:#0584DD}

</style>

These are javascripts for the tooltip and today's date script. Once you have pasted this, edit the CSS down the bottom where it says  Then simply choose a calendar below, with the correct month on and paste it where you want it to show on your page you will find the following css classes:

.header{ changes the look of the days
.footer{ changes the look of the tooltip, Month, and today's date
.td{ changes the look of the main part of the calendars with the days on
.a{ changes the style of the text that has a tooltip event

Using the tooltip script to add events

This is simple, when you have added the calendar, find your day in the HTML code and add <A onMouseover="showtip2(this,event,'Write your text for the even here')" onMouseout="hidetip2()"> before the number and </A> after