Here's a demo of my cfTimeline custom tag. The code for the timeline is also listed below to demonstrate how easily this tag can be implemented.
Note: The ISODateToTS function used is available at cflib.
To learn more about the tag or download it see my project page or the project page at RIAForge.
cfTimeline.cfm
<cf_timeline id="myTimeline"
timelineHeight="250"
start="#now()#"
xmlEvents="/blog/client/cfTimeline/feed.cfm?feed=mxna"
labelWidth="250"
creationComplete="center"
style="font-size: 8pt; font-family: Trebuchet MS, Helvetica, Arial, sans serif; border: 1px solid ##aaa;">
<cf_timelineband
bandHeight="80"
showEventText="true"
dateUnit="hour"
intervalWidth="400" />
<cf_timelineband
bandHeight="20"
showEventText="false"
dateUnit="day"
intervalWidth="200"
highlight="true"
trackHeight="0.5"
trackGap="0.2" />
</cf_timeline>
<div align="center">
<input type="button" name="first" value="Oldest Post" onclick="cfTimeline.scrollToCenter(myTimeline,0,cfTimeline.getEarliestDate(myTimeline,0));" style="width: 115px;">
<input type="button" name="loadMXNA" value="MXNA" onclick="cfTimeline.loadXML(myTimeline, '/blog/client/cfTimeline/feed.cfm?feed=mxna',center)" style="width: 115px;">
<input type="button" name="loadGoog" value="FullAsAGoog" onclick="cfTimeline.loadXML(myTimeline, '/blog/client/cfTimeline/feed.cfm?feed=goog',center)" style="width: 115px;">
<input type="button" name="last" value="Most Recent Post" onclick="cfTimeline.scrollToCenter(myTimeline,0,cfTimeline.getLatestDate(myTimeline,0));" style="width: 115px;">
</div>
<cfsavecontent variable="center">
<script type="text/javascript">
center = function(){
var dt = cfTimeline.getEarliestDate(myTimeline,0);
cfTimeline.scrollToCenter(myTimeline, 0, dt)
}
</script>
</cfsavecontent>
<cfhtmlhead text="#center#">
<br />
timelineHeight="250"
start="#now()#"
xmlEvents="/blog/client/cfTimeline/feed.cfm?feed=mxna"
labelWidth="250"
creationComplete="center"
style="font-size: 8pt; font-family: Trebuchet MS, Helvetica, Arial, sans serif; border: 1px solid ##aaa;">
<cf_timelineband
bandHeight="80"
showEventText="true"
dateUnit="hour"
intervalWidth="400" />
<cf_timelineband
bandHeight="20"
showEventText="false"
dateUnit="day"
intervalWidth="200"
highlight="true"
trackHeight="0.5"
trackGap="0.2" />
</cf_timeline>
<div align="center">
<input type="button" name="first" value="Oldest Post" onclick="cfTimeline.scrollToCenter(myTimeline,0,cfTimeline.getEarliestDate(myTimeline,0));" style="width: 115px;">
<input type="button" name="loadMXNA" value="MXNA" onclick="cfTimeline.loadXML(myTimeline, '/blog/client/cfTimeline/feed.cfm?feed=mxna',center)" style="width: 115px;">
<input type="button" name="loadGoog" value="FullAsAGoog" onclick="cfTimeline.loadXML(myTimeline, '/blog/client/cfTimeline/feed.cfm?feed=goog',center)" style="width: 115px;">
<input type="button" name="last" value="Most Recent Post" onclick="cfTimeline.scrollToCenter(myTimeline,0,cfTimeline.getLatestDate(myTimeline,0));" style="width: 115px;">
</div>
<cfsavecontent variable="center">
<script type="text/javascript">
center = function(){
var dt = cfTimeline.getEarliestDate(myTimeline,0);
cfTimeline.scrollToCenter(myTimeline, 0, dt)
}
</script>
</cfsavecontent>
<cfhtmlhead text="#center#">
<br />
feed.cfm
<cfsetting showdebugoutput="false">
<cfparam name="url.feed" default="">
<cfscript>
/**
* Converts text string of ISO Date to datetime object; useful for parsing RSS and RDF.
*
* @param str ISO datetime string to parse. (Required)
* @return Returns a date.
* @author James Edmunds (jamesedmunds@jamesedmunds.com)
* @version 1, September 21, 2004
*/
function ISODateToTS(str) {
return ParseDateTime(ReplaceNoCase(left(str,16),"T"," ","ALL"));
}
</cfscript>
<cfswitch expression="#url.feed#">
<cfcase value="goog">
<cfset feedURL = "http://www.fullasagoog.com/xml/ColdFusionMX.xml">
<cfset icon = "goog.png">
</cfcase>
<cfdefaultcase>
<cfset feedURL = "http://weblogs.macromedia.com/mxna/xml/rss.cfm?query=bySmartCategory&languages=1&smartCategoryId=1&smartCategoryKey=D0382F3A-9D2B-69E8-C7BC317066FA1CC2">
<cfset icon = "mxna.jpg">
</cfdefaultcase>
</cfswitch>
<cfhttp url="#feedURL#" result="feed" />
<cfset feeds ="#xmlParse(feed.fileContent)#">
<cfcontent type="text/xml">
<?xml version="1.0" encoding="UTF-8"?>
<data>
<cfoutput>
<cfloop from="1" to="#arrayLen(feeds["rdf:RDF"].item)#" index="item">
<cfset thisPost = feeds["rdf:RDF"].item[item]>
<cfset posted = dateformat(ISODateToTS(thisPost["dc:date"].XMLText), "mm/dd/yyyy") & " " & timeformat(ISODateToTS(thisPost["dc:date"].XMLText), "HH:mm:ss")>
<event
start="#posted#"
title="#XMLFormat(thisPost.title.XMLText)#"
link="#XMLFormat(thisPost.link.XMLText)#"
icon="#XMLFormat(icon)#">
#XMLFormat(thisPost.description.XMLText)#
</event>
</cfloop>
</cfoutput>
</data>
<cfparam name="url.feed" default="">
<cfscript>
/**
* Converts text string of ISO Date to datetime object; useful for parsing RSS and RDF.
*
* @param str ISO datetime string to parse. (Required)
* @return Returns a date.
* @author James Edmunds (jamesedmunds@jamesedmunds.com)
* @version 1, September 21, 2004
*/
function ISODateToTS(str) {
return ParseDateTime(ReplaceNoCase(left(str,16),"T"," ","ALL"));
}
</cfscript>
<cfswitch expression="#url.feed#">
<cfcase value="goog">
<cfset feedURL = "http://www.fullasagoog.com/xml/ColdFusionMX.xml">
<cfset icon = "goog.png">
</cfcase>
<cfdefaultcase>
<cfset feedURL = "http://weblogs.macromedia.com/mxna/xml/rss.cfm?query=bySmartCategory&languages=1&smartCategoryId=1&smartCategoryKey=D0382F3A-9D2B-69E8-C7BC317066FA1CC2">
<cfset icon = "mxna.jpg">
</cfdefaultcase>
</cfswitch>
<cfhttp url="#feedURL#" result="feed" />
<cfset feeds ="#xmlParse(feed.fileContent)#">
<cfcontent type="text/xml">
<?xml version="1.0" encoding="UTF-8"?>
<data>
<cfoutput>
<cfloop from="1" to="#arrayLen(feeds["rdf:RDF"].item)#" index="item">
<cfset thisPost = feeds["rdf:RDF"].item[item]>
<cfset posted = dateformat(ISODateToTS(thisPost["dc:date"].XMLText), "mm/dd/yyyy") & " " & timeformat(ISODateToTS(thisPost["dc:date"].XMLText), "HH:mm:ss")>
<event
start="#posted#"
title="#XMLFormat(thisPost.title.XMLText)#"
link="#XMLFormat(thisPost.link.XMLText)#"
icon="#XMLFormat(icon)#">
#XMLFormat(thisPost.description.XMLText)#
</event>
</cfloop>
</cfoutput>
</data>
