Another DHTML Calendar : Calendar « GUI Components « JavaScript DHTML

JavaScript DHTML
1. Ajax Layer
2. Data Type
3. Date Time
4. Development
5. Document
6. Dojo toolkit
7. Event
8. Event onMethod
9. Ext JS
10. Form Control
11. GUI Components
12. HTML
13. Javascript Collections
14. Javascript Objects
15. Javascript Properties
16. jQuery
17. Language Basics
18. Mochkit
19. Mootools
20. Node Operation
21. Object Oriented
22. Page Components
23. Rico
24. Scriptaculous
25. Security
26. SmartClient
27. Style Layout
28. Table
29. Utilities
30. Window Browser
31. YUI Library
Java
Java Tutorial
Java Source Code / Java Documentation
Java Open Source
Jar File Download
Java Articles
Java Products
Java by API
Photoshop Tutorials
Maya Tutorials
Flash Tutorials
3ds-Max Tutorials
Illustrator Tutorials
GIMP Tutorials
C# / C Sharp
C# / CSharp Tutorial
C# / CSharp Open Source
ASP.Net
ASP.NET Tutorial
JavaScript Tutorial
JavaScript Reference
HTML / CSS
HTML CSS Reference
C / ANSI-C
C Tutorial
C++
C++ Tutorial
Ruby
PHP
Python
Python Tutorial
Python Open Source
SQL Server / T-SQL
SQL Server / T-SQL Tutorial
Oracle PL / SQL
Oracle PL/SQL Tutorial
PostgreSQL
SQL / MySQL
MySQL Tutorial
VB.Net
VB.Net Tutorial
Flash / Flex / ActionScript
VBA / Excel / Access / Word
XML
XML Tutorial
Microsoft Office PowerPoint 2007 Tutorial
Microsoft Office Excel 2007 Tutorial
Microsoft Office Word 2007 Tutorial
JavaScript DHTML » GUI Components » Calendar 
Another DHTML Calendar
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head><title>The Boring DHTML Date Picker Test</title><!-- $Id: calendario_test.html,v 1.6 2003/09/24 16:15:24 neves Exp $ -->
   
    
<!-- calendario.js -->
<script type="text/javascript" language="JavaScript1.3">
/*
 * The Boring Date Picker, a DTML widget to select a date.
 * This code is released under GNU GPL, see file LICENSE for details.
 *
 * $Id: calendario.js,v 1.9 2003/09/24 16:15:24 neves Exp $
 */

// Initialize arrays.
var months = new Array("Janeiro""Fevereiro""Marco""Abril"
                       "Maio""Junho""Julho""Agosto"
                       "Setembro""Outubro""Novembro""Dezembro");

var days = new Array("D""S""T""Q""Q""S""S");

/**
 * id = id of calendar element in the page (unique in page)
 * form = associated form of calendar element
 */
Calendar = function(id) {
    this.el = document.getElementById(id);
    this.displayDate = new Date();
    this.cid = id; //calendarId

    this.form = Calendar.getParentForm(this.el);
    this.form[idthis//now I can access the calendar from the form
    
    this.specialWeekDays = "06"//weekend: saturday and sunday
    this.validInterval = [null, null];
};


//Static methods and utility functions

Calendar.getParentForm = function(el) {
    var form = el.parentNode;
    while (form.tagName != "FORM") {
        //no error checking
  form form.parentNode;
    }
    return form;
}


Calendar.monthsSize = new Array(312831303130
                                313130313031)

Calendar.daysInMonth = function(dt) {
    if (dt.getMonth() == 1) {
        var year = dt.getFullYear();
  return (((== year % 4&& (!= (year % 100))) ||
                (== year % 400)) 29 28;
    }

    return Calendar.monthsSize[dt.getMonth()];
}

Calendar.addEvent = function(el, evname, func) {
    //Using this to add static Calendar functions as events
    if (!funcvar func = Calendar["on" + evname];
    evname = evname.toLowerCase();
    if (el.attachEvent) { // IE
        el.attachEvent("on" + evname, func);
    else if (el.addEventListener) { // Gecko / W3C
        el.addEventListener(evname, func, true);
    else // Opera (or old browsers)
        el["on" + evname= func;
    }
};

Calendar.removeEvent = function(el, evname, func) {
    if (el.detachEvent) { // IE
        el.detachEvent("on" + evname, func);
    else if (el.removeEventListener) { // Gecko / W3C
        el.removeEventListener(evname, func, true);
    else // Opera (or old browsers)
        el["on" + evnamenull;
    }
};

//Change element classes to be sensible to mouse over and click
//so it have a feeling of pressed button
Calendar.addMouseSensivity = function(el) {
    Calendar.addEvent(el, "MouseOver");
    Calendar.addEvent(el, "MouseOut");
    Calendar.addEvent(el, "MouseDown");
    Calendar.addEvent(el, "MouseUp");
}


Calendar.removeClass = function(el, className) {
    if (!(el && el.className)) {
        return;
    }
    var cls = el.className.split(" ");
    var ar = new Array();
    for (var i = cls.length; i > 0;) {
        if (cls[--i!= className) {
            ar[ar.length= cls[i];
        }
    }
    el.className = ar.join(" ");
};

Calendar.addClass = function(el, className) {
    Calendar.removeClass(el, className);
    el.className += " " + className;
};

Calendar.hasClass = function(el, className) {
    var classes = el.className.split(" ");
    for (var i=0; i<classes.length; i++) {
        if (classes[i== className) {
            return true;
        }
    }
    return false;
};


//##end of static methods

Calendar.prototype.addHidden = function(name) {
    var el = document.createElement("input");
    el.type = "hidden";
    el.name = name;
    this.form.appendChild(el);
};

Calendar.prototype.setValidInterval = function(datesArray) {
    if (datesArray.length == 2) {
        this.validInterval = datesArray;
        if (this.validInterval[0&&
            this.validInterval[0].valueOf() this.displayDate.valueOf()) {
            this.displayDate = this.validInterval[0];
        else if (this.validInterval[1&&
            this.validInterval[1].valueOf() this.displayDate.valueOf()) {
            this.displayDate = this.validInterval[1];
        }
    }
}

Calendar.prototype.isDisabled = function(dt) {
    if (this.validInterval) {
        if (this.validInterval[0&&
            this.validInterval[0].getTime() > dt.getTime()) {
            return true;
        else if (this.validInterval[1&&
                   this.validInterval[1].getTime() < dt.getTime()) {
            return true;
        }
    }
    return false;            
};


Calendar.prototype.setDisplayDate = function(dt) {
    if (!this.isDisabled(dt)) {
        this.displayDate = dt;
    else {
        if (this.validInterval[0&&
            this.displayDate.valueOf() this.validInterval[0]) {
            this.displayDate = this.validInterval[0];
        else {
            //so we must have na upper valid date
            this.displayDate = this.validInterval[1];
        }
    }
    this.draw();
};

Calendar.prototype.setDate = function(dt) {
    this.displayDate = dt;
    this.selectedDate = dt;
    var formDay = this.el.id + "Day";
    var formMonth = this.el.id + "Month";
    var formYear = this.el.id + "Year";
    var formDate = this.el.id + "Date";
    if (this.form[formDate== null) {
  this.addHidden(formDay);
  this.addHidden(formYear);
  this.addHidden(formMonth);
  this.addHidden(formDate);
    }


    var y = dt.getFullYear();
    var m = dt.getMonth()
    var d = dt.getDate();

    this.form[formDay].value = d;
    this.form[formMonth].value = m;
    this.form[formYear].value = y;
    var a = this.form[formDate];
    a.value = y + "-" 
    if (m<9a.value += "0";
    a.value += (m+1"-" //month to [1,12]
    if (d<10a.value += "0";
    a.value += d; //2003-09-07

    this.draw();



//returns last day from previous month
Calendar.previousMonth = function(dt) {
    var newMonth = dt.getMonth() 1;
    var year = dt.getFullYear();
    if (newMonth < 0) {
       newMonth = 11;
       year--;
    }
    var previous = new Date(year, newMonth, 1);
    previous.setDate(Calendar.daysInMonth(previous));
    return previous;
}

Calendar.prototype.decreaseMonth = function() {
    this.setDisplayDate(Calendar.previousMonth(this.displayDate));
    this.draw();
}

//returns next day of next month
Calendar.nextMonth = function(dt) {
    var newMonth = dt.getMonth() 1;
    var year = dt.getFullYear();
    if (newMonth % 12 != newMonth) {
       newMonth = newMonth % 12;
       year++;
    }
    return new Date(year, newMonth, 1);
}
        
Calendar.prototype.increaseMonth = function() {
    this.setDisplayDate(Calendar.nextMonth(this.displayDate));
    this.draw();
}


Calendar.prototype.selectDay = function(dayCell) {
    var day = parseInt(dayCell.innerHTML);
    if (!isNaN(day)) {
        this.setDate(new Date(this.displayDate.getFullYear(),
                              this.displayDate.getMonth(),
                              day));
    }
}

  
//Let's decorate the widget table with the classes we want
Calendar.prototype.decorate = function() {
    var tds = this.form.getElementsByTagName('TD');
    for (var i=0; i<tds.length; i++) {
        //to allow access of calendar objects from events
        tds[i].datePicker = this;
        if (Calendar.hasClass(tds[i]'day')  &&
            !Calendar.hasClass(tds[i]'disabled')) {
            Calendar.addMouseSensivity(tds[i]);
            Calendar.addEvent(tds[i]'Click');
            
        else if (Calendar.hasClass(tds[i]'button')) {
            Calendar.addMouseSensivity(tds[i]);
        }
    }
    
}

/** 
 * Selected weekdays columns will have a different color.
 * The default is to select the weekend (saturday and sunday).
 */
Calendar.prototype.setSpecialWeekDays = function(weekDaysArray) {
    if (weekDaysArray.length) {
        this.specialWeekDays = weekDaysArray.join('')//strings have indexOf
    else {
        this.specialWeekDays = '';
    }
}

Calendar.onMouseOver = function(ev) {
    if (!evvar ev = window.event;
    var el = ev.target ? ev.target : ev.srcElement;
    Calendar.addClass(el, 'hilite');
}

Calendar.onMouseOut = function(ev) {
    if (!evvar ev = window.event;
    var el = ev.target ? ev.target : ev.srcElement;
    
    Calendar.removeClass(el, 'hilite');
    Calendar.removeClass(el, 'active');
}

Calendar.onMouseDown = function(ev) {
    if (!evvar ev = window.event;
    var el = ev.target ? ev.target : ev.srcElement;
    Calendar.removeClass(el, 'hilite');
    Calendar.addClass(el, 'active');
}

Calendar.onMouseUp = function(ev) {
    if (!evvar ev = window.event;
    var el = ev.target ? ev.target : ev.srcElement;
    Calendar.removeClass(el, 'active');
    Calendar.addClass(el, 'hilite');
}

Calendar.onClick = function(ev) {
    if (!evvar ev = window.event;
    var el = ev.target ? ev.target : ev.srcElement;
    Calendar.addClass(el, 'selected');
    el.datePicker.selectDay(el);
}

Calendar.prototype.getHeader = function () {
    var header = '<tr><td';

    var lastDayMonthBefore = Calendar.previousMonth(this.displayDate);
    if (this.isDisabled(lastDayMonthBefore)) {
        header += '> ';
    else 
        header += ' onclick="this.datePicker.decreaseMonth();" class="button" title="Mes anterior">&laquo;';
    }
    header += '</td>' +
      '<td colspan="5" class="title"' + 
      months[this.displayDate.getMonth()] ' ' 
      this.displayDate.getFullYear() ' </td><td';

    var firstDayNextMonth = Calendar.nextMonth(this.displayDate);
    if (this.isDisabled(firstDayNextMonth)) {
        header += '> ';
    else {
        header += ' onclick="this.datePicker.increaseMonth();"  \
                  class="button" title="Proximo mes">&raquo;';
    }
    header += '</td></tr>';
    return header;        
}

/**
 * return weekdays header row
 */
Calendar.prototype.getWeekdays = function () {
    var weekDaysHeader = '<tclass="daynames">';
    for (var i = 0; i < days.length; i++) {
        //Nonbreaking spaces to make it look better with coolest dhtml 
        //calendar css
  weekDaysHeader += '<tclass="name';
        if (this.specialWeekDays.indexOf(i) != -1) {
            weekDaysHeader += ' weekend'
        }
        weekDaysHeader += '">' + days[i'</td>';
    }
    weekDaysHeader += '</tr>';
    return weekDaysHeader;
}


Calendar.prototype.getDaysGrid = function () {
    var firstWeekday = (new Date(this.displayDate.getFullYear(),
                                 this.displayDate.getMonth(),
                                 1)).getDay();
    
    var gridSize = 6//7 days in week, always with 6 rows
    var grid = new Array(gridSize);
    for (var i=0; i<gridSize; i++) {
        var day = i - firstWeekday + 1;
        if (day < || 
            day > Calendar.daysInMonth(this.displayDate)) {
            grid[inull;
        else {
            grid [i= day;
        }
    }
    return grid;
}


Calendar.prototype.getDays = function () {
    var daysTable = '';
    var grid = this.getDaysGrid();
    var weekDay;
    
    for (var i=0; i<grid.length; i++) {
        weekDay = i % 7;
        if (weekDay == 0) {
            daysTable += i!='</tr>\n' : '';
            daysTable += '<tclass="daysrow">\n';
        }
        if (grid[i]) {
            daysTable += '<tclass="day';
            if (this.selectedDate &&
                this.selectedDate.getFullYear() == this.displayDate.getFullYear() &&
                this.selectedDate.getMonth() == this.displayDate.getMonth() &&
                this.selectedDate.getDate() == grid[i]) {
                daysTable += ' selected';
            }
            if (this.specialWeekDays.indexOf(weekDay) != -1) {
                daysTable += ' weekend';                
            }
            if (this.isDisabled(new Date(this.displayDate.getFullYear(),
                                         this.displayDate.getMonth(),
                                         grid[i]))) {
                    daysTable += ' disabled';                
                }
            daysTable += '">'+ grid[i'</td>';
        else {
            daysTable += '<tclass="day disabled">&nbsp;</td>';
        }
    }
    //   alert(daysTable)
    return daysTable + '</tr>'
}

Calendar.prototype.draw = function() {
    this.el.innerHTML = '<table cellspacing="0" cellpadding="0"><thead>\n' +
                        this.getHeader() +
                        this.getWeekdays() +
                        "\n</thead><tbody>\n" +
                        this.getDays(); +
                        "\n</tbody></table>";
    this.decorate();
}


</script>
<!-- calendario_test.js -->
<script type="text/javascript" language="JavaScript1.3">
/*
 * This must run with jsunit from cvs from after 15/9
 *
 *$Id: calendario_test.js,v 1.7 2003/09/24 16:15:24 neves Exp $
 */

function setUp() {
    c = new Calendar("datePicker");
    form = document.forms[0]

}


function testGetParentForm() {
    assertEquals(document.formulario, c.form);  
}


function testSetDate() {
    var y = 1977;
    var m = 11;
    var d = 10;
    c.setDate(new Date(y, m, d,12));
    assertEquals(y+""form.datePickerYear.value);
    assertEquals(d+""form.datePickerDay.value);
    assertEquals(m+""form.datePickerMonth.value);
    assertEquals(y+"-"+(m+1)+"-"+d, form.datePickerDate.value);
}

function testGetHeader() {
    var month = 2;
    var year = 2001;
    c.setDate(new Date(year, month, 1));
    var h = c.getHeader();
    assertNotEquals("Header must have the year",
                    -1
                    h.toLowerCase().indexOf(year));
    assertNotEquals("Header must have the month",
                    -1
                    h.toLowerCase().indexOf(month));
}

function equalArrays(array1, array2) {
    if (array1.length != array2.length) {
        return false;
    }
    for (var i=0; i<array1.length; i++) {
        if (array1[i!= array2[i]) {
            return false;
        }
    }
    return true;
}

function testGetDaysGrid() {
    var grid;
    c.setDate(new Date(200381));
    var sep2003 = new Array(null, 123456,
                            78910111213,
                            14151617181920,
                            21222324252627,
                            282930, null, null, null, null,
                            null, null, null, null, null, null, null);
    grid = c.getDaysGrid();
    assert("Equal values for grid of september 2003",
           equalArrays(sep2003, grid));

    //starts saturday
    c.setDate(new Date(2003101));
    var nov2003 = new Array(null, null, null, null, null, null, 1,
                            2345678,
                            9101112131415,
                            16171819202122,
                            23242526272829,
                            30, null, null, null, null, null, null);
    grid = c.getDaysGrid();
    assert("Equal values for grid of november 2003",
           equalArrays(nov2003, grid));

    //just 4 rows
    c.setDate(new Date(200911));
    var feb2009 = new Array(1234567,
                            891011121314,
                            15161718192021,
                            22232425262728,
                            null, null, null, null, null, null, null,
                            null, null, null, null, null, null, null);
    grid = c.getDaysGrid();
    assert("Equal values for grid offebruary 2003",
           equalArrays(feb2009, grid));

    //bissext
    c.setDate(new Date(200411));
    var feb2004 = new Array(1234567,
                            891011121314,
                            15161718192021,
                            22232425262728,
                            29, null, null, null, null, null, null,
                            null, null, null, null, null, null, null);
    grid = c.getDaysGrid();
    assert("Equal values for grid of february 2004",
           equalArrays(feb2004, grid));


}


//aux func to test increase and decrease
function getTitleElement() {
    var el = form.getElementsByTagName('thead')[0];
    var childs =  el.getElementsByTagName('td');
    for (var i=0; i<childs.length; i++) {
        if (childs[i].className == "title") {
            el = childs[i];
        }
    }
    return el;
}

function testIncreaseMonth() {
    var el;
    for (var i=0; i<11; i++) {
        c.setDate(new Date(2003, i ,1));
  c.increaseMonth();
        el = getTitleElement();
  assert("Increased Month name " + months[i+1
               " isn't in header cell",
               el.innerHTML.indexOf(months[i+1])!=-1);
    }
    c.increaseMonth();
    el = getTitleElement();
    assert("Increased Month name " + months[0" isn't in header cell",
           el.innerHTML.indexOf(months[0])!=-1);
}

function testDecreaseMonth() {
    var el;
    for (var i=11; i>0; i--) {
        c.setDate(new Date(2003, i ,1));
  c.decreaseMonth();
        el = getTitleElement();
  assert("Decreased Month name " + months[i-1
               " isn't in header cell",
               el.innerHTML.indexOf(months[i-1])!=-1);
    }
    c.decreaseMonth();
    el = getTitleElement();
    assert("Decreased Month name " + months[11" isn't in header cell",
           el.innerHTML.indexOf(months[11])!=-1);
}

function testHasClass() {
    var el = document.createElement('p');
    el.className = "abc";
    assert(Calendar.hasClass(el, "abc"));
    el.className = "abcde";
    assert(!Calendar.hasClass(el, "abc"));
    el.className = "abc cde";
    assert(Calendar.hasClass(el, "abc"));
    el.className = "cde abc";
    assert(Calendar.hasClass(el, "abc"));
    el.className = "aaa abc cde";
    assert(Calendar.hasClass(el, "abc"));

}

function testAddClass() {
  var el = document.createElement('p');
  Calendar.addClass(el, "abc");
  assert(Calendar.hasClass(el, "abc"));
  Calendar.addClass(el, "abc");
  assert(Calendar.hasClass(el, "abc"));
  Calendar.addClass(el, "cde");
  assert(Calendar.hasClass(el, "abc"));
  assert(Calendar.hasClass(el, "cde"));
}

function testRemoveClass() {
    var el = document.createElement('p');
    el.className = "abc";
    Calendar.removeClass(el, "abc");
    assert(!Calendar.hasClass(el, "abc"));
    Calendar.removeClass(el, "abc");
    assert(!Calendar.hasClass(el, "abc"));
    el.className = "abc cde eft";
    Calendar.removeClass(el, "cde");
    assert(Calendar.hasClass(el, "abc"));
    assert(Calendar.hasClass(el, "eft"));
    assert(!Calendar.hasClass(el, "cde"));
}

function testSelectDay() {
    var y = 2003;
    var m = 9;
    var d = 15;
    c.setDate(new Date(y, m, d));
    var days = form.getElementsByTagName("TBODY");
    days = form.getElementsByTagName("TD");
    for (var i=0; i<days.length; i++) {
        if (parseInt(days[i].innerHTML== d) {
            assert(Calendar.hasClass(days[i],'selected'));
        else {
            assert(!Calendar.hasClass(days[i],'selected'));
        }
    }
}

function testInvalidDates() {
    c.setDisplayDate(new Date(2003522));
    var dateMin = new Date(2003502);
    var dateMax = new Date(2003529);
    var dateMiddle = new Date(2003515);
    c.setValidInterval([dateMin, 
                        dateMax]);
    assert("Less than min must be disabled",
           c.isDisabled(new Date(200351)));
    assert("Greater than max must be disabled",
           c.isDisabled(new Date(2003530)));
    assert("Date in middle must be valid",
           !c.isDisabled(dateMiddle));
    assert("Min interval date must be enabled",
           !c.isDisabled(dateMin));
    assert("Max interval date must be enabled",
           !c.isDisabled(dateMax));

    c.setDisplayDate(new Date(200351));
    assert("Display date can't be set out of valid interval",
           c.displayDate.valueOf() >= dateMin.valueOf());
    c.setValidInterval([dateMiddle, 
                        dateMax]);
    assert("Display date can't be set out of valid interval",
           c.displayDate.valueOf() >= dateMiddle.valueOf());
    
    //Days before limit are disabled
    c.setValidInterval([dateMin, 
                        dateMax]);
    var days = form.getElementsByTagName("TBODY")[1].getElementsByTagName("TD");
    
    for (var i=0; i<days.length; i++) {
        var cellDay = parseInt(days[i].innerHTML);
        if (!isNaN(cellDay&&
            cellDay >= dateMin.getDate() &&
            cellDay <= dateMax.getDate()) {
            assert("Day " + cellDay + " can't be disabled",
                   !Calendar.hasClass(days[i]'disabled'));
        else {
            assert("Day " + cellDay + " in pos " + i + " must be disabled",
                   Calendar.hasClass(days[i]'disabled'));
        }
    }
}


function testDisabledArrows() {
    var dateMin = new Date(2003502);
    var dateMax = new Date(2003629);
    c.setValidInterval([dateMin, dateMax]);

    c.setDisplayDate(dateMin);
    c.draw();
    var header = form.getElementsByTagName("THEAD")[0].getElementsByTagName("TD");
    var leftArrow = header[0];
    var rightArrow = header[2];

    assert("Left arrow can't be active if month before just has invalid dates",
           !Calendar.hasClass(leftArrow, 'button'));
    assert("Right arrow must be active if month after has any valid date",
           Calendar.hasClass(rightArrow, 'button'));

    c.setDisplayDate(dateMax);
    c.draw();
    header = form.getElementsByTagName("THEAD")[0].getElementsByTagName("TD");
    leftArrow = header[0];
    rightArrow = header[2];

    assert("Left arrow must be active if month before has any valid date",
           Calendar.hasClass(leftArrow, 'button'));
    assert("Right arrow can't be active if month after just has invalid dates",
           !Calendar.hasClass(rightArrow, 'button'));
}

</script>
<!-- calendar-win2k-1.css -->
<style rel="STYLESHEET" type="text/css" href="">
/* 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 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: #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: #c4c0b8;
}


/* The body part -- contains all the days in month. */

.calendar tbody .day /* Cells <TD> containing month days dates */
  text-align: right;
  padding: 2px 4px 2px 2px;
}

.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) */

.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: smaller;
  padding: 1px;
}

.combo .label {
  text-align: center;
  padding: 1px;
}

.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;
}

.combo .hilite {
  background: #048;
  color: #fea;
}

</style>

<style>
.calendar tbody .day {
        width: 1em;
}
.calendar thead .hilite 
        cursor: pointer;
}

.calendar tbody td.hilite 
        cursor: pointer;
}

.calendar tbody td.selected 
        font-weight: normal;
        color: blue;
        background: #FFA;
}

.calendar thead .name {
        font-weight: bold;
 /*       text-align: left;*/
}


.calendar tbody td.disabled.weekend {
  color: #f99;    
}



</style></head>

  <body onload="c=new Calendar('datePicker'); c.setValidInterval([new Date(2003, 7, 15), new Date(2005, 10, 25)]); c.draw()" bgcolor="#ffffff">

    <h1>The Boring DHTML Date Picker Widget</h1>
    </p><h2>Try it</h2>
    <p>Below is the sample of the Boring Date Picker Widget with valid dates
      from "2003-08-15" to "2005-11-25". Select a date.
        </p><form action="" method="post" name="formulario">
          <div id="datePicker" style="display: block; float: left;" class="calendar"><table cellpadding="0" cellspacing="0"><thead>
<tr>
    <td onclick="this.datePicker.decreaseMonth();" class="button" 
        title="Mes anterior">--</td>
    <td colspan="5" class="title"> Agosto 2005 </td>
    <td onclick="this.datePicker.increaseMonth();" class="button" 
        title="Proximo mes">--</td>
</tr>

<tr class="daynames">
    <td class="name weekend">D</td>
    <td class="name">S</td>
    <td class="name">T</td>
    <td class="name">Q</td>
    <td class="name">Q</td>
    <td class="name">S</td>
    <td class="name weekend">S</td></tr>
</thead><tbody>
<tr class="daysrow">
<td class="day disabled">&nbsp;</td><td class="day">1</td><td class="day">2</td><td class="day">3</td><td class="day">4</td><td class="day">5</td><td class="day weekend">6</td></tr>
<tr class="daysrow">
<td class="day weekend">7</td><td class="day">8</td><td class="day">9</td><td class="day">10</td><td class="day">11</td><td class="day">12</td><td class="day weekend">13</td></tr>
<tr class="daysrow">
<td class="day weekend">14</td><td class="day">15</td><td class="day">16</td><td class="day">17</td><td class="day">18</td><td class="day">19</td><td class="day weekend">20</td></tr>
<tr class="daysrow">
<td class="day weekend">21</td><td class="day">22</td><td class="day">23</td><td class="day">24</td><td class="day">25</td><td class="day">26</td><td class="day weekend">27</td></tr>
<tr class="daysrow">
<td class="day weekend">28</td><td class="day">29</td><td class="day">30</td><td class="day">31</td><td class="day disabled">&nbsp;</td><td class="day disabled">&nbsp;</td><td class="day disabled">&nbsp;</td></tr>
<tr class="daysrow">
<td class="day disabled">&nbsp;</td><td class="day disabled">&nbsp;</td><td class="day disabled">&nbsp;</td><td class="day disabled">&nbsp;</td><td class="day disabled">&nbsp;</td><td class="day disabled">&nbsp;</td><td class="day disabled">&nbsp;</td></tr></tbody></table></div>

          <br clear="all">
            <p> 
              </p><div id="preview" style="padding: 2px; font-size: 150%; text-align: center;">
              </div><p></p>

        </form>

  </body></html>

           
         
  
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. Displaying the Calendar
35. Calendar (IE only)
36. Calendar in slide tab
37. Event Calendar
38. Open calendar
39. swazz calendar 1.0
40. jquery calendar
www.java2java.com | Contact Us
Copyright 2009 - 12 Demo Source and Support. All rights reserved.
All other trademarks are property of their respective owners.