« How do you get Google Analytics to track AJAX requests? | Main | Passing emails to ColdFusion through PHP »

A CFCALENDAR replacement to let you select months or weeks

Posted by Tom Mollerus on July 16, 2007 8:59 AM | |

The Flash calendar that the CFCALENDAR tag generates is pretty handy. It looks sharp and can be sized to whatever dimensions you need, but in my opinion it has one major feature omitted: it can't be configured to let the user select a whole week or month at a time. I know plenty of applications where you'd want to be able to select a date range with just one click of the mouse, as you can do in the calendar for Google Analytics.

So to that end, I'm contributing the following calendar CFC to the developer community. It looks and acts like the Flash-based CFCALENDAR, but it will let you select a week or month as well as a single day.

Here's an example of the calendar in action. Hover your mouse across the dates, or over the "W"s to the left or the month name at top to see which dates you can select. Click on any of the same to select a date or date range. (Sorry, you can't change the month because the AJAX call is disabled.)

< July 2007 >
S M T W T F S
W 1 2 3 4 5 6 7
W 8 9 10 11 12 13 14
W 15 16 17 18 19 20 21
W 22 23 24 25 26 27 28
W 29 30 31 1 2 3 4

Start date: End date:

This CFC requires ColdFusion 8 (for plain CFC return format and for implicit struct creation). The calendar is called in one line and returns the code for the styles, the scripting, and the HTML table. You can also pass in a JavaScript action to call when a date selection is made. You call it like so (replace the variable names in brackets with your own appropriate values):

<cfoutput>#CreateObject('component', 'calendar').display(name='date', year=[FORM.year], month=[FORM.month], day=[FORM.day])#</cfoutput>

To get the code, please visit the calendar's project page. And hey, if anyone with good JavaScript knowledge can suggest a way to allow for multiple individual days (i.e., July 7 and July 12 and July 5) to be selected and passed to the form, please let me know.

Comments (3)

Steve
July 17, 2007
3:32PM | #

Tom, there is a DOM object called event that has (amongst a ton of other useful features) some built in keyboard handlers that might be useful for this. Namely, ctrlKey, shiftKey, and altKey

You can pass in the event object with any old javascript function, and reference the handler as such:

<script type="text/javascript">


function example(sometext,event){

  if (event.ctrlKey == 1) {

    alert(sometext + ' ctrl');

  } else {

    alert(sometext + ' nothing');

  }

}

</script>



<table><tr><td onmousedown="example('you pressed',event)">31</td></tr></table>

That should give you some idea of how to implement it within the cfc.

Good luck!

Tom Mollerus
July 17, 2007
4:02PM | #

@Steve: Thanks for the great suggestion. I'll put that into the code to allow multiple individual days to be selected.

Jonny Shaw
August 18, 2008
12:44PM | #

wow great work mate. this is just what i have been thinking about doing. now i don't have to i can just work on your script for my holiday home booking script were you are only allowed to book in weeks. ill be sure to add a link back to you when i write about it in my blog.

Post a comment