Skip to main content
Ben Nadel
On User Experience (UX) Design, JavaScript, ColdFusion, Node.js, Life, and Love.

Simple ColdFusion Calendar Month Display With Monday As First Day Of Week

By Ben Nadel on
Tags: ColdFusion

A few days ago, I demoed a small page that output a calendar month in ColdFusion by looping over the dates in a rather slick index loop. This calendar, as all calendars that I have built, start with Sunday as the first day of the week. Apparently, this is not how the entire world does it, and in response to a question posed by Macbuoy, I created a ColdFusion user defined function called MyDayOfWeek() which wraps around ColdFusion's built-in DayOfWeek() method. This UDF translates the traditional day of week calculation into the day of week of your choice.

There were some issues for people trying to applying this ColdFusion UDF to the calendar month display, so I thought I would just demo how it works. The steps to do this were quite easy:

  1. Change all DayOfWeek() method calls to be MyDayOfWeek() method calls.

  2. Change the order of the calendar header. Since our calendar headers (Sun-Sat) are hard coded, this has to be altered manually.

Then, as before, I have to start off by building my SQL query to test with:

<!---
	Build a query of events that we will be able to
	test with. Some of these dates will span multiple
	days and overlap with each other.
--->
<cfquery name="qEvent" datasource="#REQUEST.DSN.Source#">
	DECLARE
		@event TABLE (
			id INT,
			date_started DATETIME,
			date_ended DATETIME
		)
	;


	INSERT INTO @event (
		id,
		date_started,
		date_ended
	)(
		SELECT
			1,
			<cfqueryparam value="#Now()#" cfsqltype="CF_SQL_TIMESTAMP" />,
			<cfqueryparam value="#Now() + 5#" cfsqltype="CF_SQL_TIMESTAMP" />

		UNION ALL

		SELECT
			2,
			<cfqueryparam value="#CreateDateTime( 2007, 04, 15, 0, 0, 0 )#" cfsqltype="CF_SQL_TIMESTAMP" />,
			<cfqueryparam value="#CreateDateTime( 2007, 04, 15, 23, 59, 59 )#" cfsqltype="CF_SQL_TIMESTAMP" />

		UNION ALL

		SELECT
			3,
			<cfqueryparam value="#CreateDateTime( 2007, 04, 8, 10, 30, 0 )#" cfsqltype="CF_SQL_TIMESTAMP" />,
			<cfqueryparam value="#CreateDateTime( 2007, 04, 10, 4, 45, 0 )#" cfsqltype="CF_SQL_TIMESTAMP" />

		UNION ALL

		SELECT
			4,
			<cfqueryparam value="#CreateDateTime( 2007, 04, 4, 12, 0, 0 )#" cfsqltype="CF_SQL_TIMESTAMP" />,
			<cfqueryparam value="#CreateDateTime( 2007, 04, 5, 12, 0, 0 )#" cfsqltype="CF_SQL_TIMESTAMP" />

		UNION ALL

		SELECT
			5,
			<cfqueryparam value="#CreateDateTime( 2007, 04, 29, 9, 0, 0 )#" cfsqltype="CF_SQL_TIMESTAMP" />,
			<cfqueryparam value="#CreateDateTime( 2007, 04, 29, 12, 0, 0 )#" cfsqltype="CF_SQL_TIMESTAMP" />
	);


	SELECT
		*
	FROM
		@event
	;
</cfquery>

And, here is the modified code. For demo purposes, I am including the ColdFusion user defined function, MyDayOfWeek(), in the file itself, but this could be included with your standard UDFs:

<!---
	We are going to override the default settings of
	ColdFusion's DayOfWeek() method by wrapping in this
	UDF that will tranlsate the "traditional" date of the
	week to one suited for our business logic.
--->
<cffunction
	name="MyDayOfWeek"
	access="public"
	returntype="numeric"
	output="false"
	hint="Returns our proxy day of week value.">

	<!--- Define arguments. --->
	<cfargument
		name="Date"
		type="date"
		required="true"
		hint="The date that we are using to get the day of week."
		/>

	<cfargument
		name="FirstDayOfWeek"
		type="numeric"
		required="false"
		default="2"
		hint="This is the day (1 = Sunday) that we are treating as the first day of the week."
		/>


	<!---
		Translate the actual day of the week to the pseudo
		day of the week using the passed in FirstDayOfWeek.
	--->
	<cfreturn
		(
			(
				(
					DayOfWeek( ARGUMENTS.Date ) +
					(7 - ARGUMENTS.FirstDayOfWeek)
				) MOD 7
			) +
			1
		) />
</cffunction>




<!---
	Get the month that we are going to be showing the
	events for (April 2007).
--->
<cfset dtThisMonth = CreateDate( 2007, 4, 1 ) />

<!---
	Because the calendar month doesn't just show our
	month - it may also show the end of last month and
	the beginning of next month - we need to figure out
	the start and end of the "calendar" display month,
	not just this month.
--->
<cfset dtMonthStart = (dtThisMonth + 1 - MyDayOfWeek( dtThisMonth )) />

<!--- Get the last day of the calendar display month. --->
<cfset dtMonthEnd = (dtThisMonth - 1 + DaysInMonth( dtThisMonth )) />
<cfset dtMonthEnd = (dtMonthEnd + (7 - MyDayOfWeek( dtMonthEnd ))) />


<!---
	ASSERT: At this point, not only do we know what month
	we are going to display, we also know the first and last
	calendar days that are going to display. We do not need
	to know what numeric month those actually fall on.
--->


<!---
	Create an object to hold the dates that we want to
	show on the calendar. Since our calendar view doesn't
	have any real detail other than event existence, we
	don't have to care about event details. We will use
	this struct to create an index of date DAYS only.
--->
<cfset objEvents = StructNew() />


<!---
	Let's populate the event struct. Here, we have to
	be careful not just about single day events but also
	multi day events which have to show up more than once
	on the calendar.
--->
<cfloop query="qEvent">

	<!---
		For each event, we are going to loop over all the
		days between the start date and the end date. Each
		day within that date range is going to be indexed
		in our event index.

		When we are getting the date of the event, remember
		that these dates might have associated times. We
		don't care about the time, we only care about the
		day. Therefore, when we grab the date, we are Fixing
		the value. This will strip out the time and convert
		the date to an integer.
	--->
	<cfset intDateFrom = Fix( qEvent.date_started ) />
	<cfset intDateTo = Fix( qEvent.date_ended ) />


	<!---
		Loop over all the dates between our start date and
		end date. Be careful though, we don't care about days
		that will NOT show up on our calendar. Therefore,
		using our are Month Start and Month End values found
		above, we can Min/Max our loop.

		When looping, increment the index by one. This will
		add a single day for each loop iteration.
	--->
	<cfloop
		index="intDate"
		from="#Max( intDateFrom, dtMonthStart )#"
		to="#Min( intDateTo, dtMonthEnd )#"
		step="1">

		<!---
			Index this date. We don't care if two different
			event dates overwrite each other so long as at
			least one of the events registers this date.
		--->
		<cfset objEvents[ intDate ] = qEvent.id />

	</cfloop>

</cfloop>


<cfoutput>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
	<title>Calendar Month</title>

	<style type="text/css">

		body,
		td {
			font: 11px verdana ;
			}

		table.month {}

		table.month tr.dayheader td {
			background-color: ##454545 ;
			border: 1px solid ##000000 ;
			border-bottom-width: 2px ;
			color: ##FFFFFF ;
			font-weight: bold ;
			padding: 5px 0px 5px 0px ;
			text-align: center ;
			}

		table.month tr.day td {
			background-color: ##CCCCCC ;
			border: 1px solid ##000000 ;
			color: ##000000 ;
			padding: 5px 0px 5px 0px ;
			text-align: center ;
			}

		table.month tr.day td.othermonth {
			background-color: ##F0F0F0 ;
			color: ##999999 ;
			}

		table.month tr.day td.event {
			background-color: ##640000 ;
			color: ##FFFFFF ;
			font-weight: bold ;
			}

	</style>
</head>
<body>

	<h2>
		#DateFormat( dtThisMonth, "mmmm yyyy" )#
	</h2>

	<table width="100%" cellspacing="2" class="month">
	<colgroup>
		<col width="15%" />
		<col width="15%" />
		<col width="15%" />
		<col width="15%" />
		<col width="15%" />
		<col width="13%" />
		<col width="12%" />
	</colgroup>

	<!---
		Other than changing the DayOfWEek() function calls,
		the ONLY other thing we had to change was the order
		of headers in the calendar output. All other changes
		take place automatically! Noitce that below, Monday
		is the first displayed day.
	--->
	<tr class="dayheader">
		<td>
			Mon
		</td>
		<td>
			Tus
		</td>
		<td>
			Wed
		</td>
		<td>
			Thr
		</td>
		<td>
			Fri
		</td>
		<td>
			Sat
		</td>
		<td>
			Sun
		</td>
	</tr>
	<tr class="day">

		<!---
			Now, we need to loop over the days in the
			calendar display month. We can use the start
			and end days we found above. When looping, add
			one to the index. This will add a single day
			per loop iteration.
		--->
		<cfloop
			index="intDate"
			from="#dtMonthStart#"
			to="#dtMonthEnd#"
			step="1">


			<!---
				Check to see which classes we are going to
				need to assign to this day. We are going to
				use one class for month (this vs. other) and
				one for whether or not there is an event.
			--->
			<cfif (Month( intDate ) EQ Month( dtThisMonth))>
				<cfset strClass = "thismonth" />
			<cfelse>
				<cfset strClass = "othermonth" />
			</cfif>

			<!---
				Check to see if there is an event scheduled
				on this day. We can figure this out by checking
				for this date in the event index.
			--->
			<cfif StructKeyExists( objEvents, intDate )>
				<cfset strClass = (strClass & " event") />
			</cfif>

			<td class="#strClass#">
				#Day( intDate )#
			</td>


			<!---
				Check to see if we need to start a new row.
				We will need to do this after every Saturday
				UNLESS we are at the end of our loop.
			--->
			<cfif (
				(MyDayOfWeek( intDate ) EQ 7) AND
				(intDate LT dtMonthEnd)
				)>
				</tr>
				<tr class="day">
			</cfif>

		</cfloop>
	</tr>
	</table>

</body>
</html>
</cfoutput>

Running the above, we get the updated calendar month output with Monday leading off the week:

Simple ColdFusion Calendar Month With Monday As First Day

Now, I should really figure out how to get the headers to be output based on the day of the week method :) Then we would be all set.



Reader Comments

Works like a charm.

For the header row, I'm gonna looped over the list (2,3,4,5,6,7,1)--along with DayOfWeekAsString without a similar UDF shift.

that's exactly how i've done it in the past. You could probably use some combination of list functions to get the order of that list starting with your first day of week variable. something like:

list = 1,2,3,4,5,6,7;
firstdayofweek = 2;
for i = 1; i < firstdayofweek; i++
{
shift = listgetat(list, i);
list = listrest(list);
list = listappend(list, shift);
}

that wouldn't work obviously, as the first line would always be out of sync as we're updating the list in the loop. if we made a copy of the list and updated that instead...