Creating a simple, dynamic Calendar using ColdFusion
There will always be a time when you are going to need a simple, dynamically generated calendar to use in your ColdFusion application. Picking a ship date in shopping cart, a scheduling system, project management apps, you name it they all use dating some how.
Below is simple and effective code to output an endlessly dynamic calendar using just basic ColdFusion functions. This calendar code can be easily adapted to any size and I have included a simple CSS layout to allow for quick changing of the design scheme.
CF Code (with comments)
<html>
<head>
<!--- You can place the
style mark-ups into an external style sheet as well to reference --->
<!--- <link rel="stylesheet"
rev="stylesheet" href="styles/siles-ie.css" type="text/css">
--->
<style>
.caltexthighlight{
FONT-WEIGHT: bold;
FONT-SIZE: 8pt;
COLOR: #115E96;
FONT-STYLE:
normal;
FONT-FAMILY:
verdana, arial, helvetica, sans-serif;
TEXT-DECORATION:
none;
PADDING-BOTTOM:
5px
}
.caltext{
FONT-WEIGHT:
normal;
FONT-SIZE: 8pt;
COLOR:
#666666;
FONT-STYLE: normal;
FONT-FAMILY:
verdana, arial, helvetica, sans-serif;
TEXT-DECORATION:
none;
PADDING-BOTTOM:
5px
}
.calendarheader{
FONT-WEIGHT:
bold;
FONT-SIZE:
8pt;
COLOR:
#666666;
FONT-STYLE:
normal;
FONT-FAMILY:
verdana, arial, helvetica, sans-serif;
TEXT-DECORATION:
none
}
.calendar{
FONT-WEIGHT:
normal;
FONT-SIZE:
8pt;
COLOR:
#666666;
FONT-STYLE:
normal;
FONT-FAMILY:
verdana, arial, helvetica, sans-serif;
TEXT-DECORATION:
none
}
A.calendar{
FONT-WEIGHT: normal;
FONT-SIZE:
8pt;
COLOR:
#666666;
FONT-STYLE:
normal;
FONT-FAMILY:
verdana, arial, helvetica, sans-serif;
TEXT-DECORATION:
underline
}
.calendartoday{
FONT-WEIGHT: bolder;
FONT-SIZE: 8pt;
COLOR: #9C0000;
FONT-STYLE: normal;
FONT-FAMILY: verdana, arial,
helvetica, sans-serif;
TEXT-DECORATION: underline
}
</style>
</head>
<body marginwidth=0 marginheight=0 topmargin=0 leftmargin=0 rightmargin=0
bottommargin=0>
<!--- Calendar Code
--->
<!--- Set the month and year parameters to equal the current values if
they do not exist. --->
<CFPARAM NAME = "month"
DEFAULT = "#DatePart('m', Now())#">
<CFPARAM NAME = "year"
DEFAULT = "#DatePart('yyyy', Now())#">
<CFPARAM NAME = "currentday"
DEFAULT = "#DatePart('d', Now())#">
<CFPARAM NAME = "startmonth"
DEFAULT = "#DatePart('m', Now())#">
<CFPARAM NAME = "startyear"
DEFAULT = "#DatePart('yyyy',
Now())#">
<!---
Set the requested (or current) month/year date and determine the number of days
in the month. --->
<cfset ThisMonthYear = CreateDate(year,
month, '1')>
<cfset Days =
DaysInMonth(ThisMonthYear)>
<!---
Set the values for the previous and next months for the back/next links. --->
<cfset
LastMonthYear = DateAdd('m', -1, ThisMonthYear)>
<cfset LastMonth = DatePart('m',
LastMonthYear)>
<cfset LastYear = DatePart('yyyy', LastMonthYear)>
<cfset NextMonthYear = DateAdd('m',
1, ThisMonthYear)>
<cfset NextMonth = DatePart('m', NextMonthYear)>
<cfset NextYear = DatePart('yyyy', NextMonthYear)>
<table border = "1"
bgcolor="#cccccc">
<tr>
<td
ALIGN = "center"
>
<!---
Display the current month/year as well as the back/next links. --->
<CFOUTPUT>
<nobr>
<A HREF = "calendar.cfm?month=#LastMonth#&year=#LastYear#"
class="calendar"><<</A>
<font
class="caltexthighlight">#MonthAsString(month)#
#year#</font>
<A
HREF = "calendar.cfm?month=#NextMonth#&year=#NextYear#"
class="calendar">>></A>
</CFOUTPUT><br><br>
<table
border = "1"
cellspacing=0 cellpadding=3>
<!---
Display
the day of week headers. I've truncate the values to display only the first three
letters of each day of the week.
--->
<tr
class="calendarheader">
<CFLOOP FROM = "1"
TO = "7"
INDEX = "LoopDay">
<CFOUTPUT>
<td
WIDTH = "15"
ALIGN = "center">#Left(DayOfWeekAsString(LoopDay),
1)#</td>
</CFOUTPUT>
</CFLOOP>
</tr>
<!---
Set the ThisDay variable to 0. This
value will remain 0 until the day of the week on which the
first day of the month falls on is reached.
--->
<cfset
ThisDay = 0>
<!---
Loop through until the number of days in the month is reached.
--->
<CFLOOP
CONDITION = "ThisDay LTE Days">
<tr
class="calendar">
<!---
Loop through each day of the week. --->
<CFLOOP
FROM = "1"
TO = "7"
INDEX = "LoopDay">
<!---
If
ThisDay is still 0, check to see if the current day of the week in the loop
matches
the day of the week for the first day of the month.
If the
values match, set ThisDay to 1.
Otherwise,
the value will remain 0 until the correct day of the week is found.
--->
<cfif ThisDay IS 0>
<cfif DayOfWeek(ThisMonthYear) IS LoopDay>
<cfset ThisDay = 1>
</cfif>
</cfif>
<!---
If the ThisDay value is still 0, or it is greater than the number of days
in the month,
display nothing in the
column. Otherwise, display the day of the month and increment the value.
--->
<cfif (ThisDay IS NOT 0) AND (ThisDay LTE
Days)>
<CFOUTPUT>
<!---
I choose to highlight the current day of year using an IF-ELSE. ---->
<cfif (#ThisDay# EQ #currentday#) AND (#month# EQ #startmonth#)
AND (#year# EQ #startyear#)>
<td ALIGN = "center">
<cfset dayview = #dateformat(createdate(#year#,
#month#, #thisday#), "mm/dd/yyyy")#>
<font class="calendartoday">#ThisDay#</font>
</td>
<cfelse>
<td ALIGN = "center">
<cfset dayview = #dateformat(createdate(#year#,
#month#, #thisday#), "mm/dd/yyyy")#>
<font class="calendar">#ThisDay#</font>
</td>
</cfif>
</CFOUTPUT>
<cfset ThisDay = ThisDay + 1>
<cfelse>
<td></td>
</cfif>
</CFLOOP>
</tr>
</CFLOOP>
</table>
</td>
</tr>
</table>
</body>
</html>
The end result:
Note: You can easily save the code as a custom tag or user defined function and call for a calendar any time you need one.
This is easy and simplistic as I have been able to streamline the process of generating dynamic calendars.
If you have any questions feel free to ask me.
-
Simple dynamic calendar
Simple and effective code to output an endlessly dynamic calendar using just basic ColdFusion functions
Author: David Siles
Views: 25,405
Posted Date: Tuesday, December 17, 2002
