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
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"> '+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"> '+(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 = ' '+day this.spotstr[i] = '<div class="'+str+'"> '+day+'</div>' } var c = 1 for (var i=daycount+this.calshift;i<42;i++) { var day = c++ if (day<10) day = ' '+day this.spotstr[i] = '<div class="calShaded"> '+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
Home |