The calendar object will create make a customizable DHTML calendar:
It is totally dynamic, you can change which month, day, and year is displayed.
Creating a Calendar:
objectName = new Calendar(x,y,hSpace,vSpace)hSpace and vSpace are the horizontal width and vertical height of each "cell" respectively. The total width and total height of the calendar is the resultant of these values - 7 columns wide, 7 rows tall.
Just do the usual build, css, div, activate sequence:
Example:
function init() { mycalendar.activate() } mycalendar = new Calendar(150,30,27.18) mycalendar.build() writeCSS ( mycalendar.css ) <script language="javascript"> document.write(mycalendar.div) </script>
The background colors are set through the object itself. But the font size and font colors are set throught the following CSS classes that can be inserted into the page and changed to whatever properties you want:
<style type="text/css"> <!-- .calDay {font-family:Helvetica; font-size:12pt; color:#000000;} .calNormal {font-family:Helvetica; font-size:12pt; color:#000000;} .calShaded {font-family:Helvetica; font-size:12pt; color:#B0B0B0;} .calHighlighted {font-family:Helvetica; font-size:12pt; color:#FF0000;} --> </style>
Properties:
With the exception of w and h, the properties must be set before you build()
Methods:
There's only 2 you should ever need to use
mycalendar.setDate(0) // sets to current year and day, but January
View calendar1.html for a calendar example, that allows you to selectively choose which date to show. View Source Code
Download: calendar.js
View Source: calendar.js
Home |