calendar

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>


Customizing, Properties and Methods

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()


w (integer)
returns the width of the calendar (after build)
h (integer)
returns the height of the calendar (after build)
bgColor (hexidecimal)
background color, default is '#e5e5e5'
dayBarColor (hexidecimal)
background color of the bar with the day names, default is '#c0c0c0'
origDate (Date)
the first date to show on the calendar, default is new Date() (the current date). This must be a Date object.

Methods:

There's only 2 you should ever need to use


useDate(date)
enters a new date to be written to the Calendar (after you build). The date sent must be a Date object.
setDate(month,day,year)
a simpler method for setting the date for the calendar to show. Just send the the month, day, and year (4 digit year), and it'll set up the Date object and send it to the useDate() method for you. It'll even do a Y2K conversion for you. Any of these values may be set to null, and it will use the current month, day, or year:

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

Source Code

Download:

View Source:


Home



copyright 1998 Dan Steinman