Displaying the Calendar : Calendar : GUI Components JAVASCRIPT DHTML TUTORIALS


JAVASCRIPT DHTML TUTORIALS » GUI Components » Calendar »

 

Displaying the Calendar




/*
Mastering JavaScript, Premium Edition
by James Jaworski 

ISBN:078212819X
Publisher Sybex CopyRight 2001
*/
<HTML>
<HEAD>
<TITLE>Monthly Calendar</TITLE>
<SCRIPT LANGUAGE="JavaScript" ><!--
function Calendar() {
 var len = Calendar.arguments.length
 if(len == 2){
  this.month = Calendar.arguments[0]
  this.year = Calendar.arguments[1]
 }else{
  today = new Date()
  this.month = today.getMonth()
  this.year = today.getFullYear()
 }
 this.display = displayCalendar
}
   
function displayCalendar() {
 document.writeln("<TABLE BORDER='0' BGCOLOR='white'>")
 displayCalendarHeader(this.month,this.year)
 if(displayCalendar.arguments.length>0){
  var day = displayCalendar.arguments[0]-1
  displayDates(day,this.month,this.year,true)
 }else displayDates(0,this.month,this.year,false)
 document.writeln("</TABLE>")
}
   
function displayCalendarHeader(month,year) {
 var days = new Array("Sun","Mon","Tue","Wed","Thu",
  "Fri","Sat")
 var months = new Array("January","February","March","April",
  "May","June","July","August","September","October",
  "November","December")
 document.writeln("<TR><TH COLSPAN='7'><H2 ALIGN='CENTER'>")
 document.writeln(months[month])
 document.writeln(year+"</H2></TH></TR>")
 document.writeln("<TR>")
 for(var i=0;i<days.length;++i)
  document.writeln("<TH> "+days[i]+" </TH>")
 document.writeln("</TR>")
}
   
function displayDates(day,month,year,shade) {
 d = new Date(year,month,1)
 var startDay = d.getDay()
 var numDays = numberOfDays(month,year)
 var numRows = Math.floor((numDays+startDay)/7)
 if((numDays+startDay)%1++numRows
 var currentDate=0
 for(var i=0;i<numRows;++i) {
  document.writeln("<TR>")
  for(var j=0;j<7;++j) {
   if(shade && day==currentDate)
    document.write("<TD BGCOLOR='red'>")
   else document.write("<TD>")
   if(currentDate>=numDaysdocument.write("&nbsp")
   else if(currentDate>0){
    ++currentDate
    writeDate(currentDate)
   }else if(i*7+j>=startDay){
    ++currentDate
    writeDate(currentDate)
   }else document.write("&nbsp")
   document.writeln("</TD>")
  }
  document.writeln("</TR>")
 }
}
   
function numberOfDays(month,year) {
 var numDays=new Array(31,28,31,30,31,30,31,31,30,31,30,31)
 n = numDays[month]
 if(month == && year % == 0++n
 return n
}
   
function writeDate(n) {
 document.write("<H3 ALIGN='CENTER'>"+n+"</H3>")
}
// --></SCRIPT>
</HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript"><!--
cal=new Calendar()
cal.display()
// --></SCRIPT>
</BODY>
</HTML>

           
       



-

Leave a Comment / Note


 
Verification is used to prevent unwanted posts (spam). .

Follow Navioo On Twitter

JAVASCRIPT DHTML TUTORIALS

 Navioo GUI Components
» Calendar