CF Mini Calendar

Ray Camden wrote a simple calendar, and like many other I asked the same thing. How do I link it to my DB? I asked Ray like many others and there can be many solutions for this as he put it, but the solution I wanted was linking the number of the day to another page for viewing posts or events on that day pulled from the database.

So lets link the calendar to the DB, below is the code Ray supplied, it's a basic calendar and with some CSS you can make it look just like reall cool, but we're not here for that..

<cfoutput>
<table border="1" width="100%" height="100%">
    <tr>
        <cfloop index="x" from="1" to="7">
            <th>#dayOfWeekAsString(x)#</th>
        </cfloop>
    </tr>
    </cfoutput>

    <cfset firstOfTheMonth = createDate(year(now()), month(now()), 1)>
    <cfset dow = dayofWeek(firstOfTheMonth)>
    <cfset pad = dow - 1>

    <cfoutput>
    <tr>
    
</cfoutput>

    <cfif pad gt 0>
        <cfoutput>
<td colspan="#pad#">&nbsp;</td></cfoutput>
    </cfif>

    <cfset days = daysInMonth(now())>
    <cfset counter = pad + 1>
    <cfloop index=
"x" from="1" to="#days#">
        <cfif x is day(now())>
            <cfoutput>
<td bgcolor="yellow"></cfoutput>
        <cfelse>
            <cfoutput>
<td></cfoutput>
        </cfif>    

        <cfoutput>

            #x#</td>
        </cfoutput>
        <cfset counter = counter + 1>
        <cfif counter is 8>
            <cfoutput>
</tr></cfoutput>
            <cfif x lt days>
                <cfset counter = 1>
                <cfoutput>

                <tr>    
                </cfoutput>
            </cfif>
        </cfif>
    </cfloop>

    <cfif counter is not 8>
        <cfset endPad = 8 - counter>
        <cfoutput>
            <td colspan="#endPad#">&nbsp;</td>
        </cfoutput>
    </cfif>

    <cfoutput>
        </table>

    </cfoutput>

The easiest way to do this is to first grab your dates from the database.

<!--- Query the database and search between the start and end--->
<CFQUERY DataSource="#database#" Name="get_dates">
    Select blID, blTitle, blDate, Day(blDate) AS dd
    From blog_tbl
    Where blDate Between #firstOfTheMonth# and #endOfTheMonth#
</CFQUERY>

<!--- set the day from the list in the db--->
<cfset day = ValueList(get_dates.dd)>

So in these query i am pulling the dates and the day as a variable (d), then setting the (linkdays) in a VariableList. Basicly if you have 3 days in your query 2, 3, and 4, if you did #VARIABLE.linkdays# it would output 2,3,4. Now we can take the day and link them.

<!--- Here we compare the day list to the days being outputed if there is a match we link it.--->
<cfif x is day(now())>
    <b>#x#</b>
<cfelse>
    <cfif listFind(day,x)>
        <a href="##"><b>[#x#]</b></a>
    <cfelse>
         #x#
    </cfif>
</cfif>

The now we use listFind to find the days in our list and compare to the days being outputted, if there is a match it will link it. Below id the output of the simple calendar Ray wrote.

Sunday Monday Tuesday Wednesday Thursday Friday Saturday
  1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30  

Here is the same calendar with the days linked using the functions describe above. I'm pulling dates from my blog so the dates match the calendar on the sidebar.

30
Sun Mon Tue Wed Thu Fri Sat
  1 [2] 3 4
5 [6] 7 [8] 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30  

Here is my code for the calendar.

<cfoutput>
    <table border="1" cellpadding="0" cellspacing="0">
        <tr>

        <cfloop index="x" from="1" to="7">
        <!--- Change the days of the week to be shorter--->
            <th>#DateFormat(x, "ddd")#</th>
        </cfloop>
        </tr>
</cfoutput>

<cfset firstOfTheMonth = createDate(year(now()), month(now()), 1)>
<!--- Add new variable for the end of the month--->
<cfset endOfTheMonth = createdatetime(year(now()), month(now()), #daysinmonth(firstOfTheMonth)#, 23, 59, 59)>

<!--- Query the database and search between the start and end--->
<CFQUERY DataSource="#database#" Name="get_dates">
    Select blID, blTitle, blDate, Day(blDate) AS dd
    From blog_tbl
    Where blDate Between #firstOfTheMonth# and #endOfTheMonth#
</CFQUERY>

<!--- set the day from the list in the db--->
<cfset day = ValueList(get_dates.dd)>

<cfoutput>#days#</cfoutput>

<cfset dow = dayofWeek(firstOfTheMonth)>
<cfset pad = dow - 1>

<cfoutput>
    <tr>
</cfoutput>

<cfif pad gt 0>
    <cfoutput>

        <td colspan="#pad#">&nbsp;</td>
    </cfoutput>
</cfif>

<cfset days = daysInMonth(now())>
<cfset counter = pad + 1>
<cfloop index=
"x" from="1" to="#days#">
    <cfif x is day(now())>
        <cfoutput>
<td bgcolor="yellow"></cfoutput>
    <cfelse>
        <cfoutput>
<td></cfoutput>
    </cfif>


    <cfoutput>
   
 <!--- Here we compare the day list to the days being outputed if there is a match we link it.--->
    <cfif x is day(now())>
        <b>#x#</b>
    <cfelse>
        <cfif listFind(day,x)>
            <a href="##"><b>[#x#]</b></a>
        <cfelse>
            #x#
        </cfif>
    </cfif>
    </td>
</cfoutput>
<cfset counter = counter + 1>
<cfif counter is 8>
    <cfoutput>
</tr></cfoutput>
    <cfif x lt days>
        <cfset counter = 1>
        <cfoutput>

            <tr>
        </cfoutput>
    </cfif>
</cfif>
</cfloop>

<cfif counter is not 8>
    <cfset endPad = 8 - counter>
    <cfoutput>
        <td colspan="#endPad#">&nbsp;</td>
    </cfoutput>
</cfif>

<cfoutput>
</table>
</cfoutput>

Hope this helps answer some questions it's really simple using a listFind, you can visit JohnRamon.com to contect me.

About This Tutorial
Author: John Ramon
Skill Level: Beginner 
 
 
 
Platforms Tested: CFMX7
Total Views: 103,387
Submission Date: November 10, 2006
Last Update Date: June 05, 2009
All Tutorials By This Autor: 2
Discuss This Tutorial
  • so if get_dates.Name returns jul-12-2007, jul-13-2007 and so on you need to loop through them before adding to x. Here is a peice of test code to point you in the right direction #Mid(Name, 5, 2)# that will return 13 you can them add it to x to use with the calendar. Aso for the forward and back links to go through the months check the link "Ray Camden" the very first word on the tutorial. down in the comments someone added that function so I didn't bother messing with it. Let me know if your still having problems

  • Unless my thought processes are off today, this code won't set a link for the current day if it's in the database. #x# [#x#] #x# is true, then the cfelse won't be processed, bypassing the statements. To be able to link current day also, the code could look like this: [#x#] #x# [#x#] #x# Scott

  • John, When i enter information into my DB, it creates a new table, MMM-DD-YYYY (jan-23-2007, etc). The below query skims through all the tables in the access database and i then use that to return the table names (which are also the dates for my blog entries). SELECT Name FROM MSysObjects WHERE Type=1 AND Flags=0 ORDER BY Name ASC Returns a list of table names (which are actually dates) form the above query. should work, but x = the day 'numeral' (ie - 22). How could i implement this to work with the way my DB is set up? The way the Calendar is made, it fills the dates based on the current date on the server. How would you make a Year/Month forward/back button to browse other months? While i'd like to say im an intermediate CF user...things like this boggle me to no end at times! (also John, i tried submitting this post to your original post, but the 'image verification' image never loaded and gives an error...thus...i'm seen as a spam bot m(_._)m Thanks, as always! ken

  • Great tut buddy, Really Very Nice

  • That was something I used it isn't necessary but basicly it definds the last day as the last day, and 23 is 12 pm at night and 59 min and 59 sec.

  • this is a great contribution, thanks for posting! quick question why do why do we use the fixed variables of #, 23, 59, 59? thanks for taking the time of both sharing & reading this feedback 8-)

Advertisement

Sponsored By...
Healing Touch Massage - $39.00 - 50 Minute Deep Tissue Massage Dripping Springs, Texas!