0 Replies - 1583 Views - Last Post: 10 August 2005 - 04:39 PM

#1 semenov2001   User is offline

  • New D.I.C Head
  • member icon

Reputation: 0
  • View blog
  • Posts: 0
  • Joined: 10-August 05

Quick Calendar

Posted 10 August 2005 - 04:39 PM

Description: You can see how code works and download the entire application with event manager at
http://www.doctorjac...r/index.cfmThis tag allows you to do the following cool things: to have an interactive calendar on any page of your site; to attach single and multiple events to particular dates and make it visible on the calendar; to access multiple and single event pages from the calendar in one click. to add, edit, and delete events at the calendar administrator panel

You can download the entire application with event manager at


Calendar has three atributes a user has to define. The required attribute is a name of a 
cfm template in which cf_calendar tag is inserted. For example, if you want to insert 
this tag into index.cfm page you have to specify this page as a custom tag 
attribute: page = "index.cfm" 


<cfparam name="attributes.page" type="string" default="calendar.cfm">


There are also two optional attributes that allow to specify ColdFusion
datasource and table name where you keep information about events. If you
do not specify these attributes they are set up as "calendar" datasource
and "calendar" table name by default. If you use your own datasource be sure
that your event table has the following required fields:

id (integer autoincrement) 
cdate (date/time general date format in MSAccess)
ctitle (text field)
cdescription (memo field)


<cfparam name="attributes.cdatasource" type="string" default="calendar">
<cfparam name="attributes.ctable" type="string" default="calendar">


To navigate through the calendar a URL parameter URL.mLink is used. If left arrow
clicked, the page in which the calendar is loaded and based on the URL.mLink 
parameter the calendar shifts itself either one month ahead (URL.mLink is 2 ) 
or one month back (URL.mLink is 1 ). By default this parameter is equal zero and
calendar is set up to the current month.


<cfparam name="URL.mLink" type="numeric" default="0">

<!--Initialization -->

<cfif URL.mLink is 0>
     <cfset SESSION.cMonth = Month(Now())>
     <cfset SESSION.cYear = Year(Now())>
     <cfset SESSION.nDays = DaysInMonth(Now())>
     <cfset SESSION.startDay = DayOfWeek(CreateDate(SESSION.cYear,SESSION.cMonth,1))>

<!-- When the left arrow clicked, the calendar is set up to one month back from the
current month -->

<cfif URL.mLink is 1>
     <cfset SESSION.cMonth = SESSION.cMonth-1>
     <cfif  SESSION.cMonth lt 1>
          <cfset SESSION.cYear = SESSION.cYear-1>
          <cfset SESSION.cMonth = 12>
     <cfset SESSION.nDays = DaysInMonth(CreateDate(SESSION.cYear, SESSION.cMonth,1))>
     <cfset SESSION.startDay = DayOfWeek(CreateDate(SESSION.cYear, SESSION.cMonth,1))>

<!-- When the right arrow clicked, the calendar is set up to one month forward from the
current month -->
<cfif URL.mLink is 2>
     <cfset SESSION.cMonth = SESSION.cMonth+1>
     <cfif  SESSION.cMonth GT 12>
          <cfset SESSION.cYear = SESSION.cYear+1>
          <cfset SESSION.cMonth = 1>
     <cfset SESSION.nDays = DaysInMonth(CreateDate(SESSION.cYear, SESSION.cMonth,1))>
     <cfset SESSION.startDay = DayOfWeek(CreateDate(SESSION.cYear, SESSION.cMonth,1))>
<cfset pos = 1>

<!-- Calendar styles is a subject to customization -->

<style type="text/css">
.style1 {color: #FCFAE9} 
.style6 {font-family: Arial; font-size: 12px; }
.style9 {font-family: "Times New Roman", Times, serif; font-size: 12px; color: #FFFFFF; } 

<!-- To output a calendar the tabular format is used. The next code generates 7 x 8 HTML table. First row 
is allocated for the calendar navigation (month link). Second row is week days header, and the rest are cells allocated to 
display day numbers -->

<table width="140"  border="1" cellpadding="0" cellspacing="0" bordercolor="##CCCCCC" bgcolor="##FCFAE9">
<tr valign="middle" bgcolor="0C0F57">
<td height="30" colspan="7" align="center" class="style6">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
    <td width="30"><a href="#attributes.page#?mLink=1"><img src="arrow_l.gif" width="20" height="30" border="0"></a></td>
    <td width="100%" align="center" valign="middle" class="style9">#MonthAsString(SESSION.cMonth)# #SESSION.cYear#</td>
    <td width="30"><a href="#attributes.page#?mLink=2"><img src="arrow_r.gif" width="20" height="30" border="0"></a></td>

<tr align="center" valign="middle" bgcolor="0C0F57">
<td width="20" height="20"><span class="style9">Su</span></td>
<td width="20" height="20"><span class="style9">Mo</span></td>
<td width="20" height="20"><span class="style9">Tu</span></td>
<td width="20" height="20"><span class="style9">We</span></td>
<td width="20" height="20"><span class="style9">Th</span></td>
<td width="20" height="20"><span class="style9">Fr</span></td>
<td width="20" height="20"><span class="style9">Sa</span></td>
<cfloop index ="i" from="1" to="6">
<cfloop index ="j" from="1" to="7">
<cfset theDay = pos - (SESSION.startDay-1)>
<!-- NewDate is a variable that will be used to query Events table. Here the 
calendar tries to create a date object. In case of success a triger variable
trigger is set to 1 -->
     <cfset newDate = CreateODBCDate(CreateDate(SESSION.cYear, SESSION.cMonth, theDay))>
     <cfset trigger = 1>
     <cfset trigger = 0>

<!-- If newDate is a date when an event(s) happen then we link this date in the calendar to 
events.cfm page where events for this date will be populated. Otherwise the date in the calendar
will by dysplayed without the link and the highlighted background. This query starts if trigger
variable is set to 1 that means that date is correct -->

<cfset bgrd = "FCFAE9">

<!-- bgrd defines a background color of the cell. The idea is that if the calendar has any events 
at this date, the cell background changes its color. You can customize backgrounf color
as it fits the color gamma of your web page -->

<cfif trigger eq 1>
     <cfquery datasource="#attributes.cdatasource#" name="checkEvent">
     select * from #attributes.ctable#
     where cdate = <cfqueryparam value='#newDate#' cfsqltype="cf_sql_timestamp">
     <!-- If there are some events we highlight the backgound of a date cell -->
     <cfif checkEvent.recordcount GT 0>
     <cfset bgrd = "CCCCCC">

<td width="20" height="20" align="center" valign="middle" bgcolor="#bgrd#">

<!-- If the date in the right range than it is dysplayed -->
<cfif NOT (theDay LT 1 OR theDay GT SESSION.nDays)>

<cfif trigger eq 1>
<cfif checkEvent.recordcount GT 0>
<a href="calendar_add_event_show.cfm?m1=#SESSION.cMonth#&y1=#SESSION.cYear#&d1=#theDay#" target="_blank"><span class="style6">#theDay#</span></a>
<span class="style6">#theDay#</span>
<!-- Otherwise, the hidden dash is inserted in order to dysplay the table borders correctly -->
<span class="style1">-</span>

<cfset pos = pos +1> 

Is This A Good Question/Topic? 0
  • +

Page 1 of 1