calendar - JavaScript Vision

Displays a calendar highlighting the day of the month.

Syntax

JSV_calendar([expD, expT])

Prototype

expD.calendar([expT])

Returns

n/a

Parameters

The calendar function uses the following arguments.

Argument	Description
expD	Date object that determines the calendar to be displayed.
expT	Optional. The calendar table attributes, e.g., width border cellspacing cellpadding align bordercolor bgcolor If used, these attributes should be delimited with their values by a semicolon and each attribute/value pair should also be delimited from the other attributes by a semicolon. For example, `width:90%:border:1:cellspacing:3:cellpadding:bordercolor:#000000`

Remarks

Rather than programmatically controlling all of the table and font characteristics (i.e., as JavaScript variables or parameters to the JSV_calendar function), the means to control these characteristics can be accomplished by using an embedded or external style sheet (see example below).

Class	Description
jsvCalendarTable	The properties for this class apply to the overall appearance of the table.
jsvCalendarHeader	The properties for this class apply to the calendar header where the month and year appear.
jsvCalendarDayHeader	The properties for this class apply to the calendar header where the day names appear.
jsvCalendarDay	The properties for this class apply to the calendar days (i.e., table cells where a day appears).
jsvCurrentDay	The properties for this class apply to the current day or the day specified in `expD` (i.e., the table cell where the highlighted day appears).
jsvBlankCells	The properties for this class apply to non-calendar days (i.e., table cells where no day appears).

Also, an option has been provided to programmatically control the table characteristics through the use of the expT parameter of the the JSV_calendar function (see example below).

Dependencies

JSV_isLeapYear, JSV_cMonth, JSV_getFullYear

Example

The following lines of code


var dateToday = new Date();
var tableProperties = "width:50%:border:1:cellspacing:2:cellpadding:2";
JSV_calendar( dateToday, tableProperties );

along with the following embedded style sheet


<STYLE TYPE="text/css">
.jsvCalendarTable {
    font-size : 10pt;
    font-family : Verdana,Arial,Helvetica;
}
.jsvCalendarHeader  {
    font-size : 10pt;
    font-family : Verdana,Arial,Helvetica;
    font-weight : bold;
    text-align : center;
    font-style : normal;
    color : White;
    background-color : #800000;
}
.jsvCalendarDayHeader {
    font-size : 10pt;
    font-family : Verdana,Arial,Helvetica;
    font-weight : bold;
    text-align : center;
    font-style : normal;
    color : White;
    background-color : Black;
}
.jsvCalendarDay {
    font-size : 10pt;
    font-family : Verdana,Arial,Helvetica;
    font-weight : normal;
    text-align : center;
    font-style : normal;
    color : Black;
    background-color : White;
}
.jsvCurrentDay {
    font-size : 10pt;
    font-family : Verdana,Arial,Helvetica;
    font-weight : normal;
    text-align : center;
    font-style : normal;
    color : White;
    background-color : #800000;
}
.jsvBlankCells {
    font-size : 10pt;
    font-family : Verdana,Arial,Helvetica;
    font-weight : bold;
    text-align : center;
    font-style : normal;
    color : Black;
    background-color : White;
}
</STYLE>

produce