Calendar

Calendar
Prev	1. XUL Components	Next

Calendar is stuck by Javascript.

The calendar is constructed by the three HTML tables as follows.

CSS Definition	Description	Default Values
`table.calendar`	`The outline of calendar`	`background: white; border: 1px solid #7F9DB9;`
`table.calyear`	`The outline of elect year`	`background: #eaf0f4; border: 1px solid; border-color: #f8fbff #aca899 #aca899 #f8fbff;`
`table.calmon`	`The outline of elect mon` `th`
`table.calday`	`The outline of elect day`	`border: 1px solid #ddd;`

CSS Definition	Description	Default Values
`table.calyear td`	`The description` `of year`	`font-size: small; font-weight: bold; text-align: center;` `white-space: nowrap;`

CSS Definition

Description

Default Values

table.calmon td

The outline of elect mon th

font-size: x-small; color: #35254F; text-align: center;

cursor: pointer; text-decoration: none;

table.calmon td.seld

The outline of selected day

background: #bbd1ed; border: 1px solid #aac6e9;

CSS Definition

Description

Default Values

tr.caldow

The row outline of day of work

tr.caldow td

The outline of day of work

font-size: x-small; color: #333; font-weight: bold;

padding: 1px 2px; background: #e8e8f0; text-align: center;

CSS Definition	Description	Default Values
`tr.calday td`	`The outline of elect` `day`	`font-size: x-small; color: #35254F; text-align: center;` `cursor: pointer; text-decoration: none;`
`tr.calday td a`	`The outline of 'a' tag of elect` `day`	`font-size: x-small; color: #35254F; text-align: center;` `cursor: pointer; text-decoration: none;`
`tr.calday td a:visited`	`The outline of 'a' tag of elect day` `at visited time`	`font-size: x-small; color: #35254F; text-align: center;` `cursor: pointer; text-decoration: none;`
`tr.calday td a:hover`	`The outline of` `hover day`	`text-decoration: underline;`
`tr.calday td`	`The outline of elect day`	`padding: 1px 3px;`
`tr.calday td.seld`	`The outline of selected day`	`background: #bbd1ed; border: 1px solid #aac6e9;`
`tr.calday td.dis`	`The outline of disabled day`	`color: #888;`

The way to customize the background of Calendar is change color as follows.

table.calyear {

    background: #F8AAFF; border: 1px solid;

Prev	Up	Next
Button	Home	Caption