Two simple ColdFusion calendar outputs

  • October 26, 2009
  • James Skemp
  • article

Here's two rough drafts of calendars created via ColdFusion (7, but I believe 6.1 would have the same functionality).

Tables-based

<cfparam name="URL.CalendarMonth" default="#Month(now())#" type="integer" />
<cfparam name="URL.CalendarYear" default="#Year(now())#" type="integer" />

<cfif URL.CalendarMonth LT 1 OR URL.CalendarMonth GT 12>
<cfset URL.CalendarMonth = Month(now()) />
</cfif>


<cfset VARIABLES.Calendar.StartDate = CreateDate(URL.CalendarYear, URL.CalendarMonth, 1) />


<table style=“width:375px;” summary=“Calendar of events for <cfoutput>#DateFormat(VARIABLES.Calendar.StartDate, ‘mmmm yyyy’)#</cfoutput>.">
<thead>
<tr>
<th colspan=“7”><cfoutput>#DateFormat(VARIABLES.Calendar.StartDate, “mmmm yyyy”)#</cfoutput></th>
</tr>
<tr>
<th>S</th>
<th>M</th>
<th>T</th>
<th>W</th>
<th>Th</th>
<th>F</th>
<th>S</th>
</tr>
</thead>
<tbody>
<cfloop from=“1” to="#DaysInMonth(VARIABLES.Calendar.StartDate)#” index=“iDay”>
<cfset VARIABLES.Calendar.CurrentDate = CreateDate(URL.CalendarYear, URL.CalendarMonth, iDay) />
<cfif DayOfWeek(VARIABLES.Calendar.CurrentDate) EQ 1 OR iDay EQ 1><!— This is Sunday, or the first day. —>
<tr>
</cfif>
<cfif iDay EQ 1><!— If it’s the first day, determine how many empty cells we need. —>
<cfoutput>#RepeatString("<td></td>", DayOfWeek(VARIABLES.Calendar.StartDate) - 1)#</cfoutput>
</cfif>
<cfoutput><td><span title="#DateFormat(VARIABLES.Calendar.CurrentDate, ‘mmmm d, yyyy’)#">#iDay#</span></td></cfoutput>
<cfif iDay EQ DaysInMonth(VARIABLES.Calendar.StartDate)>
<cfoutput>#RepeatString("<td></td>", 7 - DayOfWeek(VARIABLES.Calendar.CurrentDate))#</cfoutput>
</cfif>
<cfif DayOfWeek(VARIABLES.Calendar.CurrentDate) EQ 7 OR iDay EQ DaysInMonth(VARIABLES.Calendar.StartDate)><!— This is Saturday, or the last day. —>
</tr>
</cfif>
</cfloop>
</tbody>
</table>

Ordered list and CSS

The following is a rough version of an ordered list and CSS-based calendar.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title></title>
	<style type="text/css">
	.olCalendar {
		width:375px;
	}
	.olCalendar ol li {
		display:block;
		float:left;
		list-style-position:inside;
		margin:0;
		width:45px;
	}
	.olCalendar li.noDate {
		list-style-image:none;
	}
	</style>
</head>
<body>
<cfparam name="URL.CalendarMonth" default="#Month(now())#" type="integer" />
<cfparam name="URL.CalendarYear" default="#Year(now())#" type="integer" />

<cfif URL.CalendarMonth LT 1 OR URL.CalendarMonth GT 12>
<cfset URL.CalendarMonth = Month(now()) />
</cfif>


<cfset VARIABLES.Calendar.StartDate = CreateDate(URL.CalendarYear, URL.CalendarMonth, 1) />
<div class=“olCalendar”>
<ol start="<cfoutput>#2 - DayOfWeek(VARIABLES.Calendar.StartDate)#</cfoutput>">
<cfloop from=“1” to="#DaysInMonth(VARIABLES.Calendar.StartDate)#" index=“iDay”>
<cfset VARIABLES.Calendar.CurrentDate = CreateDate(URL.CalendarYear, URL.CalendarMonth, iDay) />
<cfif iDay EQ 1><!— If it’s the first day, determine how many empty cells we need. —>
<cfoutput>#RepeatString(’<li class=“noDate”> </li>’, DayOfWeek(VARIABLES.Calendar.StartDate) - 1)#</cfoutput>
</cfif>
<cfoutput><li class="#LCase(DayOfWeekAsString(DayOfWeek(VARIABLES.Calendar.CurrentDate)))#"><span title="#DateFormat(VARIABLES.Calendar.CurrentDate, ‘mmmm d, yyyy’)#">#iDay#</span></li></cfoutput>
<cfif iDay EQ DaysInMonth(VARIABLES.Calendar.StartDate)>
<cfoutput>#RepeatString(’<li class=“noDate”> </li>’, 7 - DayOfWeek(VARIABLES.Calendar.CurrentDate))#</cfoutput>
</cfif>
</cfloop>
</ol>
</div>


</body>
</html>

But, let's be honest, this version sucks. I think tables are a necessary evil in this regard.

EDIT 12/21/2009: Corrected StartDate/CurrentDate mistake with repeating td elements.

Search
Links of Note
Recent Posts
categories
Support This Site

If my blog was helpful to you, then please consider visiting my Amazon Wishlist.