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" />

Requires

Awesome
AwesomeVisuals
AwesomeCalendar

DeclarativeAttributes

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.

Constructors

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.  

Functions

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

 

Styling

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.

calendar

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">
    .calendar
    {
        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;
    }
    
    .pad
    {
        background: #c0c0c0 !important;
        color: #808080 !important;
        cursor: default !important;
    }
    
    .selected
    {
        background-color: #ffe292;
    } 
</style>

Last edited Oct 30, 2011 at 11:05 PM by dahrkdaiz, version 12

Comments

No comments yet.