User Guide

56 Chapter 2: ColdFusion Tags
Usage
The cfcalendar tag displays a calendar month, showing the month, the year, a grid of the days
of the month, and headings for the days of the week. The calendar contains forward and back
arrow buttons to let you change the month and year that are displayed.
If you include a value for the
selectedDate attribute, that date is highlighted in green and
determines the month and year that display initially. Changing the month and year display does
not change the selected date. A user can change the selected date by clicking a different date on
the calendar. The
onChange attribute can specify an ActionScript event handler function that
runs when the user selects a date.
The current date is highlighted in reverse (that is, a white number on a black background). If the
selected date is in a different month or year, however, the current date does not appear unless you
move to it by clicking the forward or back arrows.
The
mask attribute lets you specify the format of the selected date that is returned to the
application.
You can use the keyboard to access and select dates from a
cfcalendar control:
• Use the Up, Down, Left, and Right Arrow keys to change the selected date.
• Use the Home and End keys to reach the first and last enabled date in a month, respectively.
• Use the Page Up and Page Down keys to reach the previous and next month, respectively.
Note: The cfcalendar tag is not supported in XML format forms.
Example
This example produces a 200-pixel by 150-pixel calendar with a Flash haloBlue skin. It displays
abbreviated month names and two-character days of the week. It initially displays today’s date as
determined by the
selectedDate attribute. When you click the Save button, the form submits
back to the current page, which displays the submitted information.
The example also has three
dateField controls that let the user change the initial selected date
that displays on the calendar and a blocked-out date range. The initial blocked-out date is a four-
day period immediately preceding today’s date.
Note: This example must be modified to work in locales that do not use mm/dd/yyyy date formats. To
do so, use the
LSDateFormat function in place of the DateFormat function and a mask that is
appropriate for your locale, such as dd/mm/yyyy.
<!--- Set initial selected and blocked-out dates.--->
<cfparam name="Form.startdate" default="#dateformat(now()-5, 'mm/dd/yyyy')#">
visible Optional Yes Flash only: Boolean value specifying whether to
show the control. Space that would be occupied by
an invisible control is blank.
tooltip Optional Flash only: Text to display when the mouse pointer
hovers over the control.
onChange Optional ActionScript that runs when the user selects a date.
Attribute Req/Opt Default Description