• Home
• Tutorials
• Forums
• Reference
• Developers
• Advertise
• About Us

A Basic Calendar Application to Build on

I have seen quite a few people looking for prebuilt calendar apps but the people I wrote this
for are the people who wanted a headstart in building their OWN custom calendar app.

It is very basic and does nothing more than display the currently selected month/year's calendar
and give links to the PREVIOUS month's calendar and the NEXT month's calendar by using The
DateAdd() function

Don't let the number of lines scare you away... this is very easy. There are actually only 50
lines of code out of 200 total. Just trying to comment as much as possible to save Pablo from
more work than he already does for us all.

with that said... let's get started!!

<!---First things first. There is no need to ouput blank space to the user's browser with out
preperatory code so let's disable the output of anything NOT inside <CFOUTPUT></CFOUTPUT> Tags--->
<cfsetting enablecfoutputonly="yes" showdebugoutput="no">

<!--- If a URL Varaible is defined called THISCAL, lets try and use its date as the current calendar --->
<cfif IsDefined('Url.ThisCal')>
    <cftry>
        <!--- try setting the value found in URL.ThisCal to a dateformatted variable --->
        <cfset ThisCalMonth = DateFormat(Url.ThisCal, "M-D-YYYY")>
       
        <cfcatch type="Any">
        <!--- if there was a problem creating a date from the URL variables value such as the value not being a date
at all or the value being an invalid date such as 1-33-2003, then use todays date as the current calendar --->
        <cfset ThisCalMonth = DateFormat(Now(), "M-D-YYYY")>
        </cfcatch>
    </cftry>
<cfelse>
    <!--- else if there was no URL variable defined at all, let's use todays date as the current calendar --->
    <cfset ThisCalMonth = DateFormat(Now(), "M-D-YYYY")>
</cfif>


<!--- Now we have a variable called ThisCalMonth that holds either Todays date or a date defined by the user--->

<!--- Next, let's make sure that ThisCalMonth's DAY part is 1 (first day of the month so we can decide what DAY
to start outputting Numbers to our calendar --->

<!--- Take the MONTH and YEAR from ThisCalMonth and create a date using "1" as the Day part --->
<cfset ThisCalMonth = "#DateFormat(ThisCalMonth, "M")#-1-#DateFormat(ThisCalMonth, "YYYY")#">

<!--- Ok, now we are ready to decide what LAST MONTH's and NEXT MONTH's dates should be --->
<!--- Thanks to ColdFusion, we can simply use the DateAdd function to decide these values --->
<!--- Just ADD NEGATIVE 1 (-1) to ThisCalMonth's MONTH part to get the PRVIOUS month's date --->
<cfset LastMonth = DateFormat(DateAdd("M", -1, ThisCalMonth), "M-D-YYYY")>

<!--- Just ADD 1 to ThisCalMonth's MONTH part to get NEXT month's date --->
<cfset NextMonth = DateFormat(DateAdd("M", 1, ThisCalMonth), "M-D-YYYY")>


You could easily add links to jump forward or backwards by a whole year by adding ONE (1) or NEGATIVE ONE (-1)
to the YEAR part of THISCALMONTH

Once again, Thanks to coldfusion, we dont have to figure out how many days are in the currently viewed calendar's month/year not even in a leap year !!!

The DaysInMonth() function will take care of all that for us... well until the 29th century anyway :)

<cfset TotalDays = DaysInMonth(ThisCalMonth)>

Ok, Now we have all we need to build a calendar to display THISMONTH's dates with links to LAST MONTH and NEXT MONTH
THISCALMONTH: holds the first days date in the current calendars month and year (X-1-XXXX)
LASTMONTH: holds the first days date in the month BEFORE the current calendars month and year (X-1-XXXX)
NEXTMONTH: holds the first days date in the month AFTER the current calendars month and year (X-1-XXXX)
TOTALDAYS: holds a double digit numeric value of the number of days that are in the current calendars month/year (XX)

So now we are ready to build the calendar!

We disabled the output of anything NOT between cfoutput tags at the beginning of this template
so Anything between the <CFOUTPUT></CFOUTPUT> tags below will be outputted to the user's browser
 

<	THISMONTH - YEAR					>
SUN	MON	TUES	WED	THURS	FRI	SAT

<cfoutput>
<table border="1" cellpadding="0" cellspacing="0" width="600">
    <tr>
        <!--- Ok, as I said at the beginning, we need last month and next month to use as links to other calendars
so here is LASTMONTH's link (it will appear as a 3 character abbreviation of that months name (eg. Jan)
--->
        <td align="center">
            <a href="calendar.cfm?ThisCal=#LastMonth#">#DateFormat(LastMonth, "mmm")#</a>
        </td>
        <!--- this is the top center square that displays the current calendars MONTH and YEAR --->
        <td align="center" colspan="5">
            #DateFormat(ThisCalMonth, "mmmm - yyyy")#
        </td>
        <!--- here is our link to NEXT MONTH's calendar --->
        <td align="center">
            <a href="calendar.cfm?ThisCal=#NextMonth#">#DateFormat(NextMonth, "mmm")#</a>
        </td>
    </tr>
    <tr>
    <!--- ok so it wouldnt be a calendar without a row of DAY headers to tell us what day the column is right?
how many days in a week? oh yeah 7.. so lets loop from 1 to 7 takin the current loops index and converting it to
the day that corresponds with it with good ol' DateFormat()
--->
        <cfloop from="1" to="7" index="DayOfWeek">
        <td align="center">#DateFormat(DayOfWeek, "DDD")#</td>
        </cfloop>
    </tr>
    <!--- we do not want to start outputting numbers to represent the days until we have reached the starting day for the current month
So lets create a "Flag" variable to determin rather or not to show numbers yet
--->
    <cfset ShowDays = False>


<!---
Once we start outputting day numbers to the squares, we will need to keep track of where we are and what number is next right?
What better place to start than... you guessed it... "1"
--->
<cfset ThisDay = 1>
<!--- NOTE: this number will only be incremented while ShowDays = TRUE --->
<tr>
<!---
Ok, I've looked at a few calendars... ok i only looked at one.. my system calendar and according to Microsoft..
We will NEVER need more than 42 squares...6 rows of 7 squares to display every day in any month... ever
( i failed me some english .. heh) Really... if the first day of the month starts on a Saturday (the
last square in the first row) and the month has the max 31 days... the 42nd square will be day 31... hmm also a Saturday weird...
ok ok ... it doesnt take much to distract me into confusing you....
--->

<!--- Loop from "1" to our previously discussed "42" our loop Index will be Called ThisCalSquare and will hold the current loops number --->
<cfloop from="1" to="42" index="ThisCalSquare">

<!--- if we have reached the square that holds the first day of the current calendar's month, set ShowDays to TRUE so we can begin displaying the numbers to represent the date--->
<cfif ThisCalSquare LTE 7 and ( DateFormat(ThisCalMonth, "DDDD") IS DateFormat(ThisCalSquare, "DDDD") )>
    <cfset ShowDays = True>
</cfif>

<!--- if we have reached the LAST square that will hold a numbe for this month, reset SHOWDAYS to FALSE so the code knows to stop displaying the numbers in the squares --->
<cfif ThisDay GT TotalDays>
    <cfset ShowDays = False>
</cfif>

<!--- If ShowDays is TRUE then we can display a number in this squaer to represent a day --->
<cfif ShowDays>
<td valign="top" height="80">
<!--- this nested table will create a smaller square in the upper left corner to hold the number that we set in THISDAY --->
<table border="1" cellpadding="3"><tr><td>#ThisDay#</td></tr></table>

<!---
If you want to do something different with special days, such as days that might match a date form a query... here's the
place to do it.

ThisDay only holds a single or double digit number (1-31) but combined with ThisCalMonth's date and year parts, you can
have the exact date of this squares value to compare against dates in a query or any other dates you wish

<cfset ThisSquaresDate = "#DateFormat(ThisCalMonth, "M")#-#ThisDay#-#DateFormat(ThisCalMonth, "YYYY")#">
--->

</td>
<!--- SHOWDAYS is TRUE and we just output THISDAY so lets add 1 to THISDAY for the next round --->
<cfset ThisDay = ThisDay + 1>
<cfelse>

<!--- else if SHOWDAYS is FALSE, display a grayed out square with a little style help --->
<td valign="top" height="80" style="background-color:##cccccc;"></td>
</cfif>

<!---
decide rather or not to strt another row of weeks
if ThisCalSquare MOD 7 is 0 (the remainder of THISCALSQUARE divided by 7 = 0) then we just hit saturday... the last square of the row
so lets end the row with </tr>
--->
<cfif ThisCalSquare MOD 7 is 0></tr>
<!--- If THISCALSQUARE (this loop index) is NOT the last one (42) then begin another row with <tr> --->
<cfif NOT ThisCalSquare NEQ 42><tr></cfif>
</cfif>

</cfloop>
</tr>
</table>

</cfoutput>

<!--- dont forget to renable output incase you want to add more below the calendar HAVE FUN!--->
<cfsetting enablecfoutputonly="no" showdebugoutput="no">