Displaying the Calendar : Calendar « GUI Components « JavaScript DHTML

Displaying the Calendar


Mastering JavaScript, Premium Edition
by James Jaworski 

Publisher Sybex CopyRight 2001
<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]
  today = new Date()
  this.month = today.getMonth()
  this.year = today.getFullYear()
 this.display = displayCalendar
function displayCalendar() {
 document.writeln("<TABLE BORDER='0' BGCOLOR='white'>")
  var day = displayCalendar.arguments[0]-1
 }else displayDates(0,this.month,this.year,false)
function displayCalendarHeader(month,year) {
 var days = new Array("Sun","Mon","Tue","Wed","Thu",
 var months = new Array("January","February","March","April",
 document.writeln("<TR><TH COLSPAN='7'><H2 ALIGN='CENTER'>")
 for(var i=0;i<days.length;++i)
  document.writeln("<TH> "+days[i]+" </TH>")
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)%7 > 1) ++numRows
 var currentDate=0
 for(var i=0;i<numRows;++i) {
  for(var j=0;j<7;++j) {
   if(shade && day==currentDate)
    document.write("<TD BGCOLOR='red'>")
   else document.write("<TD>")
   if(currentDate>=numDays) document.write("&nbsp")
   else if(currentDate>0){
   }else if(i*7+j>=startDay){
   }else document.write("&nbsp")
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 == 1 && year % 4 == 0) ++n
 return n
function writeDate(n) {
 document.write("<H3 ALIGN='CENTER'>"+n+"</H3>")
// --></SCRIPT>
<SCRIPT LANGUAGE="JavaScript"><!--
cal=new Calendar()
// --></SCRIPT>


Related examples in the same category

1.HTML Calendar based on DynAPI
2.JavaScript Date Picker based on ComboBox
3.Calendar Control - Single-Select Implementation
4.Calendar Control - 2-Up Implementation
5.Calendar Control - Handling onSelect / onDeselect
6.Calendar Control - Mix/Max Implementation
7.Calendar Control - Multi-Select Implementation
8.Calendar Control - Multi-Select 2-up Implementation
9.Calendar Control - Custom Renderer Example (Holiday Renderer Implementation)
10.Calendar Control - Date Restriction Example (Date Restriction Implementation)
11.Calendar Control - Row Highlight Example (Row Highlight Implementation)
12.Popup calendar
13.Month Calendar
14.Popup Calendar for a textfield
15.Multiselection Calendar
16.Free Date Picker : An easy plugin to add a date picker (calendar) in your web site
17.HTML Date Picker
18.Date Picker in new window
19.All browser Calendar
20.DHTML Calendar for the impatient
21.Calendar: special day
22.Calendar: day info
23.Calendar: Multiple day selection
24.Calendar with different theme
25.Calendar with image for each month
26.Fancy Calendar
27.Another Calendar
28.Date Time Picker
29.Month Calendar (2)
30.Building a Calculator
31.A Dynamic Calendar Table
32.Dynamic HTML Calendar
33. A Static Calendar by JavaScript
34.Calendar (IE only)
35.Calendar in slide tab
36.Another DHTML Calendar
37.Event Calendar
38.Open calendar
39.swazz calendar 1.0
40.jquery calendar