A Static Calendar by JavaScript : JavaScript DHTML examples (example source code) » GUI Components » Calendar

JavaScript DHTML










Java Products
Java Articles
JavaScript DHTML Home  »   GUI Components   » [  Calendar  ]   

 
A Static Calendar by JavaScript

Please note that some example is only working under IE or Firefox.



/*
JavaScript Bible, Fourth Edition
by Danny Goodman 

John Wiley & Sons CopyRight 2001
*/

<HTML>
<HEAD>
<TITLE>JavaScripted Static Table</TITLE>
<SCRIPT LANGUAGE="JavaScript">
// function becomes a method for each month object
function getFirstDay(theYear, theMonth){
    var firstDate = new Date(theYear,theMonth,1)
    return firstDate.getDay() 1
}
// number of days in the month
function getMonthLen(theYear, theMonth) {
    var oneDay = 1000 60 60 24
    var thisMonth = new Date(theYear, theMonth, 1)
    var nextMonth = new Date(theYear, theMonth + 11)
    var len = Math.ceil((nextMonth.getTime() 
        thisMonth.getTime())/oneDay)
    return len
}
// correct for Y2K anomalies
function getY2KYear(today) {
    var yr = today.getYear()
    return ((yr < 1900? yr+1900 : yr)
}
// create basic array
theMonths = new MakeArray(12)
// load array with English month names
function MakeArray(n) {
    this[0"January"
    this[1"February"
    this[2"March"
    this[3"April"
    this[4"May"
    this[5"June"
    this[6"July"
    this[7"August"
    this[8"September"
    this[9"October"
    this[10"November"
    this[11"December"
    this.length = n
    return this
}
// end -->
</SCRIPT>
</HEAD>

<BODY>
<H1>Month at a Glance (Static)</H1>
<HR>
<SCRIPT LANGUAGE="JavaScript">
<!-- start
// initialize some variables for later
var today = new Date()
var theYear = getY2KYear(today)
var theMonth = today.getMonth() // for index into our array

// which is the first day of this month?
var firstDay = getFirstDay(theYear, theMonth)
// total number of <TD>...</TD> tags needed in for loop below
var howMany = getMonthLen(theYear, theMonth+ firstDay

// start assembling HTML for table
var content = "<CENTER><TABLE BORDER>"
// month and year display at top of calendar
content += "<TR><TH COLSPAN=7>" + theMonths[theMonth" " + theYear + "</TH></TR>"
// days of the week at head of each column
content += "<TR><TH>Sun</TH><TH>Mon</TH><TH>Tue</TH><TH>Wed</TH>"
content += "<TH>Thu</TH><TH>Fri</TH><TH>Sat</TH></TR>"
content += "<TR>"

// populate calendar
for (var i = 1; i < howMany; i++) {
    if (i < firstDay) {
        // 'empty' boxes prior to first day
        content += "<TD></TD>"
    else {
        // enter date number
        content += "<TD ALIGN='center'>" (i - firstDay + 1"</TD>"
    }
    // start new row after each week
    if (i % == &&  i != howMany) {
        content += "</TR><TR>"
    }
}
content += "</TABLE></CENTER>"

// blast entire table's HTML to the document
document.write(content)
// end -->
</SCRIPT>
</BODY>
</HTML>
Related examples in the same category
1.  Date Picker in new window
2.  All browser Calendar
3.  DHTML Calendar for the impatient
4.  Calendar: special day
5.  Calendar: day info
6.  Calendar: Multiple day selection
7.  Calendar with different theme
8.  Calendar with image for each month
9.  Fancy Calendar
10.  Another Calendar
11.  Date Time Picker
12.  Month Calendar
13.  Building a Calculator
14.  A Dynamic Calendar Table
15.  Dynamic HTML Calendar
16.  Displaying the Calendar
17.  Calendar (IE only)
18.  Calendar in slide tab
19.  Another DHTML Calendar
20.  Event Calendar








Home| Contact Us
Copyright 2003 - 04 Demo Source and Support. All rights reserved.
All other trademarks are property of their respective owners.