Solved

Coldfusion flat date picker calendar

Posted on 2007-11-18
14
2,905 Views
Last Modified: 2013-12-24
I am developing a site that's a bar database that displays events, band and schedules, etc.

One of the features is an event by date calendar. When a date is clicked, any event or  band event that is happening on that day is to be displayed on the selected date.

Its a flat calendar, like the one displayed on this site: http://www.philly2night.com/ (look on the right side)

Event Dates and Band Schedule dates are entered into Access as text. (in the following format: 10-17-2007)

Just looking for a way to display any date that's been clicked on the flat calendar.

Here is an example of the website: http://www.nutsandboltsdesign.com/barreport/

Is there any easy way to get this done? I've been looking around at JavaScript date pickers, but, I havent found anything helpful.
0
Comment
Question by:meechp123
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 7
  • 6
14 Comments
 
LVL 12

Expert Comment

by:mmc98dl1
ID: 20337241
check out Ben Nadels blog post on how to print a calender:

http://www.bennadel.com/index.cfm?dax=blog:663.view 

you should be able to adapt this so the link can go off to a page that has your events on it.
0
 
LVL 52

Expert Comment

by:_agx_
ID: 20341280
It should be easy using the link mmc98dl1 suggested.

In the calendar, make the "Day" number a link

    <td><a href="YourEventPage.cfm?selDate=#FullDateOfMonth#">#DayOfMonth#</a></td>

Then run a query to get any events for the the selected date. Though, you should also validate the url parameter is a date in the correct format.

   <!--- default to current date if nothing was selected --->
   <cfparam name="url.selDate" default="#DateFormat(now(), 'mm-dd-yyyy')#">
   <cfquery name="getEvents" datasource="YourDataSource">
      SELECT  EventName, EventDetails
      FROM    YourTable
      <!---- should store as date/time not text --->
      WHERE   EventDate = <cfqueryparam value="#url.selDate#" cfsqltype="cf_sql_varchar">
   </cfquery>

   Show events for #url.selDate#:<br>
  <cfoutput query="getEvents">
      Event Name: #EventName#<br>
      Details:  #EventDetails#<br><br>
  </cfoutput>

> dates are entered into Access as text. (in the following format: 10-17-2007)

BUT .. its better to store date values in a "date/time" field so you can take advantage of CF's or your db's date functions.    When you store values as text, searching for "9/7/2007" won't find any matches if the date is entered as "09/07/2007" (ie one has leading zeroes the other doesn't).  You can get around this by using a db function to convert the strings to a "date" but that's less efficient and more error prone than just storing them as a date/time in the first place.


0
 

Author Comment

by:meechp123
ID: 20354417
I found this script that seems like it will do what I am looking to accomplish:

http://www.barreport.com/html2/jscalendar.cfm

The author of the script has it programmed for PHP and when you click on a date, it's passing the DATE plus index.php.

I guess I could do something similar with CF, but, I am kind of at a loss of how I would get this done....anyone able to help me out even a little?

This is the script:
<script type="text/javascript">
  function dateChanged(calendar) {
    // Beware that this function is called even if the end-user only
    // changed the month/year.  In order to determine if a date was
    // clicked you can use the dateClicked property of the calendar:
    if (calendar.dateClicked) {
      // OK, a date was clicked, redirect to /yyyy/mm/dd/index.php
      var y = calendar.date.getFullYear();
      var m = calendar.date.getMonth();     // integer, 0..11
      var d = calendar.date.getDate();      // integer, 1..31
      // redirect...
      window.location = "/" + y + "/" + m + "/" + d + "/index.php";
    }
  };

  Calendar.setup(
    {
      flat         : "calendar-container", // ID of the parent element
      flatCallback : dateChanged           // our callback function
    }
  );
</script>

---------------

I was thinking I could something like this (I am not a JS pro by ANY means)

----------
<script type="text/javascript">
  function dateChanged(calendar) {
    // Beware that this function is called even if the end-user only
    // changed the month/year.  In order to determine if a date was
    // clicked you can use the dateClicked property of the calendar:
    if (calendar.dateClicked) {
      // OK, a date was clicked, redirect to /yyyy/mm/dd/index.php
      var y = calendar.date.getFullYear();
      var m = calendar.date.getMonth();     // integer, 0..11
      var d = calendar.date.getDate();      // integer, 1..31
        var selDate = y + m + d();
      // redirect...
      window.location = "/" + y + "/" + m + "/" + d + "/" + selDate + "/" + "testEvents.cfm";
    }
  };

  Calendar.setup(
    {
      flat         : "calendar-container", // ID of the parent element
      flatCallback : dateChanged           // our callback function
    }
  );
</script>
------------------------

testEvents.cfm
----------------
   <!--- default to current date if nothing was selected --->
   <cfparam name="url.selDate" default="#DateFormat(now(), 'mm-dd-yyyy')#">
   <cfquery name="getEventsCalendar" datasource="DSN">
   <!--- --->
   SELECT  e.eventID, e.eventName, e.eventPhone, e.eventEmail, e.eventWebsite, e.eventFee, e.eventAgeID,
                              e.eventTimeTo, e.eventTimeFrom, e.eventDate, e.eventShortDescription, e.eventLongDescription,
                              e.eventImage, e.eventAtmosphereID,
                              e.eventContactPerson, e.featuredEvent,
                              ea.eventAgeID, ea.eventAge,
                              p.placeID, p.placeName, p.placeType,
                              p.placeStreetAddress, p.placeCity, p.placeState, p.placeZip, p.placePhone, p.placeEmail, p.placeWebsite,
                              p.placeDescription, p.placeLogo, p.placeHours, p.placeTypeID,
                              a.eventAtmosphereID,
                              a.eventAtmosphere
      FROM   BRPlaces AS p, EventAge AS ea, BREvents AS e, Events AS e1, EventAtmosphere AS a
      WHERE e.eventDate = <cfqueryparam value="#url.selDate#" cfsqltype="cf_sql_varchar">
            AND ea.EventAgeID = e.EventAgeID
            AND e.EventID = e1.EventID
            AND e1.eventAtmosphereID = a.eventAtmosphereID
 ORDER BY e.EventID, e.eventDate DESC
   </cfquery>



<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>

<body>
   Show events for <cfoutput>#url.selDate#:</cfoutput><br>
  <cfoutput query="getEventsCalendar">
      Event Name: #EventName#<br>
      Details:  #eventLongDescription#<br><br>
  </cfoutput>

</body>
</html>

0
Creating Instructional Tutorials  

For Any Use & On Any Platform

Contextual Guidance at the moment of need helps your employees/users adopt software o& achieve even the most complex tasks instantly. Boost knowledge retention, software adoption & employee engagement with easy solution.

 

Author Comment

by:meechp123
ID: 20354419
i changed the fields from Text to Date/Time as suggested.
0
 
LVL 52

Expert Comment

by:_agx_
ID: 20354527
Assuming you have permission to use that script, I think you'd want to pass the selected date as a parameter like this


window.location = "testEvents.cfm?selDate=" + y + "/" + m + "/" + d;
0
 
LVL 52

Expert Comment

by:_agx_
ID: 20354546
Don't forget to validate the date parameter

<!--- use the current date if nothing was selected, or the value is invalid --->
<cfif NOT (IsDefined("url.selDate") OR IsDate(url.selDate))>
      <cfset url.selDate = dateFormat(now(), "yyyy/mm/dd")>
</cfif>

And change the cfsqltype to a date/time type

   <cfqueryparam value="#url.selDate#" cfsqltype="cf_sql_date">   ... or ..

   <cfqueryparam value="#url.selDate#" cfsqltype="cf_sql_timestamp">
0
 

Author Comment

by:meechp123
ID: 20355777
it works!

it's strange because the events repeat and the calendar is a month behind.

http://www.barreport.com/html2/jscalendar2.cfm

check it out. click on november 30th and october 30th comes up. now. go to december 30th, and the november 30 events will come up and they repeat......
<!--- use the current date if nothing was selected, or the value is invalid --->
<cfif NOT (IsDefined("url.selDate") OR IsDate(url.selDate))>
      <cfset url.selDate = dateFormat(now(), "mm/dd/yyyy")>
</cfif>
 
 
   <!--- default to current date if nothing was selected --->
<cfparam name="url.selDate" default="#DateFormat(now(), 'mm-dd-yyyy')#">
   <cfquery name="getEventsCalendar" datasource="DSN">
   <!--- --->
   SELECT  e.eventID, e.eventName, e.eventPhone, e.eventEmail, e.eventWebsite, e.eventFee, e.eventAgeID,
					e.eventTimeTo, e.eventTimeFrom, e.eventDate, e.eventShortDescription, e.eventLongDescription, 
					e.eventImage, e.eventAtmosphereID,
					e.eventContactPerson, e.featuredEvent,
					ea.eventAgeID, ea.eventAge,
					p.placeID, p.placeName, p.placeType, 
					p.placeStreetAddress, p.placeCity, p.placeState, p.placeZip, p.placePhone, p.placeEmail, p.placeWebsite, 
					p.placeDescription, p.placeLogo, p.placeHours, p.placeTypeID, 
					a.eventAtmosphereID, 
					a.eventAtmosphere 
	FROM   BRPlaces AS p, EventAge AS ea, BREvents AS e, Events AS e1, EventAtmosphere AS a 
	WHERE e.eventDate = <cfqueryparam value="#url.selDate#" cfsqltype="cf_sql_timestamp">
		AND ea.EventAgeID = e.EventAgeID
		AND e.EventID = e1.EventID
		AND e1.eventAtmosphereID = a.eventAtmosphereID 
 ORDER BY e.EventID
   </cfquery>
 
 
 
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
 
<body>
   Show events for <cfoutput>#url.selDate#:</cfoutput><br>
  <cfoutput query="getEventsCalendar">
      Event Name: #eventName#<br>
      Details:  #eventLongDescription#<br><br>
  </cfoutput>
 
</body>
</html>

Open in new window

0
 
LVL 52

Expert Comment

by:_agx_
ID: 20355841
Yes, its one month behind because the month is zero-based.  Just add + 1and it should be fine

window.location = "testEvents.cfm?selDate=" + y + "/" + (m+1) + "/" + d;
0
 
LVL 52

Expert Comment

by:_agx_
ID: 20355846
Did you add the date validation? Right now it throws and error if you select 03/30/2007 (one month ahead)

InvalidDateTimeException: 2/30/2007 is an invalid date or time string..
0
 

Author Comment

by:meechp123
ID: 20355932
I am using       WHERE e.eventDate = <cfqueryparam value="#url.selDate#" cfsqltype="cf_sql_date">

I added the (m+1), thanks so much for that.

Still dont understand why it's repeating.

<!--- use the current date if nothing was selected, or the value is invalid --->
<cfif NOT (IsDefined("url.selDate") OR IsDate(url.selDate))>
      <cfset url.selDate = dateFormat(now(), "mm/dd/yyyy")>
</cfif>


   <!--- default to current date if nothing was selected --->
<!---<cfparam name="url.selDate" default="#DateFormat(now(), 'mm-dd-yyyy')#">--->
   <cfquery name="getEventsCalendar" datasource="DSN">
   <!--- --->
   SELECT  e.eventID, e.eventName, e.eventPhone, e.eventEmail, e.eventWebsite, e.eventFee, e.eventAgeID,
                              e.eventTimeTo, e.eventTimeFrom, e.eventDate, e.eventShortDescription, e.eventLongDescription,
                              e.eventImage, e.eventAtmosphereID,
                              e.eventContactPerson, e.featuredEvent,
                              ea.eventAgeID, ea.eventAge,
                              p.placeID, p.placeName, p.placeType,
                              p.placeStreetAddress, p.placeCity, p.placeState, p.placeZip, p.placePhone, p.placeEmail, p.placeWebsite,
                              p.placeDescription, p.placeLogo, p.placeHours, p.placeTypeID,
                              a.eventAtmosphereID,
                              a.eventAtmosphere
      FROM   BRPlaces AS p, EventAge AS ea, BREvents AS e, Events AS e1, EventAtmosphere AS a
      WHERE e.eventDate = <cfqueryparam value="#url.selDate#" cfsqltype="cf_sql_date">
            AND ea.EventAgeID = e.EventAgeID
            AND e.EventID = e1.EventID
            AND e1.eventAtmosphereID = a.eventAtmosphereID
 ORDER BY e.EventID
   </cfquery>



<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>

<body>
   <p>Show events for <cfoutput>#url.selDate#:</cfoutput><br>
  <cfoutput query="getEventsCalendar">
      Event Name: #eventName#<br>
      Details:  #eventLongDescription#<br />
  </cfoutput></p>

</body>
</html>
0
 

Author Comment

by:meechp123
ID: 20355938
0
 
LVL 52

Accepted Solution

by:
_agx_ earned 500 total points
ID: 20357739
> Still dont understand why it's repeating.

1. You're missing a JOIN in the query.  BRPlaces isn't joined to any of the other tables.  The result is a cartesian product (ie duplicates).  How does BRPlaces relate to the other tables?

            EventAge AS ea, BREvents AS e, Events AS e1, EventAtmosphere AS a

2. The page is throwing an error.  Change the validation code to this

<cfif NOT IsDefined("url.eventDate") OR NOT IsDate(url.eventDate)>
       <cfset url.eventDate = dateFormat(now(), "mm/dd/yyyy")>
</cfif>

3. Make sure the parameter names match.  If you're using "url.eventDate" in the CF code the javascript needs to use that same variable name.  ie

   window.location = "testEvents.cfm?eventDate=" + y + "/" + (m+1) + "/" + d;
   ..
   http://www.barreport.com/html2/testEvents.cfm?eventDate=11/30/2007
0
 

Author Closing Comment

by:meechp123
ID: 31409800
Thank you so very much for all your help!
0
 

Author Comment

by:meechp123
ID: 20361202
Final code (for anyone to use)

<!--- use the current date if nothing was selected, or the value is invalid --->
<cfif NOT IsDefined("url.eventDate") OR NOT IsDate(url.eventDate)>
       <cfset url.eventDate = dateFormat(now(), "mm/dd/yyyy")>
</cfif>

   <!--- default to current date if nothing was selected --->
<!---<cfparam name="url.selDate" default="#DateFormat(now(), 'mm-dd-yyyy')#">--->
   <cfquery name="getEventsCalendar" datasource="DSN">
   
SELECT  
   eventID,
   eventName,
   eventTimeTo,
   eventTimeFrom,
   eventDate,
   eventShortDescription,
   eventImage
FROM   BREvents
WHERE eventDate = <cfqueryparam value="#url.eventDate#" cfsqltype="cf_sql_date">
ORDER BY EventID
   </cfquery>



<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>BarReport.com events for <cfoutput>#url.eventDate#:</cfoutput></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>

<body>
   <p>Show events for <cfoutput>#url.eventDate#:</cfoutput><br>
  <cfoutput query="getEventsCalendar">
      <p>Event Name: #eventName#<br>
      Details:  #eventShortDescription#</p>
  </cfoutput></p>
 

</body>
</html>
0

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Article by: kevp75
Hey folks, 'bout time for me to come around with a little tip. Thanks to IIS 7.5 Extensions and Microsoft (well... really Windows 8, and IIS 8 I guess...), we can now prime our Application Pools, when IIS starts. Now, though it would be nice t…
This article discusses how to create an extensible mechanism for linked drop downs.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

732 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question