CFCALENDAR  
Description

Puts an interactive Macromedia Flash format calendar in an HTML or Flash form. Not supported in XML format forms. The calendar lets a user select a date for submission as a form variable.

 
Category

Forms tags

 
Syntax
<cfcalendar 
name = "name of calendar"
height = "height"
width = "width"
selectedDate = "date"
startRange = "first disabled date"
endRange = "last disabled date"
disabled = "true", "false", or no attribute value
mask = "character pattern"
dayNames = "days-of-the-week labels"
monthNames = "month labels"
visible = "Yes" or "No"
enabled = "Yes" or "No"
tooltip = "Tip text"
onChange = "actionscript to invoke">
 
See also

cfform, cfgrid, cfinput, cfselect, cfslider, cftextarea, cftree; "About Flash form styles" in Chapter 29, "Creating Forms in Macromedia Flash" in ColdFusion MX Developer's Guide.

 
History

ColdFusion MX 7: Added tag.

 
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')#">
<cfparam name="Form.enddate" default="#dateformat(now()-1, 'mm/dd/yyyy')#">
<cfparam name="Form.selectdate" default="#dateformat(now(), 'mm/dd/yyyy')#">

<!--- If the form has been submitted, display the selected date. --->
<cfif isDefined("Form.submitit")>
   <cfoutput><b>You selected #Form.selectedDate#</b><br><br></cfoutput>
</cfif>

<b>Please select a date on the calendar and click Save.</b><br>
<br>
<cfform name="form1" format="Flash" skin="haloBlue" width="375" height="350" >
   <cfcalendar name="selectedDate" 
      selectedDate="#Form.selectdate#"
      startRange="#Form.startdate#"
      endRange="#Form.enddate#" 
      mask="mmm dd, yyyy" 
      dayNames="SU,MO,TU,WE,TH,FR,SA"
      monthNames="JAN, FEB, MAR, APR, MAY, JUN, JUL, AUG, SEP, OCT, NOV, DEC"
      style="rollOverColor:##FF0000"
      width="200" height="150" >
   <cfinput type="dateField" name="startdate" label="Block out starts"
      width="100" value="#Form.startdate#">
   <cfinput type="dateField" name="enddate" label="Block out ends" width="100"
      value="#Form.enddate#">
   <cfinput type="dateField" name="selectdate" label="Initial date" width="100"
      value="#Form.selectdate#" >
   <cfinput type="Submit" name="submitit" value="Save" width="100"> 
</cfform>
NAME  
  Required
 

The name of the calendar.
HEIGHT  
  Optional
 
Default value: "Determined by Flash"

The vertical dimension of the calendar specified in pixels.
WIDTH  
  Optional
 
Default value: "Determined by Flash"

The horizontal dimension of the calendar specified in pixels.
SELECTEDDATE  
  Optional
 
Default value: "None (Flash shows the current month)"

The date that is initially selected. It is highlighted in a color determined by the form skin. Must be in mm/dd/yyyy or dd/mm/yyyy format, depending on the current locale. (Use the setlocale tag to set the locale, if necessary.)
STARTRANGE  
  Optional
 

The start of a range of dates that are disabled. Users cannot select dates from this date through the date specified by the endRange attribute.
ENDRANGE  
  Optional
 

The end of a range of dates that are disabled. Users cannot select dates from the date specified by the startRange attribute through this date.
DISABLED  
  Optional
 
Default value: "not disabled"

Disables all user input, making the control read-only. To disable input, specify disabled without an attribute or disabled="Yes" (or any ColdFusion positive boolean value, such as True). To enable input, omit the attribute or specify disabled="No" (or any ColdFusion negative boolean value, such as False).
MASK  
  Optional
 
Default value: "MM/DD/YYYY"

A pattern that specifies the format of the submitted date. Mask characters are:

  • D = day; can use 0-2 mask characters
  • M = month; can use 0-4 mask characters
  • Y = year; can use 0, 2, or 4 characters
  • E = day in week; can use 0-4 characters
  • Any other character = put the character in the specified location

For more information on masking, see "Masking input data" in the cfinput reference page.
FIRSTDAYOFWEEK  
  Optional
 
Default value: "0"

Integer in the range 0-6 specifying the first day of the week in the calendar: 0 indicates Sunday; 6 indicates Saturday.
DAYNAMES  
  Optional
 
Default value: "S, M, T, W, Th, F, S"

A comma-delimited list that sets the names of the weekdays displayed in the calendar. Sunday is the first day and the rest of the weekday names follow in the normal order.
MONTHNAMES  
  Optional
 
Default value: "January, February, March, April, May, June, July, August, September, October, November, December"

A comma-delimited list of the month names that are displayed at the top of the calendar.
STYLE  
  Optional
 

Flash ActionScript style or styles to apply to the calendar. For more information, see Chapter 29, "Setting styles and skins in Flash forms" in ColdFusion MX Developer's Guide.
ENABLED  
  Optional
 
Default value: "Yes" Default value: "Flash only: Boolean value specifying whether the control is enabled. A disabled control appears in light gray. This is the inverse of the disabled attribute."
VISIBLE  
  Optional
 
Default value: "Yes" Default value: "Flash only: Boolean value specifying whether to show the control. Space that would be occupied by an invisible control is blank."
TOOLTIP  
  Optional
 
Default value: "Flash only: Text to display when the mouse pointer hovers over the control."
ONCHANGE  
  Optional
 

ActionScript that runs when the user selects a date.