Calendar > TextBox > Input > Element

A control that accepts text input, but will display an interactive calendar when the textbox has focus. You can select a date displayed in the calendar portion and navigate the months with the < and > links. To declaratively create a calendar, include “calendar” as a class of a textbox.

<input type="text" class="calendar" />




effect Default: "none" Effect to use when displaying the calendar. See more on Effects.
pad Default: "false" If set to true, the previous and next month’s dates are displayed around the current month.
padclass Default: "" The class to assign to padding cells before and after the current month.
selectedclass Default: "" The class to assign to the selected date on the display.


Calendar() Creates a new calendar control.
Calendar(String id) Creates a new calendar control with the given id.

Property Functions

Pad(Boolean pad) Gets or sets whether the padding dates are displayed.  
PadClass(String className) Gets or sets the class to give to padding cells.  
SelectedClass(String className) Gets or sets the class given to the selected date.  
SelectedDate(DateTime date) Gets or set the currently selected date.  


Hide()   Hides the calendar display.  
Refresh()   Refreshes the calendar display.  
Show()   Shows the calendar display.  



The display that’s created will be given the class "calendar". All other classes will be left on the textbox. Here is an image describing how to style each section of a calendar control using css selectors.


The navigational links are just anchors and can be styled using the a selector.

The month and year display can be styled using the thead selector.

The week bar is the first row of the table so use the tr first-child selector.

The selected date will be styled using the provided selectedclass.

The dates displayed can be styled using the td selector.

Finally, if the browser supports it,  td empty selector will color the empty cells if pad is set to false. Otherwise you must supply a padclass that will be assigned to the padding elements.


Below is the styling used to get the calendar to look as it does:

<style type="text/css">
        border: 1px solid #000000;
        background-color: #ffffff;
    .calendar a
        text-decoration: none;
        color: #ff0000;
    .calendar th
        background-color: Navy;
        color: #ffffff;
    .calendar th, .calendar tbody td
        width: 25px;
        height: 25px;
    .calendar tbody td
        border: 1px solid #e0e0e0;
        cursor: pointer;
    .calendar tbody td:hover
        background: #e0e0e0;
        background: #c0c0c0 !important;
        color: #808080 !important;
        cursor: default !important;
        background-color: #ffe292;

Last edited Oct 31, 2011 at 12:05 AM by dahrkdaiz, version 12


No comments yet.