Ray, huge fan, long time...I have a ? for you. I am diving into CFCALENDAR and want to know how to use the SelectedDate attribute to query and display results from a DB. Right now i have a very simple calendar setup with a cfinput to BIND to cal.SelectedDate. Upon clicking on new dates, the bind works and displays the correct date. How can i use this information to populate a query and/or display data relevant to the date chosen?
Interestingly enough - I was never able to get a bind to work correctly with the cfcalendar tag. I did get onChange to work. You can use onChange with cfcalendar to fire ActionScript code when a user selects a date. Since ActionScript can call JavaScript, that is the route I took. I blogged about this last year, and for this blog entry I'm going to use some of the code Todd Sharp suggested in the comments.
Here is the calendar code I used:
2 <cfcalendar name="cal" onChange="if(cal.selectedDate) getURL('javascript:loadit(\''+cal.selectedDate.getFullYear()+'\',\''+cal.selectedDate.getMonth()+'\',\''+cal.selectedDate.getDate()+'\')')">
3 </cfform>
Note the onChange. It's way complex, but mainly because of all the single quotes. Basically though it says - if a date is selected (onChange fires when you deselect as well), then call a JavaScript function, loadit, and pass in the year, month, and and date. If you just use selectedDate you get an uglier date string. This is easier to work with. My loadit function looks like so:
2 function loadit(y,m,d) {
3 ColdFusion.navigate('showdata.cfm?year='+y+'&m='+m+'&d='+d,'dataarea');
4 }
5 </script>
This uses the ColdFusion.navigate function to tell showdata.cfm to load with the right values. The dataarea area is defined like so:
All showdate.cfm would then is run a SQL command (hopefully via a CFC) to load records based on the URL parameters you send in.
Don't forget to validate the URL parameters. Don't assume it's a valid date. You probably also want to add some 'common sense' validation and prevent dates that are outside the range of your data. If you are doing a movie site, it makes no sense to use dates in the 1800s, or dates in the 23rd century.
Comment 1 written by Raymond Camden on 23 June 2008, at 9:19 AM
Sorry all for the waste of space. :)
Comment 2 written by todd sharp on 23 June 2008, at 9:29 AM
Comment 3 written by Joerg Zimmer on 23 June 2008, at 10:15 AM
just did something similar... I also tried cfcalendar first, but as the flash stuff slowed the hole process down, I used Spry together with jscalender... This is pretty cool!
Joerg
Comment 4 written by Scott Stroz on 23 June 2008, at 11:09 AM
BTW - how do you know this? ;)
Comment 5 written by Raymond Camden on 23 June 2008, at 11:14 AM
Comment 6 written by Michael on 23 June 2008, at 1:40 PM
Comment 7 written by Michael on 23 June 2008, at 3:36 PM
My research tells me its not possible but is there a way to have multiple startdates/endates and have dates where no events exists to be disabled and those with events to have a normal enabled status? I hope im being clear...;)
Comment 8 written by Andy Sandefer on 15 October 2008, at 8:18 AM
This was helpful but do you any of you know how to trigger this to fire after the cfcalendar initially loads? The onChange is working fine but I have to click on a date to make this work and I wish I could make the cfgrid initially load based on the default date in the cfcalendar.
Comment 9 written by Raymond Camden on 15 October 2008, at 8:22 AM
Comment 10 written by Andy Sandefer on 15 October 2008, at 8:44 AM
If anyone else needs to do this then you can simply make a javascript function like this...
initPage = function() {
var todaysDate = new Date();
var year = todaysDate.getFullYear();
var month = todaysDate.getMonth();
var date = todaysDate.getDate();
loadReminderGrid(year, month, date);
}
and then call it using AjaxOnLoad...
<cfset AjaxOnLoad("initPage")>
Comment 11 written by Chris Luksha on 5 February 2009, at 11:12 AM
I started with
<cfif isDefined('URL.date')>
<cfset FORM.activityDate = URL.date>
<cfelse>
<cfparam name="FORM.activityDate" default="#dateformat(now(),'mm/dd/yyyy')#">
</cfif>
Then I added your js in the head (a little manipulated)
<cfoutput>
function loadit(y,m,d) {
var datefield = m+'/'+d+'/'+y;
alert(m+'/'+d+'/'+y);//Just for testing before the page is submitted window.location.href='#request.ThisPage#?date='+escape(datefield);
}</cfoutput>
Then I called the calendar like this...
<cfcalendar name="cal" selecteddate="#FORM.activityDate#" onChange="if(cal.selectedDate) getURL('javascript:loadit(\''+cal.selectedDate.getFullYear()+'\',\''+cal.selectedDate.getMonth()+'\',\''+cal.selectedDate.getDate()+'\')')"></cfform>
This worked great when I loaded the page and then changed the date - the form submitted and hte page reloaded and the calendar had the appropriate date selected. But then if I clicked on the calendar a second time - the alert popped up telling me that the date I was submitting was 0/14/2009 and when the form submitted the cfcalendar threw me the error "0/14/2009 is an invalid date or time string"
So - my question is can you see anything that I did that may have changed dates stored in the calendar? Or is this some kind of fluke in the cfcalendar tag when you set it based on an escaped url date?
Thanks,
Chris
Comment 12 written by Andy Sandefer on 5 February 2009, at 11:15 AM
The months start at 0. Add 1 to them.
Comment 13 written by Chris Luksha on 5 February 2009, at 11:22 AM
So when I first load the page - the calendar says Feb 5, 2009, but when I click on a date I noticed (and missed completely before) that the date it was returning was Jan 9, 2009 (I clicked on the 9th of course) so that click worked but I was then in a January calendar.
Then when I click on another date - say Jan 14 - I am returned 0/14/09 Or (Jan[1] - 1) / 14/09
Really odd behavior.
I'm stumped.
Comment 14 written by Chris Luksha on 5 February 2009, at 11:24 AM
thanks
Chris
Comment 15 written by Chris Luksha on 5 February 2009, at 11:42 AM
Why - if I load the page via activityForm.cfm?date=12/09/1970 - why does the calendar say it is december - but clicking on a date in December - returns that date in November.
It shouldn't do that. I tried uploading the file to my server for all to see - but it would seem that for some reason cfcalendar is not functioning on my nice pretty little cf8 shared hosting box :(
Comment 16 written by Chris Luksha on 5 February 2009, at 1:08 PM
Oh well off the soap box - I get it. Now I just have to get my host to actually support it in some way. They say that they do but that flash elements are inherently quirky in cf8 - that part I'm not so sure I'm down with. Anyone know why cfcalendar wouldn't work on my live cf8 server and it would on my local cf8 server? The developer edition got some extra cheerios in the box that the production version ain't got? Maybe some help I could point my isp to? I haven't found anything stating as much.
Comment 17 written by Jc on 5 February 2009, at 3:19 PM
Comment 18 written by Chris Luksha on 5 February 2009, at 4:10 PM
"This is a flash based component. And unfortunately, the ColdFusion flash based components are not terribly stable in ColdFusion 8. I sure do wish I had a better answer for you. We have actually spent a significant amount of time trying to stabilize flash based components on ColdFusion 8 without any success...."
They are looking into it more which I am grateful of - but for now I don't have a live example b/c I can't get it to work on any of my sites on their servers. I have tried 6 sites with no joy.
In the end I had to do a little jQuerying and get teh calendar running using http://keith-wood.name/datepick.html
I hope this helps some
Chris
Comment 19 written by Jc on 6 February 2009, at 12:38 PM
[Add Comment] [Subscribe to Comments]