Ben Nadel
On User Experience (UX) Design, JavaScript, ColdFusion, Node.js, Life, and Love.
I am the chief technical officer at InVision App, Inc - a prototyping and collaboration platform for designers, built by designers. I also rock out in JavaScript and ColdFusion 24x7.
Meanwhile on Twitter
Loading latest tweet...
Ben Nadel at BFusion / BFLEX 2009 (Bloomington, Indiana) with:

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...