Another DHTML Calendar : Calendar : GUI Components JAVASCRIPT DHTML TUTORIALS


JAVASCRIPT DHTML TUTORIALS » 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>

           
       



-

Leave a Comment / Note


 
Verification is used to prevent unwanted posts (spam). .

Follow Navioo On Twitter

JAVASCRIPT DHTML TUTORIALS

 Navioo GUI Components
» Calendar