cf timeline
Description
Creates a DHTML widget for visualizing time-based events.
Category
Display management.
Syntax
<cf_timeline
required
id="String"
optional
bubbleHeight="Number"
bubbleWidth="Number"
creationComplete="String"
jsonEvents="path"
labelWidth="Number"
start="DateTime"
style="CSS style specification"
syncBands="Boolean"
theme="Classic"
timelineHeight="Number"
xmlEvents="path">
required child tag (1 to n):
<cf_timelineband>
optional child tag (0 to n):
<cf_timelinehotzone />
</cftimelineband>
optional child tags (0 to n):
<cf_timelineevent />
</cf_timeline>
See Also:
cf_timelineband, cf_timelinehotzone, cf_timelineevent
History:
- 4/2007: Created Tag
- 5/2007: Added creationComplete attribute.
Attributes:
Media:cf_timeline_attributes.jpg
Usage:
XML Event Structure:
When using an external XML file to plot events on the timeline you must follow the event structure listed here:
<?xml version="1.0" encoding="UTF-8"?>
<data>
<event
start="Date Time"
latestStart="Date Time"
earliestEnd="Date Time"
end="Date Time"
isDuration="Boolean"
title="String"
image="url"
link="url"
icon="url"
color="Hex"
textColor=”Hex”>
Event details here (some HTML allowed)...
</event>
</data>
JSON Event Structure:
When using an external file to plot JSON encoded events the file must follow the event structure listed here:
{
'dateTimeFormat': 'utf-8',
'events' : [
{
'start': 'Date Time',
'latestStart': 'Date Time',
'earliestEnd': 'Date Time',
'end': 'Date Time',
'isDuration': 'Boolean',
'title': 'String',
'description': 'String',
'image': 'url',
'link': 'url',
'icon': 'url',
'color': 'Hex',
'textColor': 'Hex'
}
]
}
JS Helpers:
Documentation moved to separate page. See main
Example:
<input type="button" name="xmlBtn" value="load xml"
onclick="cfTimeline.loadXML(test,'xmlEvents.cfm?key=foo')">
<cf_timeline id="test" timelineHeight="200" xmlEvents="xmlEvents.cfm" start="#createdatetime(2007,4,2,12,0,0)#"
style="font-size: 8pt; font-family: Trebuchet MS, Helvetica, Arial, sans serif; border: 1px solid ##aaa;">
<cf_timelineband bandHeight="80" showEventText="true" dateUnit="month" intervalWidth="75">
</cf_timelineband>
<cf_timelineband bandHeight="20" showEventText="false" dateUnit="year" intervalWidth="50" highlight="true"
trackHeight="0.5" trackGap="0.2">
</cf_timelineband>
<cf_timelineevent
start="#now()#"
title="Cool event!!!" />
</cf_timeline>