ColdFusion 9.0 Resources |
cfcalendarDescriptionPuts 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.
See alsocfform, cfgrid, cfinput, cfselect, cfslider, cftextarea, cftree; About Flash form styles in the Developing ColdFusion Applications. Attributes
UsageThe 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:
Note: The cfcalendar tag
is not supported in XML format forms.
ExampleThis 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="first day of the week in integer" 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> |