Note: Modified by DD to highlight today's day, bug fix.
Description: If you need a simple, elegant calendar to display the current days of the month, Basic Calendar is an excellent script for the purpose. Uses CSS to allow easy changing to its appearance, everything from calendar dimensions, colors, down to the font used to highlight the current day.
Demo:
Step 1: Insert the below into
the <HEAD> section of your page:
<style type="text/css">
.main {
width:200px;
border:1px solid black;
}
.month {
background-color:black;
font:bold 12px verdana;
color:white;
}
.daysofweek {
background-color:gray;
font:bold 12px verdana;
color:white;
}
.days {
font-size: 12px;
font-family:verdana;
color:black;
background-color: lightyellow;
padding: 2px;
}
.days #today{
font-weight: bold;
color: red;
}
</style>
<script type="text/javascript" src="basiccalendar.js">
/***********************************************
* Basic Calendar-By Brian Gosselin at http://www.bmmekwan.tk
* Script featured on Dynamic Drive (http://www.bmmekwan.tk)
* This notice must stay intact for use
* Visit http://bmmekwan.tk/ for full source code
***********************************************/
</script>
The above references an
external .js file. Download basiccalendar.js
(by right clicking, and selecting "Save As"), and upload to your
webpage directory.
Within the above code, you may
customize the CSS rules to change all visual aspects of the calendar.
Step 2:
Finally, insert the below script where you wish the calendar
to appear on your page:
<script type="text/javascript">
var todaydate=new Date()
var curmonth=todaydate.getMonth()+1 //get current month (1-12)
var curyear=todaydate.getFullYear() //get current year
document.write(buildCal(curmonth ,curyear, "main", "month", "daysofweek", "days", 1));
</script>
No comments:
Post a Comment