Latest SANDPIT - MERGE from CVS (MERGE-GIT)
This commit is contained in:
Deon George
@@ -1,236 +0,0 @@
|
||||
/* The main calendar widget. DIV containing a table. */
|
||||
|
||||
div.calendar { position: relative; }
|
||||
|
||||
.calendar, .calendar table {
|
||||
border: 1px solid #206A9B;
|
||||
font-size: 11px;
|
||||
color: #000;
|
||||
cursor: default;
|
||||
background: #F1F8FC;
|
||||
font-family: tahoma,verdana,sans-serif;
|
||||
}
|
||||
|
||||
/* Header part -- contains navigation buttons and day names. */
|
||||
|
||||
.calendar .button { /* "<<", "<", ">", ">>" buttons have this class */
|
||||
text-align: center; /* They are the navigation buttons */
|
||||
padding: 2px; /* Make the buttons seem like they're pressing */
|
||||
}
|
||||
|
||||
.calendar .nav {
|
||||
background: #007ED1 url(menuarrow2.gif) no-repeat 100% 100%;
|
||||
}
|
||||
|
||||
.calendar thead .title { /* This holds the current "month, year" */
|
||||
font-weight: bold; /* Pressing it will take you to the current date */
|
||||
text-align: center;
|
||||
background: #000;
|
||||
color: #fff;
|
||||
padding: 2px;
|
||||
}
|
||||
|
||||
.calendar thead tr { /* Row <TR> containing navigation buttons */
|
||||
background: #007ED1;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.calendar thead .daynames { /* Row <TR> containing the day names */
|
||||
background: #C7E1F3;
|
||||
}
|
||||
|
||||
.calendar thead .name { /* Cells <TD> containing the day names */
|
||||
border-bottom: 1px solid #206A9B;
|
||||
padding: 2px;
|
||||
text-align: center;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.calendar thead .weekend { /* How a weekend day name shows in header */
|
||||
color: #a66;
|
||||
}
|
||||
|
||||
.calendar thead .hilite { /* How do the buttons in header appear when hover */
|
||||
background-color: #34ABFA;
|
||||
color: #000;
|
||||
border: 1px solid #016DC5;
|
||||
padding: 1px;
|
||||
}
|
||||
|
||||
.calendar thead .active { /* Active (pressed) buttons in header */
|
||||
background-color: #006AA9;
|
||||
border: 1px solid #008AFF;
|
||||
padding: 2px 0px 0px 2px;
|
||||
}
|
||||
|
||||
/* The body part -- contains all the days in month. */
|
||||
|
||||
.calendar tbody .day { /* Cells <TD> containing month days dates */
|
||||
width: 2em;
|
||||
color: #456;
|
||||
text-align: right;
|
||||
padding: 2px 4px 2px 2px;
|
||||
}
|
||||
.calendar tbody .day.othermonth {
|
||||
font-size: 80%;
|
||||
color: #bbb;
|
||||
}
|
||||
.calendar tbody .day.othermonth.oweekend {
|
||||
color: #fbb;
|
||||
}
|
||||
|
||||
.calendar table .wn {
|
||||
padding: 2px 3px 2px 2px;
|
||||
border-right: 1px solid #000;
|
||||
background: #C7E1F3;
|
||||
}
|
||||
|
||||
.calendar tbody .rowhilite td {
|
||||
background: #def;
|
||||
}
|
||||
|
||||
.calendar tbody .rowhilite td.wn {
|
||||
background: #F1F8FC;
|
||||
}
|
||||
|
||||
.calendar tbody td.hilite { /* Hovered cells <TD> */
|
||||
background: #def;
|
||||
padding: 1px 3px 1px 1px;
|
||||
border: 1px solid #8FC4E8;
|
||||
}
|
||||
|
||||
.calendar tbody td.active { /* Active (pressed) cells <TD> */
|
||||
background: #cde;
|
||||
padding: 2px 2px 0px 2px;
|
||||
}
|
||||
|
||||
.calendar tbody td.selected { /* Cell showing today date */
|
||||
font-weight: bold;
|
||||
border: 1px solid #000;
|
||||
padding: 1px 3px 1px 1px;
|
||||
background: #fff;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.calendar tbody td.weekend { /* Cells showing weekend days */
|
||||
color: #a66;
|
||||
}
|
||||
|
||||
.calendar tbody td.today { /* Cell showing selected date */
|
||||
font-weight: bold;
|
||||
color: #D50000;
|
||||
}
|
||||
|
||||
.calendar tbody .disabled { color: #999; }
|
||||
|
||||
.calendar tbody .emptycell { /* Empty cells (the best is to hide them) */
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.calendar tbody .emptyrow { /* Empty row (some months need less than 6 rows) */
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* The footer part -- status bar and "Close" button */
|
||||
|
||||
.calendar tfoot .footrow { /* The <TR> in footer (only one right now) */
|
||||
text-align: center;
|
||||
background: #206A9B;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.calendar tfoot .ttip { /* Tooltip (status bar) cell <TD> */
|
||||
background: #000;
|
||||
color: #fff;
|
||||
border-top: 1px solid #206A9B;
|
||||
padding: 1px;
|
||||
}
|
||||
|
||||
.calendar tfoot .hilite { /* Hover style for buttons in footer */
|
||||
background: #B8DAF0;
|
||||
border: 1px solid #178AEB;
|
||||
color: #000;
|
||||
padding: 1px;
|
||||
}
|
||||
|
||||
.calendar tfoot .active { /* Active (pressed) style for buttons in footer */
|
||||
background: #006AA9;
|
||||
padding: 2px 0px 0px 2px;
|
||||
}
|
||||
|
||||
/* Combo boxes (menus that display months/years for direct selection) */
|
||||
|
||||
.calendar .combo {
|
||||
position: absolute;
|
||||
display: none;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
width: 4em;
|
||||
cursor: default;
|
||||
border: 1px solid #655;
|
||||
background: #def;
|
||||
color: #000;
|
||||
font-size: 90%;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.calendar .combo .label,
|
||||
.calendar .combo .label-IEfix {
|
||||
text-align: center;
|
||||
padding: 1px;
|
||||
}
|
||||
|
||||
.calendar .combo .label-IEfix {
|
||||
width: 4em;
|
||||
}
|
||||
|
||||
.calendar .combo .hilite {
|
||||
background: #34ABFA;
|
||||
border-top: 1px solid #46a;
|
||||
border-bottom: 1px solid #46a;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.calendar .combo .active {
|
||||
border-top: 1px solid #46a;
|
||||
border-bottom: 1px solid #46a;
|
||||
background: #F1F8FC;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.calendar td.time {
|
||||
border-top: 1px solid #000;
|
||||
padding: 1px 0px;
|
||||
text-align: center;
|
||||
background-color: #E3F0F9;
|
||||
}
|
||||
|
||||
.calendar td.time .hour,
|
||||
.calendar td.time .minute,
|
||||
.calendar td.time .ampm {
|
||||
padding: 0px 3px 0px 4px;
|
||||
border: 1px solid #889;
|
||||
font-weight: bold;
|
||||
background-color: #F1F8FC;
|
||||
}
|
||||
|
||||
.calendar td.time .ampm {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.calendar td.time .colon {
|
||||
padding: 0px 2px 0px 3px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.calendar td.time span.hilite {
|
||||
border-color: #000;
|
||||
background-color: #267DB7;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.calendar td.time span.active {
|
||||
border-color: red;
|
||||
background-color: #000;
|
||||
color: #A5FF00;
|
||||
}
|
||||
@@ -1,225 +0,0 @@
|
||||
/* The main calendar widget. DIV containing a table. */
|
||||
|
||||
div.calendar { position: relative; }
|
||||
|
||||
.calendar, .calendar table {
|
||||
border: 1px solid #655;
|
||||
font-size: 11px;
|
||||
color: #000;
|
||||
cursor: default;
|
||||
background: #ffd;
|
||||
font-family: tahoma,verdana,sans-serif;
|
||||
}
|
||||
|
||||
/* Header part -- contains navigation buttons and day names. */
|
||||
|
||||
.calendar .button { /* "<<", "<", ">", ">>" buttons have this class */
|
||||
text-align: center; /* They are the navigation buttons */
|
||||
padding: 2px; /* Make the buttons seem like they're pressing */
|
||||
}
|
||||
|
||||
.calendar .nav {
|
||||
background: #edc url(menuarrow.gif) no-repeat 100% 100%;
|
||||
}
|
||||
|
||||
.calendar thead .title { /* This holds the current "month, year" */
|
||||
font-weight: bold; /* Pressing it will take you to the current date */
|
||||
text-align: center;
|
||||
background: #654;
|
||||
color: #fed;
|
||||
padding: 2px;
|
||||
}
|
||||
|
||||
.calendar thead .headrow { /* Row <TR> containing navigation buttons */
|
||||
background: #edc;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.calendar thead .name { /* Cells <TD> containing the day names */
|
||||
border-bottom: 1px solid #655;
|
||||
padding: 2px;
|
||||
text-align: center;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.calendar thead .weekend { /* How a weekend day name shows in header */
|
||||
color: #f00;
|
||||
}
|
||||
|
||||
.calendar thead .hilite { /* How do the buttons in header appear when hover */
|
||||
background-color: #faa;
|
||||
color: #000;
|
||||
border: 1px solid #f40;
|
||||
padding: 1px;
|
||||
}
|
||||
|
||||
.calendar thead .active { /* Active (pressed) buttons in header */
|
||||
background-color: #c77;
|
||||
padding: 2px 0px 0px 2px;
|
||||
}
|
||||
|
||||
.calendar thead .daynames { /* Row <TR> containing the day names */
|
||||
background: #fed;
|
||||
}
|
||||
|
||||
/* The body part -- contains all the days in month. */
|
||||
|
||||
.calendar tbody .day { /* Cells <TD> containing month days dates */
|
||||
width: 2em;
|
||||
text-align: right;
|
||||
padding: 2px 4px 2px 2px;
|
||||
}
|
||||
.calendar tbody .day.othermonth {
|
||||
font-size: 80%;
|
||||
color: #bbb;
|
||||
}
|
||||
.calendar tbody .day.othermonth.oweekend {
|
||||
color: #fbb;
|
||||
}
|
||||
|
||||
.calendar table .wn {
|
||||
padding: 2px 3px 2px 2px;
|
||||
border-right: 1px solid #000;
|
||||
background: #fed;
|
||||
}
|
||||
|
||||
.calendar tbody .rowhilite td {
|
||||
background: #ddf;
|
||||
}
|
||||
|
||||
.calendar tbody .rowhilite td.wn {
|
||||
background: #efe;
|
||||
}
|
||||
|
||||
.calendar tbody td.hilite { /* Hovered cells <TD> */
|
||||
background: #ffe;
|
||||
padding: 1px 3px 1px 1px;
|
||||
border: 1px solid #bbb;
|
||||
}
|
||||
|
||||
.calendar tbody td.active { /* Active (pressed) cells <TD> */
|
||||
background: #ddc;
|
||||
padding: 2px 2px 0px 2px;
|
||||
}
|
||||
|
||||
.calendar tbody td.selected { /* Cell showing today date */
|
||||
font-weight: bold;
|
||||
border: 1px solid #000;
|
||||
padding: 1px 3px 1px 1px;
|
||||
background: #fea;
|
||||
}
|
||||
|
||||
.calendar tbody td.weekend { /* Cells showing weekend days */
|
||||
color: #f00;
|
||||
}
|
||||
|
||||
.calendar tbody td.today { font-weight: bold; }
|
||||
|
||||
.calendar tbody .disabled { color: #999; }
|
||||
|
||||
.calendar tbody .emptycell { /* Empty cells (the best is to hide them) */
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.calendar tbody .emptyrow { /* Empty row (some months need less than 6 rows) */
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* The footer part -- status bar and "Close" button */
|
||||
|
||||
.calendar tfoot .footrow { /* The <TR> in footer (only one right now) */
|
||||
text-align: center;
|
||||
background: #988;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.calendar tfoot .ttip { /* Tooltip (status bar) cell <TD> */
|
||||
border-top: 1px solid #655;
|
||||
background: #dcb;
|
||||
color: #840;
|
||||
}
|
||||
|
||||
.calendar tfoot .hilite { /* Hover style for buttons in footer */
|
||||
background: #faa;
|
||||
border: 1px solid #f40;
|
||||
padding: 1px;
|
||||
}
|
||||
|
||||
.calendar tfoot .active { /* Active (pressed) style for buttons in footer */
|
||||
background: #c77;
|
||||
padding: 2px 0px 0px 2px;
|
||||
}
|
||||
|
||||
/* Combo boxes (menus that display months/years for direct selection) */
|
||||
|
||||
.calendar .combo {
|
||||
position: absolute;
|
||||
display: none;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
width: 4em;
|
||||
cursor: default;
|
||||
border: 1px solid #655;
|
||||
background: #ffe;
|
||||
color: #000;
|
||||
font-size: 90%;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.calendar .combo .label,
|
||||
.calendar .combo .label-IEfix {
|
||||
text-align: center;
|
||||
padding: 1px;
|
||||
}
|
||||
|
||||
.calendar .combo .label-IEfix {
|
||||
width: 4em;
|
||||
}
|
||||
|
||||
.calendar .combo .hilite {
|
||||
background: #fc8;
|
||||
}
|
||||
|
||||
.calendar .combo .active {
|
||||
border-top: 1px solid #a64;
|
||||
border-bottom: 1px solid #a64;
|
||||
background: #fee;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.calendar td.time {
|
||||
border-top: 1px solid #a88;
|
||||
padding: 1px 0px;
|
||||
text-align: center;
|
||||
background-color: #fed;
|
||||
}
|
||||
|
||||
.calendar td.time .hour,
|
||||
.calendar td.time .minute,
|
||||
.calendar td.time .ampm {
|
||||
padding: 0px 3px 0px 4px;
|
||||
border: 1px solid #988;
|
||||
font-weight: bold;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.calendar td.time .ampm {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.calendar td.time .colon {
|
||||
padding: 0px 2px 0px 3px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.calendar td.time span.hilite {
|
||||
border-color: #000;
|
||||
background-color: #866;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.calendar td.time span.active {
|
||||
border-color: #f00;
|
||||
background-color: #000;
|
||||
color: #0f0;
|
||||
}
|
||||
@@ -1,229 +0,0 @@
|
||||
/* The main calendar widget. DIV containing a table. */
|
||||
|
||||
div.calendar { position: relative; }
|
||||
|
||||
.calendar, .calendar table {
|
||||
border: 1px solid #565;
|
||||
font-size: 11px;
|
||||
color: #000;
|
||||
cursor: default;
|
||||
background: #efe;
|
||||
font-family: tahoma,verdana,sans-serif;
|
||||
}
|
||||
|
||||
/* Header part -- contains navigation buttons and day names. */
|
||||
|
||||
.calendar .button { /* "<<", "<", ">", ">>" buttons have this class */
|
||||
text-align: center; /* They are the navigation buttons */
|
||||
padding: 2px; /* Make the buttons seem like they're pressing */
|
||||
background: #676;
|
||||
color: #fff;
|
||||
font-size: 90%;
|
||||
}
|
||||
|
||||
.calendar .nav {
|
||||
background: #676 url(menuarrow.gif) no-repeat 100% 100%;
|
||||
}
|
||||
|
||||
.calendar thead .title { /* This holds the current "month, year" */
|
||||
font-weight: bold; /* Pressing it will take you to the current date */
|
||||
text-align: center;
|
||||
padding: 2px;
|
||||
background: #250;
|
||||
color: #efa;
|
||||
}
|
||||
|
||||
.calendar thead .headrow { /* Row <TR> containing navigation buttons */
|
||||
}
|
||||
|
||||
.calendar thead .name { /* Cells <TD> containing the day names */
|
||||
border-bottom: 1px solid #565;
|
||||
padding: 2px;
|
||||
text-align: center;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.calendar thead .weekend { /* How a weekend day name shows in header */
|
||||
color: #a66;
|
||||
}
|
||||
|
||||
.calendar thead .hilite { /* How do the buttons in header appear when hover */
|
||||
background-color: #afa;
|
||||
color: #000;
|
||||
border: 1px solid #084;
|
||||
padding: 1px;
|
||||
}
|
||||
|
||||
.calendar thead .active { /* Active (pressed) buttons in header */
|
||||
background-color: #7c7;
|
||||
padding: 2px 0px 0px 2px;
|
||||
}
|
||||
|
||||
.calendar thead .daynames { /* Row <TR> containing the day names */
|
||||
background: #dfb;
|
||||
}
|
||||
|
||||
/* The body part -- contains all the days in month. */
|
||||
|
||||
.calendar tbody .day { /* Cells <TD> containing month days dates */
|
||||
width: 2em;
|
||||
color: #564;
|
||||
text-align: right;
|
||||
padding: 2px 4px 2px 2px;
|
||||
}
|
||||
.calendar tbody .day.othermonth {
|
||||
font-size: 80%;
|
||||
color: #bbb;
|
||||
}
|
||||
.calendar tbody .day.othermonth.oweekend {
|
||||
color: #fbb;
|
||||
}
|
||||
|
||||
.calendar table .wn {
|
||||
padding: 2px 3px 2px 2px;
|
||||
border-right: 1px solid #8a8;
|
||||
background: #dfb;
|
||||
}
|
||||
|
||||
.calendar tbody .rowhilite td {
|
||||
background: #dfd;
|
||||
}
|
||||
|
||||
.calendar tbody .rowhilite td.wn {
|
||||
background: #efe;
|
||||
}
|
||||
|
||||
.calendar tbody td.hilite { /* Hovered cells <TD> */
|
||||
background: #efd;
|
||||
padding: 1px 3px 1px 1px;
|
||||
border: 1px solid #bbb;
|
||||
}
|
||||
|
||||
.calendar tbody td.active { /* Active (pressed) cells <TD> */
|
||||
background: #dec;
|
||||
padding: 2px 2px 0px 2px;
|
||||
}
|
||||
|
||||
.calendar tbody td.selected { /* Cell showing today date */
|
||||
font-weight: bold;
|
||||
border: 1px solid #000;
|
||||
padding: 1px 3px 1px 1px;
|
||||
background: #f8fff8;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.calendar tbody td.weekend { /* Cells showing weekend days */
|
||||
color: #a66;
|
||||
}
|
||||
|
||||
.calendar tbody td.today { font-weight: bold; color: #0a0; }
|
||||
|
||||
.calendar tbody .disabled { color: #999; }
|
||||
|
||||
.calendar tbody .emptycell { /* Empty cells (the best is to hide them) */
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.calendar tbody .emptyrow { /* Empty row (some months need less than 6 rows) */
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* The footer part -- status bar and "Close" button */
|
||||
|
||||
.calendar tfoot .footrow { /* The <TR> in footer (only one right now) */
|
||||
text-align: center;
|
||||
background: #565;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.calendar tfoot .ttip { /* Tooltip (status bar) cell <TD> */
|
||||
padding: 2px;
|
||||
background: #250;
|
||||
color: #efa;
|
||||
}
|
||||
|
||||
.calendar tfoot .hilite { /* Hover style for buttons in footer */
|
||||
background: #afa;
|
||||
border: 1px solid #084;
|
||||
color: #000;
|
||||
padding: 1px;
|
||||
}
|
||||
|
||||
.calendar tfoot .active { /* Active (pressed) style for buttons in footer */
|
||||
background: #7c7;
|
||||
padding: 2px 0px 0px 2px;
|
||||
}
|
||||
|
||||
/* Combo boxes (menus that display months/years for direct selection) */
|
||||
|
||||
.calendar .combo {
|
||||
position: absolute;
|
||||
display: none;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
width: 4em;
|
||||
cursor: default;
|
||||
border: 1px solid #565;
|
||||
background: #efd;
|
||||
color: #000;
|
||||
font-size: 90%;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.calendar .combo .label,
|
||||
.calendar .combo .label-IEfix {
|
||||
text-align: center;
|
||||
padding: 1px;
|
||||
}
|
||||
|
||||
.calendar .combo .label-IEfix {
|
||||
width: 4em;
|
||||
}
|
||||
|
||||
.calendar .combo .hilite {
|
||||
background: #af8;
|
||||
}
|
||||
|
||||
.calendar .combo .active {
|
||||
border-top: 1px solid #6a4;
|
||||
border-bottom: 1px solid #6a4;
|
||||
background: #efe;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.calendar td.time {
|
||||
border-top: 1px solid #8a8;
|
||||
padding: 1px 0px;
|
||||
text-align: center;
|
||||
background-color: #dfb;
|
||||
}
|
||||
|
||||
.calendar td.time .hour,
|
||||
.calendar td.time .minute,
|
||||
.calendar td.time .ampm {
|
||||
padding: 0px 3px 0px 4px;
|
||||
border: 1px solid #898;
|
||||
font-weight: bold;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.calendar td.time .ampm {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.calendar td.time .colon {
|
||||
padding: 0px 2px 0px 3px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.calendar td.time span.hilite {
|
||||
border-color: #000;
|
||||
background-color: #686;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.calendar td.time span.active {
|
||||
border-color: #f00;
|
||||
background-color: #000;
|
||||
color: #0f0;
|
||||
}
|
||||
@@ -19,7 +19,7 @@
|
||||
* than modifying calendar.js itself).
|
||||
*/
|
||||
|
||||
// $Id: calendar-setup.js,v 1.2 2005/10/09 11:16:50 wurley Exp $
|
||||
// $Id$
|
||||
|
||||
/**
|
||||
* This function "patches" an input field (or other element) to use a calendar
|
||||
|
||||
@@ -1,21 +0,0 @@
|
||||
/* Copyright Mihai Bazon, 2002, 2003 | http://dynarch.com/mishoo/
|
||||
* ---------------------------------------------------------------------------
|
||||
*
|
||||
* The DHTML Calendar
|
||||
*
|
||||
* Details and latest version at:
|
||||
* http://dynarch.com/mishoo/calendar.epl
|
||||
*
|
||||
* This script is distributed under the GNU Lesser General Public License.
|
||||
* Read the entire license text here: http://www.gnu.org/licenses/lgpl.html
|
||||
*
|
||||
* This file defines helper functions for setting up the calendar. They are
|
||||
* intended to help non-programmers get a working calendar on their site
|
||||
* quickly. This script should not be seen as part of the calendar. It just
|
||||
* shows you what one can do with the calendar, while in the same time
|
||||
* providing a quick and simple method for setting it up. If you need
|
||||
* exhaustive customization of the calendar creation process feel free to
|
||||
* modify this code to suit your needs (this is recommended and much better
|
||||
* than modifying calendar.js itself).
|
||||
*/
|
||||
Calendar.setup=function(params){function param_default(pname,def){if(typeof params[pname]=="undefined"){params[pname]=def;}};param_default("inputField",null);param_default("displayArea",null);param_default("button",null);param_default("eventName","click");param_default("ifFormat","%Y/%m/%d");param_default("daFormat","%Y/%m/%d");param_default("singleClick",true);param_default("disableFunc",null);param_default("dateStatusFunc",params["disableFunc"]);param_default("dateText",null);param_default("firstDay",null);param_default("align","Br");param_default("range",[1900,2999]);param_default("weekNumbers",true);param_default("flat",null);param_default("flatCallback",null);param_default("onSelect",null);param_default("onClose",null);param_default("onUpdate",null);param_default("date",null);param_default("showsTime",false);param_default("timeFormat","24");param_default("electric",true);param_default("step",2);param_default("position",null);param_default("cache",false);param_default("showOthers",false);param_default("multiple",null);var tmp=["inputField","displayArea","button"];for(var i in tmp){if(typeof params[tmp[i]]=="string"){params[tmp[i]]=document.getElementById(params[tmp[i]]);}}if(!(params.flat||params.multiple||params.inputField||params.displayArea||params.button)){alert("Calendar.setup:\n Nothing to setup (no fields found). Please check your code");return false;}function onSelect(cal){var p=cal.params;var update=(cal.dateClicked||p.electric);if(update&&p.inputField){p.inputField.value=cal.date.print(p.ifFormat);if(typeof p.inputField.onchange=="function")p.inputField.onchange();}if(update&&p.displayArea)p.displayArea.innerHTML=cal.date.print(p.daFormat);if(update&&typeof p.onUpdate=="function")p.onUpdate(cal);if(update&&p.flat){if(typeof p.flatCallback=="function")p.flatCallback(cal);}if(update&&p.singleClick&&cal.dateClicked)cal.callCloseHandler();};if(params.flat!=null){if(typeof params.flat=="string")params.flat=document.getElementById(params.flat);if(!params.flat){alert("Calendar.setup:\n Flat specified but can't find parent.");return false;}var cal=new Calendar(params.firstDay,params.date,params.onSelect||onSelect);cal.showsOtherMonths=params.showOthers;cal.showsTime=params.showsTime;cal.time24=(params.timeFormat=="24");cal.params=params;cal.weekNumbers=params.weekNumbers;cal.setRange(params.range[0],params.range[1]);cal.setDateStatusHandler(params.dateStatusFunc);cal.getDateText=params.dateText;if(params.ifFormat){cal.setDateFormat(params.ifFormat);}if(params.inputField&&typeof params.inputField.value=="string"){cal.parseDate(params.inputField.value);}cal.create(params.flat);cal.show();return false;}var triggerEl=params.button||params.displayArea||params.inputField;triggerEl["on"+params.eventName]=function(){var dateEl=params.inputField||params.displayArea;var dateFmt=params.inputField?params.ifFormat:params.daFormat;var mustCreate=false;var cal=window.calendar;if(dateEl)params.date=Date.parseDate(dateEl.value||dateEl.innerHTML,dateFmt);if(!(cal&¶ms.cache)){window.calendar=cal=new Calendar(params.firstDay,params.date,params.onSelect||onSelect,params.onClose||function(cal){cal.hide();});cal.showsTime=params.showsTime;cal.time24=(params.timeFormat=="24");cal.weekNumbers=params.weekNumbers;mustCreate=true;}else{if(params.date)cal.setDate(params.date);cal.hide();}if(params.multiple){cal.multiple={};for(var i=params.multiple.length;--i>=0;){var d=params.multiple[i];var ds=d.print("%Y%m%d");cal.multiple[ds]=d;}}cal.showsOtherMonths=params.showOthers;cal.yearStep=params.step;cal.setRange(params.range[0],params.range[1]);cal.params=params;cal.setDateStatusHandler(params.dateStatusFunc);cal.getDateText=params.dateText;cal.setDateFormat(dateFmt);if(mustCreate)cal.create();cal.refresh();if(!params.position)cal.showAtElement(params.button||params.displayArea||params.inputField,params.align);else cal.showAt(params.position[0],params.position[1]);return false;};return cal;};
|
||||
@@ -1,251 +0,0 @@
|
||||
/* The main calendar widget. DIV containing a table. */
|
||||
|
||||
.calendar {
|
||||
position: relative;
|
||||
display: none;
|
||||
border: 1px solid;
|
||||
border-color: #fff #000 #000 #fff;
|
||||
font-size: 11px;
|
||||
cursor: default;
|
||||
background: Window;
|
||||
color: WindowText;
|
||||
font-family: tahoma,verdana,sans-serif;
|
||||
}
|
||||
|
||||
.calendar table {
|
||||
border: 1px solid;
|
||||
border-color: #fff #000 #000 #fff;
|
||||
font-size: 11px;
|
||||
cursor: default;
|
||||
background: Window;
|
||||
color: WindowText;
|
||||
font-family: tahoma,verdana,sans-serif;
|
||||
}
|
||||
|
||||
/* Header part -- contains navigation buttons and day names. */
|
||||
|
||||
.calendar .button { /* "<<", "<", ">", ">>" buttons have this class */
|
||||
text-align: center;
|
||||
padding: 1px;
|
||||
border: 1px solid;
|
||||
border-color: ButtonHighlight ButtonShadow ButtonShadow ButtonHighlight;
|
||||
background: ButtonFace;
|
||||
}
|
||||
|
||||
.calendar .nav {
|
||||
background: ButtonFace url(menuarrow.gif) no-repeat 100% 100%;
|
||||
}
|
||||
|
||||
.calendar thead .title { /* This holds the current "month, year" */
|
||||
font-weight: bold;
|
||||
padding: 1px;
|
||||
border: 1px solid #000;
|
||||
background: ActiveCaption;
|
||||
color: CaptionText;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.calendar thead .headrow { /* Row <TR> containing navigation buttons */
|
||||
}
|
||||
|
||||
.calendar thead .daynames { /* Row <TR> containing the day names */
|
||||
}
|
||||
|
||||
.calendar thead .name { /* Cells <TD> containing the day names */
|
||||
border-bottom: 1px solid ButtonShadow;
|
||||
padding: 2px;
|
||||
text-align: center;
|
||||
background: ButtonFace;
|
||||
color: ButtonText;
|
||||
}
|
||||
|
||||
.calendar thead .weekend { /* How a weekend day name shows in header */
|
||||
color: #f00;
|
||||
}
|
||||
|
||||
.calendar thead .hilite { /* How do the buttons in header appear when hover */
|
||||
border: 2px solid;
|
||||
padding: 0px;
|
||||
border-color: ButtonHighlight ButtonShadow ButtonShadow ButtonHighlight;
|
||||
}
|
||||
|
||||
.calendar thead .active { /* Active (pressed) buttons in header */
|
||||
border-width: 1px;
|
||||
padding: 2px 0px 0px 2px;
|
||||
border-color: ButtonShadow ButtonHighlight ButtonHighlight ButtonShadow;
|
||||
}
|
||||
|
||||
/* The body part -- contains all the days in month. */
|
||||
|
||||
.calendar tbody .day { /* Cells <TD> containing month days dates */
|
||||
width: 2em;
|
||||
text-align: right;
|
||||
padding: 2px 4px 2px 2px;
|
||||
}
|
||||
.calendar tbody .day.othermonth {
|
||||
font-size: 80%;
|
||||
color: #aaa;
|
||||
}
|
||||
.calendar tbody .day.othermonth.oweekend {
|
||||
color: #faa;
|
||||
}
|
||||
|
||||
.calendar table .wn {
|
||||
padding: 2px 3px 2px 2px;
|
||||
border-right: 1px solid ButtonShadow;
|
||||
background: ButtonFace;
|
||||
color: ButtonText;
|
||||
}
|
||||
|
||||
.calendar tbody .rowhilite td {
|
||||
background: Highlight;
|
||||
color: HighlightText;
|
||||
}
|
||||
|
||||
.calendar tbody td.hilite { /* Hovered cells <TD> */
|
||||
padding: 1px 3px 1px 1px;
|
||||
border-top: 1px solid #fff;
|
||||
border-right: 1px solid #000;
|
||||
border-bottom: 1px solid #000;
|
||||
border-left: 1px solid #fff;
|
||||
}
|
||||
|
||||
.calendar tbody td.active { /* Active (pressed) cells <TD> */
|
||||
padding: 2px 2px 0px 2px;
|
||||
border: 1px solid;
|
||||
border-color: ButtonShadow ButtonHighlight ButtonHighlight ButtonShadow;
|
||||
}
|
||||
|
||||
.calendar tbody td.selected { /* Cell showing selected date */
|
||||
font-weight: bold;
|
||||
border: 1px solid;
|
||||
border-color: ButtonShadow ButtonHighlight ButtonHighlight ButtonShadow;
|
||||
padding: 2px 2px 0px 2px;
|
||||
background: ButtonFace;
|
||||
color: ButtonText;
|
||||
}
|
||||
|
||||
.calendar tbody td.weekend { /* Cells showing weekend days */
|
||||
color: #f00;
|
||||
}
|
||||
|
||||
.calendar tbody td.today { /* Cell showing today date */
|
||||
font-weight: bold;
|
||||
color: #00f;
|
||||
}
|
||||
|
||||
.calendar tbody td.disabled { color: GrayText; }
|
||||
|
||||
.calendar tbody .emptycell { /* Empty cells (the best is to hide them) */
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.calendar tbody .emptyrow { /* Empty row (some months need less than 6 rows) */
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* The footer part -- status bar and "Close" button */
|
||||
|
||||
.calendar tfoot .footrow { /* The <TR> in footer (only one right now) */
|
||||
}
|
||||
|
||||
.calendar tfoot .ttip { /* Tooltip (status bar) cell <TD> */
|
||||
background: ButtonFace;
|
||||
padding: 1px;
|
||||
border: 1px solid;
|
||||
border-color: ButtonShadow ButtonHighlight ButtonHighlight ButtonShadow;
|
||||
color: ButtonText;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.calendar tfoot .hilite { /* Hover style for buttons in footer */
|
||||
border-top: 1px solid #fff;
|
||||
border-right: 1px solid #000;
|
||||
border-bottom: 1px solid #000;
|
||||
border-left: 1px solid #fff;
|
||||
padding: 1px;
|
||||
background: #e4e0d8;
|
||||
}
|
||||
|
||||
.calendar tfoot .active { /* Active (pressed) style for buttons in footer */
|
||||
padding: 2px 0px 0px 2px;
|
||||
border-top: 1px solid #000;
|
||||
border-right: 1px solid #fff;
|
||||
border-bottom: 1px solid #fff;
|
||||
border-left: 1px solid #000;
|
||||
}
|
||||
|
||||
/* Combo boxes (menus that display months/years for direct selection) */
|
||||
|
||||
.calendar .combo {
|
||||
position: absolute;
|
||||
display: none;
|
||||
width: 4em;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
cursor: default;
|
||||
border: 1px solid;
|
||||
border-color: ButtonHighlight ButtonShadow ButtonShadow ButtonHighlight;
|
||||
background: Menu;
|
||||
color: MenuText;
|
||||
font-size: 90%;
|
||||
padding: 1px;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.calendar .combo .label,
|
||||
.calendar .combo .label-IEfix {
|
||||
text-align: center;
|
||||
padding: 1px;
|
||||
}
|
||||
|
||||
.calendar .combo .label-IEfix {
|
||||
width: 4em;
|
||||
}
|
||||
|
||||
.calendar .combo .active {
|
||||
padding: 0px;
|
||||
border: 1px solid #000;
|
||||
}
|
||||
|
||||
.calendar .combo .hilite {
|
||||
background: Highlight;
|
||||
color: HighlightText;
|
||||
}
|
||||
|
||||
.calendar td.time {
|
||||
border-top: 1px solid ButtonShadow;
|
||||
padding: 1px 0px;
|
||||
text-align: center;
|
||||
background-color: ButtonFace;
|
||||
}
|
||||
|
||||
.calendar td.time .hour,
|
||||
.calendar td.time .minute,
|
||||
.calendar td.time .ampm {
|
||||
padding: 0px 3px 0px 4px;
|
||||
border: 1px solid #889;
|
||||
font-weight: bold;
|
||||
background-color: Menu;
|
||||
}
|
||||
|
||||
.calendar td.time .ampm {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.calendar td.time .colon {
|
||||
padding: 0px 2px 0px 3px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.calendar td.time span.hilite {
|
||||
border-color: #000;
|
||||
background-color: Highlight;
|
||||
color: HighlightText;
|
||||
}
|
||||
|
||||
.calendar td.time span.active {
|
||||
border-color: #f00;
|
||||
background-color: #000;
|
||||
color: #0f0;
|
||||
}
|
||||
@@ -1,239 +0,0 @@
|
||||
/* The main calendar widget. DIV containing a table. */
|
||||
|
||||
div.calendar { position: relative; }
|
||||
|
||||
.calendar, .calendar table {
|
||||
border: 1px solid #655;
|
||||
font-size: 11px;
|
||||
color: #000;
|
||||
cursor: default;
|
||||
background: #ffd;
|
||||
font-family: tahoma,verdana,sans-serif;
|
||||
filter:
|
||||
progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#DDDCCC,EndColorStr=#FFFFFF);
|
||||
}
|
||||
|
||||
/* Header part -- contains navigation buttons and day names. */
|
||||
|
||||
.calendar .button { /* "<<", "<", ">", ">>" buttons have this class */
|
||||
text-align: center; /* They are the navigation buttons */
|
||||
padding: 2px; /* Make the buttons seem like they're pressing */
|
||||
color:#363636;
|
||||
}
|
||||
|
||||
.calendar .nav {
|
||||
background: #edc url(menuarrow.gif) no-repeat 100% 100%;
|
||||
}
|
||||
|
||||
.calendar thead .title { /* This holds the current "month, year" */
|
||||
font-weight: bold; /* Pressing it will take you to the current date */
|
||||
text-align: center;
|
||||
background: #654;
|
||||
color: #363636;
|
||||
padding: 2px;
|
||||
filter:
|
||||
progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#ffffff,EndColorStr=#dddccc);
|
||||
}
|
||||
|
||||
.calendar thead .headrow { /* Row <TR> containing navigation buttons */
|
||||
/*background: #3B86A0;*/
|
||||
color: #363636;
|
||||
font-weight: bold;
|
||||
filter:
|
||||
progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#ffffff,EndColorStr=#3b86a0);
|
||||
}
|
||||
|
||||
.calendar thead .name { /* Cells <TD> containing the day names */
|
||||
border-bottom: 1px solid #655;
|
||||
padding: 2px;
|
||||
text-align: center;
|
||||
color: #363636;
|
||||
filter:
|
||||
progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#DDDCCC,EndColorStr=#FFFFFF);
|
||||
}
|
||||
|
||||
.calendar thead .weekend { /* How a weekend day name shows in header */
|
||||
color: #f00;
|
||||
}
|
||||
|
||||
.calendar thead .hilite { /* How do the buttons in header appear when hover */
|
||||
background-color: #ffcc86;
|
||||
color: #000;
|
||||
border: 1px solid #b59345;
|
||||
padding: 1px;
|
||||
}
|
||||
|
||||
.calendar thead .active { /* Active (pressed) buttons in header */
|
||||
background-color: #c77;
|
||||
padding: 2px 0px 0px 2px;
|
||||
}
|
||||
|
||||
.calendar thead .daynames { /* Row <TR> containing the day names */
|
||||
background: #fed;
|
||||
}
|
||||
|
||||
/* The body part -- contains all the days in month. */
|
||||
|
||||
.calendar tbody .day { /* Cells <TD> containing month days dates */
|
||||
width: 2em;
|
||||
text-align: right;
|
||||
padding: 2px 4px 2px 2px;
|
||||
}
|
||||
.calendar tbody .day.othermonth {
|
||||
font-size: 80%;
|
||||
color: #aaa;
|
||||
}
|
||||
.calendar tbody .day.othermonth.oweekend {
|
||||
color: #faa;
|
||||
}
|
||||
|
||||
.calendar table .wn {
|
||||
padding: 2px 3px 2px 2px;
|
||||
border-right: 1px solid #000;
|
||||
background: #fed;
|
||||
}
|
||||
|
||||
.calendar tbody .rowhilite td {
|
||||
background: #ddf;
|
||||
|
||||
}
|
||||
|
||||
.calendar tbody .rowhilite td.wn {
|
||||
background: #efe;
|
||||
}
|
||||
|
||||
.calendar tbody td.hilite { /* Hovered cells <TD> */
|
||||
background: #ffe;
|
||||
padding: 1px 3px 1px 1px;
|
||||
border: 1px solid #bbb;
|
||||
}
|
||||
|
||||
.calendar tbody td.active { /* Active (pressed) cells <TD> */
|
||||
background: #ddc;
|
||||
padding: 2px 2px 0px 2px;
|
||||
}
|
||||
|
||||
.calendar tbody td.selected { /* Cell showing today date */
|
||||
font-weight: bold;
|
||||
border: 1px solid #000;
|
||||
padding: 1px 3px 1px 1px;
|
||||
background: #fea;
|
||||
}
|
||||
|
||||
.calendar tbody td.weekend { /* Cells showing weekend days */
|
||||
color: #f00;
|
||||
}
|
||||
|
||||
.calendar tbody td.today { font-weight: bold; }
|
||||
|
||||
.calendar tbody .disabled { color: #999; }
|
||||
|
||||
.calendar tbody .emptycell { /* Empty cells (the best is to hide them) */
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.calendar tbody .emptyrow { /* Empty row (some months need less than 6 rows) */
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* The footer part -- status bar and "Close" button */
|
||||
|
||||
.calendar tfoot .footrow { /* The <TR> in footer (only one right now) */
|
||||
text-align: center;
|
||||
background: #988;
|
||||
color: #000;
|
||||
|
||||
}
|
||||
|
||||
.calendar tfoot .ttip { /* Tooltip (status bar) cell <TD> */
|
||||
border-top: 1px solid #655;
|
||||
background: #dcb;
|
||||
color: #363636;
|
||||
font-weight: bold;
|
||||
filter:
|
||||
progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#FFFFFF,EndColorStr=#DDDCCC);
|
||||
}
|
||||
.calendar tfoot .hilite { /* Hover style for buttons in footer */
|
||||
background: #faa;
|
||||
border: 1px solid #f40;
|
||||
padding: 1px;
|
||||
}
|
||||
|
||||
.calendar tfoot .active { /* Active (pressed) style for buttons in footer */
|
||||
background: #c77;
|
||||
padding: 2px 0px 0px 2px;
|
||||
}
|
||||
|
||||
/* Combo boxes (menus that display months/years for direct selection) */
|
||||
|
||||
.combo {
|
||||
position: absolute;
|
||||
display: none;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
width: 4em;
|
||||
cursor: default;
|
||||
border: 1px solid #655;
|
||||
background: #ffe;
|
||||
color: #000;
|
||||
font-size: smaller;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.combo .label,
|
||||
.combo .label-IEfix {
|
||||
text-align: center;
|
||||
padding: 1px;
|
||||
}
|
||||
|
||||
.combo .label-IEfix {
|
||||
width: 4em;
|
||||
}
|
||||
|
||||
.combo .hilite {
|
||||
background: #fc8;
|
||||
}
|
||||
|
||||
.combo .active {
|
||||
border-top: 1px solid #a64;
|
||||
border-bottom: 1px solid #a64;
|
||||
background: #fee;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.calendar td.time {
|
||||
border-top: 1px solid #a88;
|
||||
padding: 1px 0px;
|
||||
text-align: center;
|
||||
background-color: #fed;
|
||||
}
|
||||
|
||||
.calendar td.time .hour,
|
||||
.calendar td.time .minute,
|
||||
.calendar td.time .ampm {
|
||||
padding: 0px 3px 0px 4px;
|
||||
border: 1px solid #988;
|
||||
font-weight: bold;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.calendar td.time .ampm {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.calendar td.time .colon {
|
||||
padding: 0px 2px 0px 3px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.calendar td.time span.hilite {
|
||||
border-color: #000;
|
||||
background-color: #866;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.calendar td.time span.active {
|
||||
border-color: #f00;
|
||||
background-color: #000;
|
||||
color: #0f0;
|
||||
}
|
||||
@@ -1,271 +0,0 @@
|
||||
/* The main calendar widget. DIV containing a table. */
|
||||
|
||||
.calendar {
|
||||
position: relative;
|
||||
display: none;
|
||||
border-top: 2px solid #fff;
|
||||
border-right: 2px solid #000;
|
||||
border-bottom: 2px solid #000;
|
||||
border-left: 2px solid #fff;
|
||||
font-size: 11px;
|
||||
color: #000;
|
||||
cursor: default;
|
||||
background: #d4d0c8;
|
||||
font-family: tahoma,verdana,sans-serif;
|
||||
}
|
||||
|
||||
.calendar table {
|
||||
border-top: 1px solid #000;
|
||||
border-right: 1px solid #fff;
|
||||
border-bottom: 1px solid #fff;
|
||||
border-left: 1px solid #000;
|
||||
font-size: 11px;
|
||||
color: #000;
|
||||
cursor: default;
|
||||
background: #d4d0c8;
|
||||
font-family: tahoma,verdana,sans-serif;
|
||||
}
|
||||
|
||||
/* Header part -- contains navigation buttons and day names. */
|
||||
|
||||
.calendar .button { /* "<<", "<", ">", ">>" buttons have this class */
|
||||
text-align: center;
|
||||
padding: 1px;
|
||||
border-top: 1px solid #fff;
|
||||
border-right: 1px solid #000;
|
||||
border-bottom: 1px solid #000;
|
||||
border-left: 1px solid #fff;
|
||||
}
|
||||
|
||||
.calendar .nav {
|
||||
background: transparent url(menuarrow.gif) no-repeat 100% 100%;
|
||||
}
|
||||
|
||||
.calendar thead .title { /* This holds the current "month, year" */
|
||||
font-weight: bold;
|
||||
padding: 1px;
|
||||
border: 1px solid #000;
|
||||
background: #848078;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.calendar thead .headrow { /* Row <TR> containing navigation buttons */
|
||||
}
|
||||
|
||||
.calendar thead .daynames { /* Row <TR> containing the day names */
|
||||
}
|
||||
|
||||
.calendar thead .name { /* Cells <TD> containing the day names */
|
||||
border-bottom: 1px solid #000;
|
||||
padding: 2px;
|
||||
text-align: center;
|
||||
background: #f4f0e8;
|
||||
}
|
||||
|
||||
.calendar thead .weekend { /* How a weekend day name shows in header */
|
||||
color: #f00;
|
||||
}
|
||||
|
||||
.calendar thead .hilite { /* How do the buttons in header appear when hover */
|
||||
border-top: 2px solid #fff;
|
||||
border-right: 2px solid #000;
|
||||
border-bottom: 2px solid #000;
|
||||
border-left: 2px solid #fff;
|
||||
padding: 0px;
|
||||
background-color: #e4e0d8;
|
||||
}
|
||||
|
||||
.calendar thead .active { /* Active (pressed) buttons in header */
|
||||
padding: 2px 0px 0px 2px;
|
||||
border-top: 1px solid #000;
|
||||
border-right: 1px solid #fff;
|
||||
border-bottom: 1px solid #fff;
|
||||
border-left: 1px solid #000;
|
||||
background-color: #c4c0b8;
|
||||
}
|
||||
|
||||
/* The body part -- contains all the days in month. */
|
||||
|
||||
.calendar tbody .day { /* Cells <TD> containing month days dates */
|
||||
width: 2em;
|
||||
text-align: right;
|
||||
padding: 2px 4px 2px 2px;
|
||||
}
|
||||
.calendar tbody .day.othermonth {
|
||||
font-size: 80%;
|
||||
color: #aaa;
|
||||
}
|
||||
.calendar tbody .day.othermonth.oweekend {
|
||||
color: #faa;
|
||||
}
|
||||
|
||||
.calendar table .wn {
|
||||
padding: 2px 3px 2px 2px;
|
||||
border-right: 1px solid #000;
|
||||
background: #f4f0e8;
|
||||
}
|
||||
|
||||
.calendar tbody .rowhilite td {
|
||||
background: #e4e0d8;
|
||||
}
|
||||
|
||||
.calendar tbody .rowhilite td.wn {
|
||||
background: #d4d0c8;
|
||||
}
|
||||
|
||||
.calendar tbody td.hilite { /* Hovered cells <TD> */
|
||||
padding: 1px 3px 1px 1px;
|
||||
border-top: 1px solid #fff;
|
||||
border-right: 1px solid #000;
|
||||
border-bottom: 1px solid #000;
|
||||
border-left: 1px solid #fff;
|
||||
}
|
||||
|
||||
.calendar tbody td.active { /* Active (pressed) cells <TD> */
|
||||
padding: 2px 2px 0px 2px;
|
||||
border-top: 1px solid #000;
|
||||
border-right: 1px solid #fff;
|
||||
border-bottom: 1px solid #fff;
|
||||
border-left: 1px solid #000;
|
||||
}
|
||||
|
||||
.calendar tbody td.selected { /* Cell showing selected date */
|
||||
font-weight: bold;
|
||||
border-top: 1px solid #000;
|
||||
border-right: 1px solid #fff;
|
||||
border-bottom: 1px solid #fff;
|
||||
border-left: 1px solid #000;
|
||||
padding: 2px 2px 0px 2px;
|
||||
background: #e4e0d8;
|
||||
}
|
||||
|
||||
.calendar tbody td.weekend { /* Cells showing weekend days */
|
||||
color: #f00;
|
||||
}
|
||||
|
||||
.calendar tbody td.today { /* Cell showing today date */
|
||||
font-weight: bold;
|
||||
color: #00f;
|
||||
}
|
||||
|
||||
.calendar tbody .disabled { color: #999; }
|
||||
|
||||
.calendar tbody .emptycell { /* Empty cells (the best is to hide them) */
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.calendar tbody .emptyrow { /* Empty row (some months need less than 6 rows) */
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* The footer part -- status bar and "Close" button */
|
||||
|
||||
.calendar tfoot .footrow { /* The <TR> in footer (only one right now) */
|
||||
}
|
||||
|
||||
.calendar tfoot .ttip { /* Tooltip (status bar) cell <TD> */
|
||||
background: #f4f0e8;
|
||||
padding: 1px;
|
||||
border: 1px solid #000;
|
||||
background: #848078;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.calendar tfoot .hilite { /* Hover style for buttons in footer */
|
||||
border-top: 1px solid #fff;
|
||||
border-right: 1px solid #000;
|
||||
border-bottom: 1px solid #000;
|
||||
border-left: 1px solid #fff;
|
||||
padding: 1px;
|
||||
background: #e4e0d8;
|
||||
}
|
||||
|
||||
.calendar tfoot .active { /* Active (pressed) style for buttons in footer */
|
||||
padding: 2px 0px 0px 2px;
|
||||
border-top: 1px solid #000;
|
||||
border-right: 1px solid #fff;
|
||||
border-bottom: 1px solid #fff;
|
||||
border-left: 1px solid #000;
|
||||
}
|
||||
|
||||
/* Combo boxes (menus that display months/years for direct selection) */
|
||||
|
||||
.calendar .combo {
|
||||
position: absolute;
|
||||
display: none;
|
||||
width: 4em;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
cursor: default;
|
||||
border-top: 1px solid #fff;
|
||||
border-right: 1px solid #000;
|
||||
border-bottom: 1px solid #000;
|
||||
border-left: 1px solid #fff;
|
||||
background: #e4e0d8;
|
||||
font-size: 90%;
|
||||
padding: 1px;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.calendar .combo .label,
|
||||
.calendar .combo .label-IEfix {
|
||||
text-align: center;
|
||||
padding: 1px;
|
||||
}
|
||||
|
||||
.calendar .combo .label-IEfix {
|
||||
width: 4em;
|
||||
}
|
||||
|
||||
.calendar .combo .active {
|
||||
background: #c4c0b8;
|
||||
padding: 0px;
|
||||
border-top: 1px solid #000;
|
||||
border-right: 1px solid #fff;
|
||||
border-bottom: 1px solid #fff;
|
||||
border-left: 1px solid #000;
|
||||
}
|
||||
|
||||
.calendar .combo .hilite {
|
||||
background: #048;
|
||||
color: #fea;
|
||||
}
|
||||
|
||||
.calendar td.time {
|
||||
border-top: 1px solid #000;
|
||||
padding: 1px 0px;
|
||||
text-align: center;
|
||||
background-color: #f4f0e8;
|
||||
}
|
||||
|
||||
.calendar td.time .hour,
|
||||
.calendar td.time .minute,
|
||||
.calendar td.time .ampm {
|
||||
padding: 0px 3px 0px 4px;
|
||||
border: 1px solid #889;
|
||||
font-weight: bold;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.calendar td.time .ampm {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.calendar td.time .colon {
|
||||
padding: 0px 2px 0px 3px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.calendar td.time span.hilite {
|
||||
border-color: #000;
|
||||
background-color: #766;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.calendar td.time span.active {
|
||||
border-color: #f00;
|
||||
background-color: #000;
|
||||
color: #0f0;
|
||||
}
|
||||
@@ -1,271 +0,0 @@
|
||||
/* The main calendar widget. DIV containing a table. */
|
||||
|
||||
.calendar {
|
||||
position: relative;
|
||||
display: none;
|
||||
border-top: 2px solid #fff;
|
||||
border-right: 2px solid #000;
|
||||
border-bottom: 2px solid #000;
|
||||
border-left: 2px solid #fff;
|
||||
font-size: 11px;
|
||||
color: #000;
|
||||
cursor: default;
|
||||
background: #d4c8d0;
|
||||
font-family: tahoma,verdana,sans-serif;
|
||||
}
|
||||
|
||||
.calendar table {
|
||||
border-top: 1px solid #000;
|
||||
border-right: 1px solid #fff;
|
||||
border-bottom: 1px solid #fff;
|
||||
border-left: 1px solid #000;
|
||||
font-size: 11px;
|
||||
color: #000;
|
||||
cursor: default;
|
||||
background: #d4c8d0;
|
||||
font-family: tahoma,verdana,sans-serif;
|
||||
}
|
||||
|
||||
/* Header part -- contains navigation buttons and day names. */
|
||||
|
||||
.calendar .button { /* "<<", "<", ">", ">>" buttons have this class */
|
||||
text-align: center;
|
||||
padding: 1px;
|
||||
border-top: 1px solid #fff;
|
||||
border-right: 1px solid #000;
|
||||
border-bottom: 1px solid #000;
|
||||
border-left: 1px solid #fff;
|
||||
}
|
||||
|
||||
.calendar .nav {
|
||||
background: transparent url(menuarrow.gif) no-repeat 100% 100%;
|
||||
}
|
||||
|
||||
.calendar thead .title { /* This holds the current "month, year" */
|
||||
font-weight: bold;
|
||||
padding: 1px;
|
||||
border: 1px solid #000;
|
||||
background: #847880;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.calendar thead .headrow { /* Row <TR> containing navigation buttons */
|
||||
}
|
||||
|
||||
.calendar thead .daynames { /* Row <TR> containing the day names */
|
||||
}
|
||||
|
||||
.calendar thead .name { /* Cells <TD> containing the day names */
|
||||
border-bottom: 1px solid #000;
|
||||
padding: 2px;
|
||||
text-align: center;
|
||||
background: #f4e8f0;
|
||||
}
|
||||
|
||||
.calendar thead .weekend { /* How a weekend day name shows in header */
|
||||
color: #f00;
|
||||
}
|
||||
|
||||
.calendar thead .hilite { /* How do the buttons in header appear when hover */
|
||||
border-top: 2px solid #fff;
|
||||
border-right: 2px solid #000;
|
||||
border-bottom: 2px solid #000;
|
||||
border-left: 2px solid #fff;
|
||||
padding: 0px;
|
||||
background-color: #e4d8e0;
|
||||
}
|
||||
|
||||
.calendar thead .active { /* Active (pressed) buttons in header */
|
||||
padding: 2px 0px 0px 2px;
|
||||
border-top: 1px solid #000;
|
||||
border-right: 1px solid #fff;
|
||||
border-bottom: 1px solid #fff;
|
||||
border-left: 1px solid #000;
|
||||
background-color: #c4b8c0;
|
||||
}
|
||||
|
||||
/* The body part -- contains all the days in month. */
|
||||
|
||||
.calendar tbody .day { /* Cells <TD> containing month days dates */
|
||||
width: 2em;
|
||||
text-align: right;
|
||||
padding: 2px 4px 2px 2px;
|
||||
}
|
||||
.calendar tbody .day.othermonth {
|
||||
font-size: 80%;
|
||||
color: #aaa;
|
||||
}
|
||||
.calendar tbody .day.othermonth.oweekend {
|
||||
color: #faa;
|
||||
}
|
||||
|
||||
.calendar table .wn {
|
||||
padding: 2px 3px 2px 2px;
|
||||
border-right: 1px solid #000;
|
||||
background: #f4e8f0;
|
||||
}
|
||||
|
||||
.calendar tbody .rowhilite td {
|
||||
background: #e4d8e0;
|
||||
}
|
||||
|
||||
.calendar tbody .rowhilite td.wn {
|
||||
background: #d4c8d0;
|
||||
}
|
||||
|
||||
.calendar tbody td.hilite { /* Hovered cells <TD> */
|
||||
padding: 1px 3px 1px 1px;
|
||||
border-top: 1px solid #fff;
|
||||
border-right: 1px solid #000;
|
||||
border-bottom: 1px solid #000;
|
||||
border-left: 1px solid #fff;
|
||||
}
|
||||
|
||||
.calendar tbody td.active { /* Active (pressed) cells <TD> */
|
||||
padding: 2px 2px 0px 2px;
|
||||
border-top: 1px solid #000;
|
||||
border-right: 1px solid #fff;
|
||||
border-bottom: 1px solid #fff;
|
||||
border-left: 1px solid #000;
|
||||
}
|
||||
|
||||
.calendar tbody td.selected { /* Cell showing selected date */
|
||||
font-weight: bold;
|
||||
border-top: 1px solid #000;
|
||||
border-right: 1px solid #fff;
|
||||
border-bottom: 1px solid #fff;
|
||||
border-left: 1px solid #000;
|
||||
padding: 2px 2px 0px 2px;
|
||||
background: #e4d8e0;
|
||||
}
|
||||
|
||||
.calendar tbody td.weekend { /* Cells showing weekend days */
|
||||
color: #f00;
|
||||
}
|
||||
|
||||
.calendar tbody td.today { /* Cell showing today date */
|
||||
font-weight: bold;
|
||||
color: #00f;
|
||||
}
|
||||
|
||||
.calendar tbody .disabled { color: #999; }
|
||||
|
||||
.calendar tbody .emptycell { /* Empty cells (the best is to hide them) */
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.calendar tbody .emptyrow { /* Empty row (some months need less than 6 rows) */
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* The footer part -- status bar and "Close" button */
|
||||
|
||||
.calendar tfoot .footrow { /* The <TR> in footer (only one right now) */
|
||||
}
|
||||
|
||||
.calendar tfoot .ttip { /* Tooltip (status bar) cell <TD> */
|
||||
background: #f4e8f0;
|
||||
padding: 1px;
|
||||
border: 1px solid #000;
|
||||
background: #847880;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.calendar tfoot .hilite { /* Hover style for buttons in footer */
|
||||
border-top: 1px solid #fff;
|
||||
border-right: 1px solid #000;
|
||||
border-bottom: 1px solid #000;
|
||||
border-left: 1px solid #fff;
|
||||
padding: 1px;
|
||||
background: #e4d8e0;
|
||||
}
|
||||
|
||||
.calendar tfoot .active { /* Active (pressed) style for buttons in footer */
|
||||
padding: 2px 0px 0px 2px;
|
||||
border-top: 1px solid #000;
|
||||
border-right: 1px solid #fff;
|
||||
border-bottom: 1px solid #fff;
|
||||
border-left: 1px solid #000;
|
||||
}
|
||||
|
||||
/* Combo boxes (menus that display months/years for direct selection) */
|
||||
|
||||
.calendar .combo {
|
||||
position: absolute;
|
||||
display: none;
|
||||
width: 4em;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
cursor: default;
|
||||
border-top: 1px solid #fff;
|
||||
border-right: 1px solid #000;
|
||||
border-bottom: 1px solid #000;
|
||||
border-left: 1px solid #fff;
|
||||
background: #e4d8e0;
|
||||
font-size: 90%;
|
||||
padding: 1px;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.calendar .combo .label,
|
||||
.calendar .combo .label-IEfix {
|
||||
text-align: center;
|
||||
padding: 1px;
|
||||
}
|
||||
|
||||
.calendar .combo .label-IEfix {
|
||||
width: 4em;
|
||||
}
|
||||
|
||||
.calendar .combo .active {
|
||||
background: #d4c8d0;
|
||||
padding: 0px;
|
||||
border-top: 1px solid #000;
|
||||
border-right: 1px solid #fff;
|
||||
border-bottom: 1px solid #fff;
|
||||
border-left: 1px solid #000;
|
||||
}
|
||||
|
||||
.calendar .combo .hilite {
|
||||
background: #408;
|
||||
color: #fea;
|
||||
}
|
||||
|
||||
.calendar td.time {
|
||||
border-top: 1px solid #000;
|
||||
padding: 1px 0px;
|
||||
text-align: center;
|
||||
background-color: #f4f0e8;
|
||||
}
|
||||
|
||||
.calendar td.time .hour,
|
||||
.calendar td.time .minute,
|
||||
.calendar td.time .ampm {
|
||||
padding: 0px 3px 0px 4px;
|
||||
border: 1px solid #889;
|
||||
font-weight: bold;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.calendar td.time .ampm {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.calendar td.time .colon {
|
||||
padding: 0px 2px 0px 3px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.calendar td.time span.hilite {
|
||||
border-color: #000;
|
||||
background-color: #766;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.calendar td.time span.active {
|
||||
border-color: #f00;
|
||||
background-color: #000;
|
||||
color: #0f0;
|
||||
}
|
||||
@@ -1,265 +0,0 @@
|
||||
/* The main calendar widget. DIV containing a table. */
|
||||
|
||||
.calendar {
|
||||
position: relative;
|
||||
display: none;
|
||||
border-top: 2px solid #fff;
|
||||
border-right: 2px solid #000;
|
||||
border-bottom: 2px solid #000;
|
||||
border-left: 2px solid #fff;
|
||||
font-size: 11px;
|
||||
color: #000;
|
||||
cursor: default;
|
||||
background: #c8d0d4;
|
||||
font-family: tahoma,verdana,sans-serif;
|
||||
}
|
||||
|
||||
.calendar table {
|
||||
border-top: 1px solid #000;
|
||||
border-right: 1px solid #fff;
|
||||
border-bottom: 1px solid #fff;
|
||||
border-left: 1px solid #000;
|
||||
font-size: 11px;
|
||||
color: #000;
|
||||
cursor: default;
|
||||
background: #c8d0d4;
|
||||
font-family: tahoma,verdana,sans-serif;
|
||||
}
|
||||
|
||||
/* Header part -- contains navigation buttons and day names. */
|
||||
|
||||
.calendar .button { /* "<<", "<", ">", ">>" buttons have this class */
|
||||
text-align: center;
|
||||
padding: 1px;
|
||||
border-top: 1px solid #fff;
|
||||
border-right: 1px solid #000;
|
||||
border-bottom: 1px solid #000;
|
||||
border-left: 1px solid #fff;
|
||||
}
|
||||
|
||||
.calendar .nav {
|
||||
background: transparent url(menuarrow.gif) no-repeat 100% 100%;
|
||||
}
|
||||
|
||||
.calendar thead .title { /* This holds the current "month, year" */
|
||||
font-weight: bold;
|
||||
padding: 1px;
|
||||
border: 1px solid #000;
|
||||
background: #788084;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.calendar thead .headrow { /* Row <TR> containing navigation buttons */
|
||||
}
|
||||
|
||||
.calendar thead .daynames { /* Row <TR> containing the day names */
|
||||
}
|
||||
|
||||
.calendar thead .name { /* Cells <TD> containing the day names */
|
||||
border-bottom: 1px solid #000;
|
||||
padding: 2px;
|
||||
text-align: center;
|
||||
background: #e8f0f4;
|
||||
}
|
||||
|
||||
.calendar thead .weekend { /* How a weekend day name shows in header */
|
||||
color: #f00;
|
||||
}
|
||||
|
||||
.calendar thead .hilite { /* How do the buttons in header appear when hover */
|
||||
border-top: 2px solid #fff;
|
||||
border-right: 2px solid #000;
|
||||
border-bottom: 2px solid #000;
|
||||
border-left: 2px solid #fff;
|
||||
padding: 0px;
|
||||
background-color: #d8e0e4;
|
||||
}
|
||||
|
||||
.calendar thead .active { /* Active (pressed) buttons in header */
|
||||
padding: 2px 0px 0px 2px;
|
||||
border-top: 1px solid #000;
|
||||
border-right: 1px solid #fff;
|
||||
border-bottom: 1px solid #fff;
|
||||
border-left: 1px solid #000;
|
||||
background-color: #b8c0c4;
|
||||
}
|
||||
|
||||
/* The body part -- contains all the days in month. */
|
||||
|
||||
.calendar tbody .day { /* Cells <TD> containing month days dates */
|
||||
width: 2em;
|
||||
text-align: right;
|
||||
padding: 2px 4px 2px 2px;
|
||||
}
|
||||
.calendar tbody .day.othermonth {
|
||||
font-size: 80%;
|
||||
color: #aaa;
|
||||
}
|
||||
.calendar tbody .day.othermonth.oweekend {
|
||||
color: #faa;
|
||||
}
|
||||
|
||||
.calendar table .wn {
|
||||
padding: 2px 3px 2px 2px;
|
||||
border-right: 1px solid #000;
|
||||
background: #e8f4f0;
|
||||
}
|
||||
|
||||
.calendar tbody .rowhilite td {
|
||||
background: #d8e4e0;
|
||||
}
|
||||
|
||||
.calendar tbody .rowhilite td.wn {
|
||||
background: #c8d4d0;
|
||||
}
|
||||
|
||||
.calendar tbody td.hilite { /* Hovered cells <TD> */
|
||||
padding: 1px 3px 1px 1px;
|
||||
border: 1px solid;
|
||||
border-color: #fff #000 #000 #fff;
|
||||
}
|
||||
|
||||
.calendar tbody td.active { /* Active (pressed) cells <TD> */
|
||||
padding: 2px 2px 0px 2px;
|
||||
border: 1px solid;
|
||||
border-color: #000 #fff #fff #000;
|
||||
}
|
||||
|
||||
.calendar tbody td.selected { /* Cell showing selected date */
|
||||
font-weight: bold;
|
||||
padding: 2px 2px 0px 2px;
|
||||
border: 1px solid;
|
||||
border-color: #000 #fff #fff #000;
|
||||
background: #d8e0e4;
|
||||
}
|
||||
|
||||
.calendar tbody td.weekend { /* Cells showing weekend days */
|
||||
color: #f00;
|
||||
}
|
||||
|
||||
.calendar tbody td.today { /* Cell showing today date */
|
||||
font-weight: bold;
|
||||
color: #00f;
|
||||
}
|
||||
|
||||
.calendar tbody .disabled { color: #999; }
|
||||
|
||||
.calendar tbody .emptycell { /* Empty cells (the best is to hide them) */
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.calendar tbody .emptyrow { /* Empty row (some months need less than 6 rows) */
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* The footer part -- status bar and "Close" button */
|
||||
|
||||
.calendar tfoot .footrow { /* The <TR> in footer (only one right now) */
|
||||
}
|
||||
|
||||
.calendar tfoot .ttip { /* Tooltip (status bar) cell <TD> */
|
||||
background: #e8f0f4;
|
||||
padding: 1px;
|
||||
border: 1px solid #000;
|
||||
background: #788084;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.calendar tfoot .hilite { /* Hover style for buttons in footer */
|
||||
border-top: 1px solid #fff;
|
||||
border-right: 1px solid #000;
|
||||
border-bottom: 1px solid #000;
|
||||
border-left: 1px solid #fff;
|
||||
padding: 1px;
|
||||
background: #d8e0e4;
|
||||
}
|
||||
|
||||
.calendar tfoot .active { /* Active (pressed) style for buttons in footer */
|
||||
padding: 2px 0px 0px 2px;
|
||||
border-top: 1px solid #000;
|
||||
border-right: 1px solid #fff;
|
||||
border-bottom: 1px solid #fff;
|
||||
border-left: 1px solid #000;
|
||||
}
|
||||
|
||||
/* Combo boxes (menus that display months/years for direct selection) */
|
||||
|
||||
.calendar .combo {
|
||||
position: absolute;
|
||||
display: none;
|
||||
width: 4em;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
cursor: default;
|
||||
border-top: 1px solid #fff;
|
||||
border-right: 1px solid #000;
|
||||
border-bottom: 1px solid #000;
|
||||
border-left: 1px solid #fff;
|
||||
background: #d8e0e4;
|
||||
font-size: 90%;
|
||||
padding: 1px;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.calendar .combo .label,
|
||||
.calendar .combo .label-IEfix {
|
||||
text-align: center;
|
||||
padding: 1px;
|
||||
}
|
||||
|
||||
.calendar .combo .label-IEfix {
|
||||
width: 4em;
|
||||
}
|
||||
|
||||
.calendar .combo .active {
|
||||
background: #c8d0d4;
|
||||
padding: 0px;
|
||||
border-top: 1px solid #000;
|
||||
border-right: 1px solid #fff;
|
||||
border-bottom: 1px solid #fff;
|
||||
border-left: 1px solid #000;
|
||||
}
|
||||
|
||||
.calendar .combo .hilite {
|
||||
background: #048;
|
||||
color: #aef;
|
||||
}
|
||||
|
||||
.calendar td.time {
|
||||
border-top: 1px solid #000;
|
||||
padding: 1px 0px;
|
||||
text-align: center;
|
||||
background-color: #e8f0f4;
|
||||
}
|
||||
|
||||
.calendar td.time .hour,
|
||||
.calendar td.time .minute,
|
||||
.calendar td.time .ampm {
|
||||
padding: 0px 3px 0px 4px;
|
||||
border: 1px solid #889;
|
||||
font-weight: bold;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.calendar td.time .ampm {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.calendar td.time .colon {
|
||||
padding: 0px 2px 0px 3px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.calendar td.time span.hilite {
|
||||
border-color: #000;
|
||||
background-color: #667;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.calendar td.time span.active {
|
||||
border-color: #f00;
|
||||
background-color: #000;
|
||||
color: #0f0;
|
||||
}
|
||||
@@ -1,271 +0,0 @@
|
||||
/* The main calendar widget. DIV containing a table. */
|
||||
|
||||
.calendar {
|
||||
position: relative;
|
||||
display: none;
|
||||
border-top: 2px solid #fff;
|
||||
border-right: 2px solid #000;
|
||||
border-bottom: 2px solid #000;
|
||||
border-left: 2px solid #fff;
|
||||
font-size: 11px;
|
||||
color: #000;
|
||||
cursor: default;
|
||||
background: #c8d4d0;
|
||||
font-family: tahoma,verdana,sans-serif;
|
||||
}
|
||||
|
||||
.calendar table {
|
||||
border-top: 1px solid #000;
|
||||
border-right: 1px solid #fff;
|
||||
border-bottom: 1px solid #fff;
|
||||
border-left: 1px solid #000;
|
||||
font-size: 11px;
|
||||
color: #000;
|
||||
cursor: default;
|
||||
background: #c8d4d0;
|
||||
font-family: tahoma,verdana,sans-serif;
|
||||
}
|
||||
|
||||
/* Header part -- contains navigation buttons and day names. */
|
||||
|
||||
.calendar .button { /* "<<", "<", ">", ">>" buttons have this class */
|
||||
text-align: center;
|
||||
padding: 1px;
|
||||
border-top: 1px solid #fff;
|
||||
border-right: 1px solid #000;
|
||||
border-bottom: 1px solid #000;
|
||||
border-left: 1px solid #fff;
|
||||
}
|
||||
|
||||
.calendar .nav {
|
||||
background: transparent url(menuarrow.gif) no-repeat 100% 100%;
|
||||
}
|
||||
|
||||
.calendar thead .title { /* This holds the current "month, year" */
|
||||
font-weight: bold;
|
||||
padding: 1px;
|
||||
border: 1px solid #000;
|
||||
background: #788480;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.calendar thead .headrow { /* Row <TR> containing navigation buttons */
|
||||
}
|
||||
|
||||
.calendar thead .daynames { /* Row <TR> containing the day names */
|
||||
}
|
||||
|
||||
.calendar thead .name { /* Cells <TD> containing the day names */
|
||||
border-bottom: 1px solid #000;
|
||||
padding: 2px;
|
||||
text-align: center;
|
||||
background: #e8f4f0;
|
||||
}
|
||||
|
||||
.calendar thead .weekend { /* How a weekend day name shows in header */
|
||||
color: #f00;
|
||||
}
|
||||
|
||||
.calendar thead .hilite { /* How do the buttons in header appear when hover */
|
||||
border-top: 2px solid #fff;
|
||||
border-right: 2px solid #000;
|
||||
border-bottom: 2px solid #000;
|
||||
border-left: 2px solid #fff;
|
||||
padding: 0px;
|
||||
background-color: #d8e4e0;
|
||||
}
|
||||
|
||||
.calendar thead .active { /* Active (pressed) buttons in header */
|
||||
padding: 2px 0px 0px 2px;
|
||||
border-top: 1px solid #000;
|
||||
border-right: 1px solid #fff;
|
||||
border-bottom: 1px solid #fff;
|
||||
border-left: 1px solid #000;
|
||||
background-color: #b8c4c0;
|
||||
}
|
||||
|
||||
/* The body part -- contains all the days in month. */
|
||||
|
||||
.calendar tbody .day { /* Cells <TD> containing month days dates */
|
||||
width: 2em;
|
||||
text-align: right;
|
||||
padding: 2px 4px 2px 2px;
|
||||
}
|
||||
.calendar tbody .day.othermonth {
|
||||
font-size: 80%;
|
||||
color: #aaa;
|
||||
}
|
||||
.calendar tbody .day.othermonth.oweekend {
|
||||
color: #faa;
|
||||
}
|
||||
|
||||
.calendar table .wn {
|
||||
padding: 2px 3px 2px 2px;
|
||||
border-right: 1px solid #000;
|
||||
background: #e8f4f0;
|
||||
}
|
||||
|
||||
.calendar tbody .rowhilite td {
|
||||
background: #d8e4e0;
|
||||
}
|
||||
|
||||
.calendar tbody .rowhilite td.wn {
|
||||
background: #c8d4d0;
|
||||
}
|
||||
|
||||
.calendar tbody td.hilite { /* Hovered cells <TD> */
|
||||
padding: 1px 3px 1px 1px;
|
||||
border-top: 1px solid #fff;
|
||||
border-right: 1px solid #000;
|
||||
border-bottom: 1px solid #000;
|
||||
border-left: 1px solid #fff;
|
||||
}
|
||||
|
||||
.calendar tbody td.active { /* Active (pressed) cells <TD> */
|
||||
padding: 2px 2px 0px 2px;
|
||||
border-top: 1px solid #000;
|
||||
border-right: 1px solid #fff;
|
||||
border-bottom: 1px solid #fff;
|
||||
border-left: 1px solid #000;
|
||||
}
|
||||
|
||||
.calendar tbody td.selected { /* Cell showing selected date */
|
||||
font-weight: bold;
|
||||
border-top: 1px solid #000;
|
||||
border-right: 1px solid #fff;
|
||||
border-bottom: 1px solid #fff;
|
||||
border-left: 1px solid #000;
|
||||
padding: 2px 2px 0px 2px;
|
||||
background: #d8e4e0;
|
||||
}
|
||||
|
||||
.calendar tbody td.weekend { /* Cells showing weekend days */
|
||||
color: #f00;
|
||||
}
|
||||
|
||||
.calendar tbody td.today { /* Cell showing today date */
|
||||
font-weight: bold;
|
||||
color: #00f;
|
||||
}
|
||||
|
||||
.calendar tbody .disabled { color: #999; }
|
||||
|
||||
.calendar tbody .emptycell { /* Empty cells (the best is to hide them) */
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.calendar tbody .emptyrow { /* Empty row (some months need less than 6 rows) */
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* The footer part -- status bar and "Close" button */
|
||||
|
||||
.calendar tfoot .footrow { /* The <TR> in footer (only one right now) */
|
||||
}
|
||||
|
||||
.calendar tfoot .ttip { /* Tooltip (status bar) cell <TD> */
|
||||
background: #e8f4f0;
|
||||
padding: 1px;
|
||||
border: 1px solid #000;
|
||||
background: #788480;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.calendar tfoot .hilite { /* Hover style for buttons in footer */
|
||||
border-top: 1px solid #fff;
|
||||
border-right: 1px solid #000;
|
||||
border-bottom: 1px solid #000;
|
||||
border-left: 1px solid #fff;
|
||||
padding: 1px;
|
||||
background: #d8e4e0;
|
||||
}
|
||||
|
||||
.calendar tfoot .active { /* Active (pressed) style for buttons in footer */
|
||||
padding: 2px 0px 0px 2px;
|
||||
border-top: 1px solid #000;
|
||||
border-right: 1px solid #fff;
|
||||
border-bottom: 1px solid #fff;
|
||||
border-left: 1px solid #000;
|
||||
}
|
||||
|
||||
/* Combo boxes (menus that display months/years for direct selection) */
|
||||
|
||||
.calendar .combo {
|
||||
position: absolute;
|
||||
display: none;
|
||||
width: 4em;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
cursor: default;
|
||||
border-top: 1px solid #fff;
|
||||
border-right: 1px solid #000;
|
||||
border-bottom: 1px solid #000;
|
||||
border-left: 1px solid #fff;
|
||||
background: #d8e4e0;
|
||||
font-size: 90%;
|
||||
padding: 1px;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.calendar .combo .label,
|
||||
.calendar .combo .label-IEfix {
|
||||
text-align: center;
|
||||
padding: 1px;
|
||||
}
|
||||
|
||||
.calendar .combo .label-IEfix {
|
||||
width: 4em;
|
||||
}
|
||||
|
||||
.calendar .combo .active {
|
||||
background: #c8d4d0;
|
||||
padding: 0px;
|
||||
border-top: 1px solid #000;
|
||||
border-right: 1px solid #fff;
|
||||
border-bottom: 1px solid #fff;
|
||||
border-left: 1px solid #000;
|
||||
}
|
||||
|
||||
.calendar .combo .hilite {
|
||||
background: #048;
|
||||
color: #aef;
|
||||
}
|
||||
|
||||
.calendar td.time {
|
||||
border-top: 1px solid #000;
|
||||
padding: 1px 0px;
|
||||
text-align: center;
|
||||
background-color: #e8f0f4;
|
||||
}
|
||||
|
||||
.calendar td.time .hour,
|
||||
.calendar td.time .minute,
|
||||
.calendar td.time .ampm {
|
||||
padding: 0px 3px 0px 4px;
|
||||
border: 1px solid #889;
|
||||
font-weight: bold;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.calendar td.time .ampm {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.calendar td.time .colon {
|
||||
padding: 0px 2px 0px 3px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.calendar td.time span.hilite {
|
||||
border-color: #000;
|
||||
background-color: #667;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.calendar td.time span.active {
|
||||
border-color: #f00;
|
||||
background-color: #000;
|
||||
color: #0f0;
|
||||
}
|
||||
@@ -12,7 +12,7 @@
|
||||
* Read the entire license text here: http://www.gnu.org/licenses/lgpl.html
|
||||
*/
|
||||
|
||||
// $Id: calendar.js,v 1.2 2005/10/09 11:16:50 wurley Exp $
|
||||
// $Id$
|
||||
|
||||
/** The Calendar object constructor. */
|
||||
Calendar = function (firstDayOfWeek, dateStr, onSelected, onClose) {
|
||||
|
||||
@@ -1,119 +0,0 @@
|
||||
<?php
|
||||
|
||||
/**
|
||||
* File: calendar.php | (c) dynarch.com 2004
|
||||
* Distributed as part of "The Coolest DHTML Calendar"
|
||||
* under the same terms.
|
||||
* -----------------------------------------------------------------
|
||||
* This file implements a simple PHP wrapper for the calendar. It
|
||||
* allows you to easily include all the calendar files and setup the
|
||||
* calendar by instantiating and calling a PHP object.
|
||||
*/
|
||||
|
||||
define('NEWLINE', "\n");
|
||||
|
||||
class DHTML_Calendar {
|
||||
var $calendar_lib_path;
|
||||
|
||||
var $calendar_file;
|
||||
var $calendar_lang_file;
|
||||
var $calendar_setup_file;
|
||||
var $calendar_theme_file;
|
||||
var $calendar_options;
|
||||
|
||||
function DHTML_Calendar($calendar_lib_path = '/calendar/',
|
||||
$lang = 'en',
|
||||
$theme = 'calendar-win2k-1',
|
||||
$stripped = true) {
|
||||
if ($stripped) {
|
||||
$this->calendar_file = 'calendar_stripped.js';
|
||||
$this->calendar_setup_file = 'calendar-setup_stripped.js';
|
||||
} else {
|
||||
$this->calendar_file = 'calendar.js';
|
||||
$this->calendar_setup_file = 'calendar-setup.js';
|
||||
}
|
||||
$this->calendar_lang_file = 'lang/calendar-' . $lang . '.js';
|
||||
$this->calendar_theme_file = $theme.'.css';
|
||||
$this->calendar_lib_path = preg_replace('/\/+$/', '/', $calendar_lib_path);
|
||||
$this->calendar_options = array('ifFormat' => '%Y/%m/%d',
|
||||
'daFormat' => '%Y/%m/%d');
|
||||
}
|
||||
|
||||
function set_option($name, $value) {
|
||||
$this->calendar_options[$name] = $value;
|
||||
}
|
||||
|
||||
function load_files() {
|
||||
echo $this->get_load_files_code();
|
||||
}
|
||||
|
||||
function get_load_files_code() {
|
||||
$code = ( '<link rel="stylesheet" type="text/css" media="all" href="' .
|
||||
$this->calendar_lib_path . $this->calendar_theme_file .
|
||||
'" />' . NEWLINE );
|
||||
$code .= ( '<script type="text/javascript" src="' .
|
||||
$this->calendar_lib_path . $this->calendar_file .
|
||||
'"></script>' . NEWLINE );
|
||||
$code .= ( '<script type="text/javascript" src="' .
|
||||
$this->calendar_lib_path . $this->calendar_lang_file .
|
||||
'"></script>' . NEWLINE );
|
||||
$code .= ( '<script type="text/javascript" src="' .
|
||||
$this->calendar_lib_path . $this->calendar_setup_file .
|
||||
'"></script>' );
|
||||
return $code;
|
||||
}
|
||||
|
||||
function _make_calendar($other_options = array()) {
|
||||
$js_options = $this->_make_js_hash(array_merge($this->calendar_options, $other_options));
|
||||
$code = ( '<script type="text/javascript">Calendar.setup({' .
|
||||
$js_options .
|
||||
'});</script>' );
|
||||
return $code;
|
||||
}
|
||||
|
||||
function make_input_field($cal_options = array(), $field_attributes = array()) {
|
||||
$id = $this->_gen_id();
|
||||
$attrstr = $this->_make_html_attr(array_merge($field_attributes,
|
||||
array('id' => $this->_field_id($id),
|
||||
'type' => 'text')));
|
||||
echo '<input ' . $attrstr .'/>';
|
||||
echo '<a href="#" id="'. $this->_trigger_id($id) . '">' .
|
||||
'<img align="middle" border="0" src="' . $this->calendar_lib_path . 'img.gif" alt="" /></a>';
|
||||
|
||||
$options = array_merge($cal_options,
|
||||
array('inputField' => $this->_field_id($id),
|
||||
'button' => $this->_trigger_id($id)));
|
||||
echo $this->_make_calendar($options);
|
||||
}
|
||||
|
||||
/// PRIVATE SECTION
|
||||
|
||||
function _field_id($id) { return 'f-calendar-field-' . $id; }
|
||||
function _trigger_id($id) { return 'f-calendar-trigger-' . $id; }
|
||||
function _gen_id() { static $id = 0; return ++$id; }
|
||||
|
||||
function _make_js_hash($array) {
|
||||
$jstr = '';
|
||||
reset($array);
|
||||
while (list($key, $val) = each($array)) {
|
||||
if (is_bool($val))
|
||||
$val = $val ? 'true' : 'false';
|
||||
else if (!is_numeric($val))
|
||||
$val = '"'.$val.'"';
|
||||
if ($jstr) $jstr .= ',';
|
||||
$jstr .= '"' . $key . '":' . $val;
|
||||
}
|
||||
return $jstr;
|
||||
}
|
||||
|
||||
function _make_html_attr($array) {
|
||||
$attrstr = '';
|
||||
reset($array);
|
||||
while (list($key, $val) = each($array)) {
|
||||
$attrstr .= $key . '="' . $val . '" ';
|
||||
}
|
||||
return $attrstr;
|
||||
}
|
||||
};
|
||||
|
||||
?>
|
||||
File diff suppressed because one or more lines are too long
Binary file not shown.
|
Before Width: | Height: | Size: 49 B |
Reference in New Issue
Block a user