Basic Calendar
Get the Code for this Tutorial
View a Working Example of This Code
Comment on this Tutorial
Introduction
NOTE: This script has been updated. There was an error in the script that would cause the month to start on the wrong day of the week. This bug has been fixed and tested. Thanks for looking, and enjoy!
The basics of a ColdFusion based calender script are much easier than you might think. This is part one of a series on building a calender application. This part will go through the base of the code that will build the browse-able calender.
____________
Tutorial Code
<!--------------------------------------------
Kevin Sargent
November 12th 2005
http://www.lot-o-nothin.com/cfml/
Please Give Credit Where Used.
--------------------------------------------->
<!---{ default the selectedDate to now() }--->
<cfparam name="url.selectedDate" default="#now()#">
<!---{ change this code to get a date from a database, form, or url, etc... }--->
<cfset thisdate = selectedDate>
<!---{ what day does startDate fall on? what position in the calendar is the first day on? }--->
<cfset startPosition = dayofweek(createDate(year(thisDate),month(thisDate),1))>
<!---{ how days in month plus startposition }--->
<cfset endPosition = daysinmonth(thisdate) + startposition>
<!---{ ho many squares are needed to show every day? }--->
<cfset loopcount = ceiling((daysinmonth(thisdate) + startPosition -1) / 7) * 7>
<cfoutput>
<div style="text-align:center;">
<!---{ previous month link }--->
<a href="calendar.cfm?selectedDate=#dateformat(dateadd("m", -1, thisDate), "mm/dd/yyyy")#/"> #dateformat(dateadd("m", -1, thisDate), "mm/dd/yyyy")# </a>
<!---{ name of month, year }--->
<h1 style="display:inline;">#dateformat(thisdate,"mmmm")# #year(thisdate)#</h1>
<!---{ next month link }--->
<a href="calendar.cfm?selectedDate=#dateformat(dateadd("m", 1, thisDate), "mm/dd/yyyy")#/"> #dateformat(dateadd("m", +1, thisdate), "mmmm")# </a>
</div>
<!---{ table }--->
<table class="example_table" cellspacing="1">
<!---{ day names }--->
<tr class="table_color_1">
<td>Sunday</td>
<td>Monday</td>
<td>Tuesday</td>
<td>Wednesday</td>
<td>Thursday</td>
<td>Friday</td>
<td>Saturday</td>
</tr>
<!---{ loop through loopcount }--->
<cfloop from="1" to="#loopcount#" index="i">
<!---{ set current day number }--->
<cfset thisday = i - startposition + 1>
<!---{ make a new row when current loop (i) divided by seven has remainder 1 }--->
<cfif i mod 7 EQ 1>
<tr>
</cfif>
<!---{ this if applies a different CSS class to the day chosen }--->
<cfif day(thisDate) EQ thisDay>
<td valign="top" class="class_1">
<cfelse>
<td valign="top" class="class_2">
</cfif>
<!---{ this shows the day numbers on only the correct squares }--->
<cfif i GTE startposition AND i LT endPosition>
<a href="calendar.cfm?selectedDate=#dateFormat(createdate(year(thisDate), month(thisDate), thisday), "mm/dd/yyyy")#/"> #thisday# </a>
</cfif>
</td>
<!---{ close row tag when current loop count (i) divided by 7 has no remainder. }--->
<cfif i mod 7 EQ 0>
</tr>
</cfif>
<!---{ done. }--->
</cfloop>
</table>
</cfoutput>
Comments
Enrique
01/15/2006
Nice example. Would like to know how you could add comments/appointments to each day.
Webmaster
01/17/2006
I would run one query before the calander that gets all the appointments or comments based on the month. Then make and array or structure with a key that is the day of month, that contains all the data for that day. You could easily have multiple entries per day. On the calander loop, you can check if there is any info for that day, and show it.
Stay tuned and I will have the advanced version available someday :)
Kent
03/30/2006
Saw the working version. Looks like the time difference might cause question. Server-side vs Client-side time difference. I am in UK and date is 31st but calendar still selected 30th. Not an issue, just a note. I cant even create a calendar script what am i on about. Keep it up, Cheers.
rhall003
06/05/2006
This script works flawlessly, until year 2007. In January 2007, it shows the first day as Sunday, not Monday. As a consequence, it screws up the rest of calendar year 2007. :(
Webmaster
06/26/2006
rhall003
Very odd, have you had more time to look into that? I do not!
Thanks for letting me know. I want to revise the code if I ever have a chance... I know it could be smoother.
Webmaster
10/28/2006
I have updated the script. The start day of each month now falls on the correct day of the week.
Localization could by handled by using dateAdd() and the correct offset of hours at the top of the script where thisDate is set.
MZ
02/27/2007
Nice Script I alwayz wanted to learn how to build calendar and your tutorial give me vast information! thanX well I have some queries regarding recordcount of group data so please provide me your email add so I can send you my query!
