The Dynamic Duo - Calendar Object

Calendar Object

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

Source Code

The code is available from calendar.js

// Calendar Object
// Copyright 1999 Dan Steinman
// Available at the Dynamic Duo (http://www.dansteinman.com/dynduo/)
// Jan 28, 1999.
// In order to use this code you must keep this disclaimer

function Calendar(x,y,hSpace,vSpace) {
	this.name = "Calendar"+(Calendar.count++)
	this.x = x
	this.y = y
	this.hSpace = hSpace
	this.vSpace = vSpace
	this.bgColor = '#e5e5e5'
	this.dayBarColor = '#c0c0c0'
	this.origDate = new Date()
	this.setDate = CalendarSetDate
	this.useDate = CalendarUseDate
	this.writeDate = CalendarWriteDate
	this.build = CalendarBuild
	this.activate = CalendarActivate
}
function CalendarBuild() {
	this.w = 7*this.hSpace
	this.h = 7*this.vSpace
	this.useDate(this.origDate)
	var days = new Array('Su','Mo','Tu','We','Th','Fr','Sa')

	this.css = css(this.name+'Cal',this.x,this.y,this.w,this.h,this.bgColor)+
	css(this.name+'CalDayBar',0,0,this.w,this.vSpace,this.dayBarColor)
	for (var i=0;i<7;i++) {
		this.css+=css(this.name+'CalDay'+days[i],this.hSpace*i,0)
	}
	var c = 0
	for (var i=0;i<6;i++) {
		for (var j=0;j<7;j++) {
			this.css+=css(this.name+'Cal'+(c++),this.hSpace*j,this.vSpace*(i+1))
		}
	}

	this.div = '<div id="'+this.name+'Cal">\n'+
	'<div id="'+this.name+'CalDayBar">\n'
	for (var i=0;i<7;i++) {
		this.div+='<div id="'+this.name+'CalDay'+days[i]+'" class="calDay">&nbsp;'+days[i]+'</div>\n'
	}
	this.div+='</div>\n'
	for (var i=0;i<42;i++) {
		this.div+='<div id="'+this.name+'Cal'+i+'">'+this.spotstr[i]+'</div>\n'
	}
	this.div+='</div>'
}
function CalendarActivate(show) {
	this.lyr = new DynLayer(this.name+'Cal')
	this.spot = new Array()
	for (var i=0;i<42;i++) {
		this.spot[i] = new DynLayer(this.name+'Cal'+i)
	}
}
function CalendarSetDate(month,day,year) {
	var date = new Date()
	if (month!=null) date.setMonth(month)
	if (day!=null) date.setDate(day)
	if (year!=null) {
		if (year>=2000) date.setYear(year)
		else date.setYear(year-1900)
	}
	this.useDate(date)
	this.writeDate()
}
function CalendarUseDate(date) {
	this.day = date.getDate()
	this.weekday = date.getDay()
	this.month = date.getMonth()
	this.year = parseInt(date.getYear())
	if (this.year<2000) this.year+=1900
	
	date.setDate(1)
	this.calshift = date.getDay()

	var monthlength = new Array(31,29,31,30,31,30,31,31,30,31,30,31)
	if (this.year/4==Math.floor(this.year/4) || this.year/400==Math.floor(this.year/400)) {
		monthlength[2] = 28
	}
	daycount = monthlength[this.month]
	var m = (this.month==0)? 11 : this.month-1
	calstart = monthlength[m]-this.calshift+1
	
	if (this.month==2) calstart=28
	
	this.spotstr = new Array()
	for (var i=0;i<this.calshift;i++) {
		this.spotstr[i] = '<div class="calShaded">&nbsp;'+(calstart+i)+'</div>'
	}
	for (var i=this.calshift;i<daycount+this.calshift;i++) {
		var day = i-this.calshift+1
		var str = (day==this.day)? 'calHighlighted':'calNormal'
		if (day<10) day = '&nbsp;'+day
		this.spotstr[i] = '<div class="'+str+'">&nbsp;'+day+'</div>'
	}
	var c = 1
	for (var i=daycount+this.calshift;i<42;i++) {
		var day = c++
		if (day<10) day = '&nbsp;'+day
		this.spotstr[i] = '<div class="calShaded">&nbsp;'+day+'</div>'
	}
}
function CalendarWriteDate() {
	for (var i=0;i<42;i++) {
		this.spot[i].write(this.spotstr[i])
	}
}
Calendar.count = 0

View calendar1.html for a calendar example, that allows you to selectively choose which date to show. View Source Code