%META:TOPICPARENT{name="OATDOCIndex"}%
---+ calendar.js      

Displays a calendar for date picking.

%TOC%

---++ Objects

---+++ OAT.Calendar(optObj)

Instantiates the <tt>OAT.Calendarobject.optObj</tt> may contain:

   * popup- bool; should clicking anywhere close the calendar? (default: <tt>false</tt>)

---++ Methods   

---+++ OAT.Calendar::show(x, y, callback, [date])

Shows the calendar. It will appear at <tt>[x, y]</tt>. If <tt>date</tt> is specified, it will be pre-selected. All dates are in form of <tt>[year, month, day]</tt>, starting from 1. When user selects a date, a <tt>callback(date)</tt> will be called.

---++ Properties

---+++ OAT.Calendar.dayNames

array of 7 day names

---+++ OAT.Calendar.monthNames

array of 12 month names

---+++ OAT.Calendar.specialDays

array specifying which days should be special (weekends)

---+++ OAT.Calendar.weekStartIndex

index of day (in <tt>OAT.Calendar.dayNames</tt>) when week starts

---+++ OAT.Calendar.dayZeroIndex

index of day (in <tt>OAT.Calendar.dayNames</tt>) for which <tt>Date::getDay()</tt> returns 0, i.e., "Sun".

---++ CSS classes

---+++ .calendar

CSS class of calendar div.

---+++ .calendar_selected

CSS class of previously selected day.

---+++ .calendar_special

CSS class of special days, e.g., Sundays, holidays.

---+++ .calendar_year

CSS class of div containing the year title and selection.

---+++ .calendar_month

CSS class of div containing the month title and selection.

---++ Example

<verbatim>
var c = new OAT.Calendar();
c.dayNames = ["Mon","Tue","Wed","Thu","Fri","Sat","Sun"];
c.monthNames = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];
c.specialDays = [0,0,0,0,0,1,1];
c.dayZeroIndex = 6;
c.weekStartIndex = 6;
c.show(100, 100, function(){});
</verbatim>

CategoryOAT CategoryOpenSource CategoryDocumentation