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
By: David Siles
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.
About This Tutorial
Author: David Siles
Total Views: 50,833
Submission Date: December 17, 2002
Last Update Date: June 05, 2009
All Tutorials By This Autor: 1
Skill Level: Intermediate
Platforms Tested: CF5Total Views: 50,833
Submission Date: December 17, 2002
Last Update Date: June 05, 2009
All Tutorials By This Autor: 1
Discuss This Tutorial
-
-
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.
SELECT * FROM table where day=#ThisDay# #year# #month#
#day#
#title#
#comment#
-
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:
#ThisDay#
SA #DateDiff("yyyy", CreateDate(1969,7,20), CreateDate(year,month,thisday))#:#DateDiff("y", CreateDate(LastYear,7,19), CreateDate(year,month,thisday))##ThisDay#
SA #DateDiff("yyyy", CreateDate(1969,7,20), CreateDate(year,month,thisday))#: #DateDiff("y", CreateDate(LastYear,7,19), CreateDate(year,month,thisday))# -
Nice calendar! i save many time with this snippet! thanks
-
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.
-
Just add a URL query string to the dayview variable like this:
#ThisDay# 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. -
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.
-
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.
-
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.
-
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?
Advertisement
