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.
Date added: Tue. December 17, 2002
Posted by: David Siles | Views: 24445 | Tested Platforms: CF5 | Difficulty: Intermediate
Full Applications
Dates/Time
 |
Creating a simple, dynamic Calendar using ColdFusion
hi..i have seen ur calender code and i am amazed .was wondering if u could assist me to link a form to the calender
Posted by: james
Posted on: 04/07/2004 01:30 AM
|
Cool and Lean
Realy like this Calendar and have modified it to display days where there are events on. The only thing I'm wondering is how easy it would be to kill the table and replace with divs?
Posted by: Peter
Posted on: 07/13/2004 08:46 AM
|
Adapting for LS
I'm still busy adapting it to local specific settings.. That would be a nice feature though. And changing the startday, mouseovers per day. I'm thinking of using it as a scheduler.
Posted by: Jeroen
Posted on: 08/05/2004 06:01 AM
|
Dynamic Calendar
Thank you for the calendar. Can you show how to link a date to open up information for that day. I want to use it for tasks. I want to click on a day and it opens up a list of tasks for project management. Can you advise on this?
Thanks in advance.
Posted by: Donna Cruz
Posted on: 02/08/2005 04:32 PM
|
calendar
For the dynamic calendar that you have, is there a way that I can have the dates as hyperlinks and when you click it you can see all the events that are for that day. I would really be a big help if you could really help me as soon as possible.
Posted by: octavia
Posted on: 03/03/2005 09:29 PM
|
Interactive
Just add a URL query string to the dayview variable like this:
<cfset dayview = #dateformat(createdate(#year#, #month#, #thisday#), "mm/dd/yyyy")#>
<font class="calendar"><A HREF = "populatecalendar.cfm?month=#Month#&year=#Year#&day=#ThisDay#" class="calendar"> #ThisDay# </A></font>
Then make an event table with year, month, day, title, comments - then a form to post an event and have them select the day, month, year from drop downs that send numeric values to the event table. Then just call the events with a query selecting * where those 3 numeric values = #month# and #year# and #Thisday#
wahlah!! interactive calender.
Posted by: bob
Posted on: 04/10/2005 01:18 AM
|
Interactive Day Links
I am pulling event dates from my database. I want to make it possible to turn the days in which there are corresponding events into hyperlinks and when it is clickec one can see all the events for that particluar day.
I am trying to use loops but having no luck.
Posted by: Paa Kwesi
Posted on: 07/19/2005 06:14 PM
|
Thanks
Nice calendar! i save many time with this snippet! thanks
Posted by: Erick
Posted on: 08/04/2005 09:29 AM
|
Date Diff integration problem
David,
Awesome calendar!! I'm working with it to integrate a Date Diff where the number of years and the number of days from 7-20-1969 (man on the moon) is displayed. I'm close, but it blows up when it hits Feb 2006 (starts displaying negative numbers). 'm rather new to working with the date functions and this one has been a major headache. Any assisstance you can render will be appreciated. Here is the code:
<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")#>
<a href="events.cfm?month=#Month#&year=#Year#&day=#ThisDay#"><font face="Verdana, Arial, Helvetica, sans-serif" size="2"> <font class="calendartoday">#ThisDay# </font><br>
<font face="Arial, Helvetica, sans-serif" size="1">SA #DateDiff("yyyy", CreateDate(1969,7,20), CreateDate(year,month,thisday))#:#DateDiff("y", CreateDate(LastYear,7,19), CreateDate(year,month,thisday))#</font></font></a></td>
<cfelse>
<td ALIGN = "center">
<cfset dayview = #dateformat(createdate(#year#, #month#, #thisday#), "mm/dd/yyyy")#>
<font class="calendar"> <a href="events.cfm?month=#Month#&year=#Year#&day=#ThisDay#" class="calendar"><font face="Verdana, Arial, Helvetica, sans-serif" size="2">#ThisDay#</font><br>
<font face="Arial, Helvetica, sans-serif" size="1">SA
#DateDiff("yyyy", CreateDate(1969,7,20), CreateDate(year,month,thisday))#: #DateDiff("y", CreateDate(LastYear,7,19), CreateDate(year,month,thisday))#
</font></a> </font> </td>
</cfif>
</CFOUTPUT>
Thanks!!
Posted by: Brenda Germain
Posted on: 08/13/2005 09:05 PM
|
event calendar
Hi,
I am trying to make an event calendar. Refer to the comment of bob on subject interactive, ok the dates or day on calender becomes hyperlink and yes I can even add events on database by making table and form. I am facing one issue and that is of "ThisDay" logic. If I make a file populatecalendar.cfm and wrote query like written below, it will give me error on "ThisDay" says this variable is not defined.
Can anyone solve this problem for me? How can I define "This Day" variable so that when i click on hyperlink, it will give me the event for that particular day.
<CFQUERY DATASOURCE="ok" NAME="great">
SELECT *
FROM table
where day=#ThisDay#
</CFQUERY>
<CFOUTPUT QUERY="great" >
#year#
<p>
#month#
<p>
#day#
<p>
#title#
<p>
#comment#
<p>
</CFOUTPUT>
Posted by: John
Posted on: 11/15/2005 10:40 AM
|
A Modified Version
This is great as such, but I made some modifications.
It displays also next and previous month dates and converts all dates to unix format yyyy-mm-dd. Also starts weeks from Mondays european style and you can translate week days and months to your preferred language.
Works fine with CF5 Linux.
Download
http://www.ding-dongdaddy.com/acxs/calendar_view_x.cfm
BR and thanks,
Aarni
Posted by: Aarni
Posted on: 04/07/2006 08:26 AM
|
Working
As some asked abt the calendar events module, Its working fine, You should change the value of #thisday# in your eventscalendar.cfm page to #day#/#month#/#year#.
It works fine on my machine
Posted by: Worj
Posted on: 04/21/2006 02:03 AM
|
Calendar: passing the date
I failed to grasp the technique of how the date can be passed when it is clicked on. All I want to do is populate a form field with the day the viewer clicks in the calendar. Can you help?
Posted by: Derrill
Posted on: 02/07/2008 10:54 AM
|
|
ColdFusion Hosting
Blink
Del.icio.us
Digg
Furl
Google
Simpy
Spurl
Y! MyWeb