User Guide Cancel

cfcalendar

Last updated on May 30, 2024 | Also applies to ColdFusion

ColdFusion

Open app

CFML Reference User Guide
ColdFusion functions
ColdFusion Tags
1. ColdFusion tag summary
2. ColdFusion tags by category
  1. Application framework tags
    1. cfapplication
    2. cfassociate
    3. cferror
    4. cfimport
    5. cfinterface
    6. cflock
    7. cfscript
    8. cfthread
  2. Communications tags
  3. Database manipulation tags
  4. Data output tags
    1. cfchart
    2. cfchartdata
    3. cfchartseries
    4. cfcol
    5. cfcontent
    6. cfdocument
    7. cfdocumentitem
    8. cfdocumentsection
    9. cfflush
    10. cfheader
    11. cflog
    12. cfoutput
    13. cfpresentation
    14. cfpresentationslide
    15. cfpresenter
    16. cfprocessingdirective
    17. cfprint
    18. cfreport
    19. cfreportparam
    20. cfsilent
    21. cftable
  5. Debugging tags
    1. cfdump
    2. cftimer
    3. cftrace
  6. Exception handling tags
    1. cfcatch
    2. cferror
    3. cffinally
    4. cfrethrow
    5. cfthrow
    6. cftry
  7. Extensibility tags
    1. cfchart
    2. cfchartdata
    3. cfchartseries
    4. cfcollection
    5. cfcomponent
    6. cfexecute
    7. cfftp
    8. function
    9. cfindex
    10. cfinterface
    11. cfinvoke
    12. cfinvokeargument
    13. cfobject
    14. cfproperty
    15. cfreport
    16. cfreportparam
    17. cfreturn
    18. cfsearch
    19. cfsharepoint
    20. cfspreadsheet
    21. cfwddx
    22. cfxml
  8. File management tags
    1. cfdirectory
    2. cffile
    3. cffileupload
    4. cfftp
    5. cfzip
    6. cfzipparam
  9. Flow-control tags
    1. cfabort
    2. cfbreak
    3. cfcase
    4. cfcontinue
    5. cfdefaultcase
    6. cfelse
    7. cfelseif
    8. cfexecute
    9. cfexit
    10. cfif
    11. cfinclude
    12. cflocation
    13. cfloop
    14. cfrethrow
    15. cfswitch
    16. cfthrow
    17. cftry
  10. Forms tags
    1. cfapplet
    2. cfcalendar
    3. cffileupload
    4. cfform
    5. cfformgroup
    6. cfformitem
    7. cfgrid
    8. cfgridcolumn
    9. cfgridrow
    10. cfgridupdate
    11. cfinput
    12. cfpdf
    13. cfpdfform
    14. cfpdfformparam
    15. cfpdfparam
    16. cfpdfsubform
    17. cfselect
    18. cfslider
    19. cftextarea
    20. cftree
    21. cftreeitem
  11. Internet Protocol tags
    1. cfajaximport
    2. cfajaxproxy
    3. cfftp
    4. cffeed
    5. cfimap
    6. cfhttp
    7. cfhttpparam
    8. cfldap
    9. cfmail
    10. cfmailparam
    11. cfmailpart
    12. cfpop
    13. cfsprydataset
  12. Page processing tags
    1. cfcache
    2. cfcontent
    3. cfflush
    4. cfheader
    5. cfhtmlhead
    6. cfinclude
    7. cfprocessingdirective
    8. cfsetting
    9. cfsilent
  13. Security tags
  14. Variable manipulation tags
    1. cfcookie
    2. cfdump
    3. cfparam
    4. cfregistry
    5. cfsavecontent
    6. cfschedule
    7. cfset
    8. cfsetting
  15. Other tags
    1. cfimage
    2. cflog
    3. cfregistry
3. Tags a-b
4. Tags c
  1. cfcache
  2. cfcalendar
  3. cfcase
  4. cfcatch
  5. cfchart
  6. cfchartdata
  7. cfchartseries
  8. cfclient
  9. cfclientsettings
  10. cfcol
  11. cfcollection
  12. cfcomponent
  13. cfcontent
  14. cfcontinue
  15. cfcookie
  16. Tags d-e
5. Tags f
6. Tags g-h
  1. cfgraph
  2. cfgraphdata
  3. cfgrid
  4. cfgridcolumn
  5. cfgridrow
  6. cfgridupdate
  7. cfheader
  8. cfhtmlhead
  9. cfhtmltopdf
  10. cfhtmltopdfitem
  11. cfhttp
  12. cfhttpparam
7. Tags i
  1. cfif
  2. cfimage
  3. cfimap
  4. cfimapfilter
  5. cfimpersonate
  6. cfimport
  7. cfinclude
  8. cfindex
  9. cfinput
  10. cfinsert
  11. cfinterface
  12. cfinvoke
  13. cfinvokeargument
8. Tags j-l
9. Tags m-o
10. Tags p-q
  1. cfparam
  2. cfpdf
  3. cfpdfform
  4. cfpdfformparam
  5. cfpdfparam
  6. cfpdfsubform
  7. cfpod
  8. cfpop
  9. cfpresentation
  10. cfpresentationslide
  11. cfpresenter
  12. cfprint
  13. cfprocessingdirective
  14. cfprocparam
  15. cfprocresult
  16. cfprogressbar
  17. cfproperty
  18. cfquery
  19. cfqueryparam
11. Tags r-s
  1. cfregistry
  2. cfreport
  3. cfreportparam
  4. cfrethrow
  5. cfreturn
  6. cfsavecontent
  7. cfschedule
  8. cfscript
  9. cfsearch
  10. cfselect
  11. cfservlet
  12. cfservletparam
  13. cfset
  14. cfsetting
  15. cfsharepoint
  16. cfsilent
  17. cfslider
  18. cfspreadsheet
  19. cfsprydataset
  20. cfstoredproc
  21. cfswitch
12. Tags t
  1. cftable
  2. cftextarea
  3. cftextinput
  4. cfthread
  5. cfthrow
  6. cftimer
  7. cftooltip
  8. cftrace
  9. cftransaction
  10. cftree
  11. cftreeitem
  12. cftry
13. Tags u-z
  1. cfupdate
  2. cfwddx
  3. cfwebsocket
  4. cfwindow
  5. cfxml
  6. cfzip
  7. cfzipparam
CFML Reference
1. Reserved words and variables
2. Ajax JavaScript functions
3. ColdFusion ActionScript functions
4. ColdFusion mobile functions
5. Application.cfc reference
6. Script functions implemented as CFCs
7. ColdFusion Flash Form style reference
8. ColdFusion event gateway reference
9. ColdFusion C++ CFX Reference
10. ColdFusion Java CFX reference
11. WDDX JavaScript Objects
Cloud services

The UI tags for cfcalendar based on the YUI toolkit have been deprecated.

For a full list of deprecated features, refer to Deprecated features.

Description

Puts an interactive 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.

Syntax

<cfcalendar 
name = "name of calendar" 
dayNames = "days of the week labels" 
disabled = "yes|no|no attribute value" 
enabled = "yes|no" 
endRange = "last disabled date" 
height = "height" 
mask = "character pattern" 
monthNames = "month labels" 
onBlur = "ActionScript to invoke" 
onChange = "ActionScript to invoke" 
onFocus = "ActionScript to invoke" 
selectedDate = "date" 
startRange = "first disabled date" 
style="Flash ActionScript style" 
tooltip = "text" 
visible = "yes|no" 
width = "width">

Note: You can specify this tag's attributes in an attributeCollection attribute whose value is a structure. Specify the structure name in the attributeCollection attribute and use the tag's attribute names as structure keys.

History

ColdFusion MX 7.01: Added support for onBlur and onFocus events. ColdFusion MX 7: Added tag.

Attributes

Attribute	Req/Opt	Default	Description
name	Required		The name of the calendar.
dayNames	Optional	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.
disabled	Optional	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).
enabled	Optional	yes	Flash only: Boolean value that specifies whether the control is enabled. A disabled control appears in light gray. This is the inverse of the disabled 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.
firstDayOfWeek	Optional	0	Integer in the range 0-6 specifying the first day of the week in the calendar: 0 indicates Sunday; 6 indicates Saturday.
height	Optional	Determined by Flash	The vertical dimension of the calendar specified in pixels.
mask	Optional	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.
monthNames	Optional	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.
onBlur	Optional		ActionScript that runs when the calendar loses focus.
onChange	Optional		ActionScript that runs when the user selects a date.
onFocus	Optional		ActionScript that runs when the calendar gets focus.
selectedDate	Optional	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 function 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.
style	Optional		Flash ActionScript style or styles to apply to the calendar. For more information, see Setting styles and skins in Flash forms in the Developing ColdFusion Applications.
tooltip	Optional		Flash only: Text to display when the mouse pointer hovers over the control.
visible	Optional	yes	Flash only: Boolean value that specifies whether to show the control. Space that would be occupied by an invisible control is blank.
width	Optional	Determined by Flash	The horizontal dimension of the calendar specified in pixels.

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.

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" 
firstDayOfWeek="1" 
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>

Get help faster and easier

New user?

cfcalendar

Description

Category