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">

About This Tutorial
Author: Bobby Hartsfield
Skill Level: Beginner 
 
 
 
Platforms Tested: CF4,CF5
Total Views: 55,843
Submission Date: August 15, 2003
Last Update Date: June 05, 2009
All Tutorials By This Autor: 3
Discuss This Tutorial
  • This code works as is in the indicated platforms AND MX. It was coded THEN commented. I don't use design view since it usually ends up screwing up a dynamic template/ That is probably your problem. Since the code can be copied and pasted into a template called calendar.cfm and ran with no errors I would say there are no nesting or unclosed tag issues. You must realize that these are tutorials, some of these guys write these straight into the box with little or no testing at all. They aren't all meant to be working applications as much as guides to help people with specific needs. This one in particular however... IS a working application. I also don't see anything different from the code in the tutorial... and the code you claim to have "fixed" except mine has a comment in it as for the loop, there are 2 open loop tags and 2 close loop tags the app basically lays out as follows... There is nothing wrong with a cfif inside of another cfif (or 57 more inside that for that matter) I don't know what else to say other than it works perfectly as is once the NON commented text has been taken out... (Thank Pablo for that one). I would be happy if the comment section for tutorials disappeared btw.

  • I was able to test and got it working. But I noticed in design view, it showed an invalid tag at the end of the page. Is this code incorrect? I changed it, and it shows fine (notice there is a

  • This is exactly what i needed! Thanks for taking the time to write it!

  • Thank you, works OK with MX

  • Nice tutorial to learn CF with.

  • this tutorial is exactly what I needed, thanks.

  • It was written in CF 5 and only tested in 4 and 5 just like it says... "Tested Platforms: CF4,CF5". If you can't port it to MX, then maybe you should find a new hobby beacuase it was very simple. It's a tutorial of a step by step process on how to a build a calendar. A rating of one is from a simple mind. Go post your comments about the rating system in the correct forum or send Pablo an email. Don't bother me with comments that were better suited for there or better left unsaid due to lack of research.

  • seems to work fine for me

  • yep, the rating system here is wonky

  • also, i rated this tute a 1 but it came up as 4?

Advertisement

Sponsored By...
Powered By...