>arg¡eBarg!e: cfCalendar a fast date finder for ColdFusion

cfCalendar

a fast date finder for ColdFusion

Javascript
ColdFusion
CSS
CustomTag
CGI

// functions for page calling calendar
function main()
{
	$('.link_cal').click( 
		function (e) 
		{
			e.preventDefault();
			e.stopPropagation();

			var fieldId = $(this).attr('id').replace('link_cal_','');
			var field = $('#'+fieldId);
			var calPos = $(this).position();

			var calendar = $('#calendarFrame');
			calendar.attr( 'src', 'Calendar.cfm?field=' + fieldId + '&date=' + field.val() );
			
			calendar.css('left', calPos.left + $(this).width() + 10 );
			calendar.css('top',  calPos.top );
			
			dspCalendar(true);
		}
	);
}


function dspCalendar(bln) 
{
	$('#calendarFrame').css( 'visibility', ( (bln) ? 'visible' : 'hidden' ) );
}

var targetField = 'date_field';

// functions for pop-up calendar
function calendar(tf)
{
	if (tf)
	{
		targetField = tf;
	}
	
	$('.navCell,.goCell,.titleCell,.dateCell').hover( 
		function(){
			$(this).addClass('hover');
		},
		function(){
			$(this).removeClass('hover');
		} 
	);
	
	$('.navCell,.goCell,.titleCell').click( 
		function(){
			window.location.href = CGI.script() + '?field=' + targetField + '&date=' + $(this).attr('id').replace('date_','');
		}
	);
	
	$('.dateCell').click( 
		function(){
			//parent.$(targetField).val( $(this).attr('id').replace('date_','') ); 
			parent.document.getElementById(targetField).value = $(this).attr('id').replace('date_',''); 
			parent.dspCalendar(false);
		} 
	);
}

<cfsilent><cfsetting showdebugoutput="No">
<cfscript>
	if ( IsDefined("url.date") AND Compare(url.date,"") AND IsDate(url.date) )
	{
		request.Date = DateFormat(url.date,"m-d-yyyy");
	}
	param type='string' name='request.Date' default=DateFormat(Now(),"m-d-yyyy");

	if ( IsDefined("url.field") )
	{
		request.Field = url.field;
	}
	param type='string' name='request.Field' default='date_field';
	
	param type='string' name='request.Width' default='18';
</cfscript>
</cfsilent>

<!doctype html>
<html>

<head>
	<meta charset="utf-8" />
	<title>&gt;arg&iexcl;eBarg!e: Pop-up Calendar</title>
	<meta name="description" content="&hellip;a multi-modal fast date selector." />
	<meta name="author" content="Henry Rogers" />
	<meta name="viewport" content="width=device-width, initial-scale=1" />
	<!--[if lt IE 9]>
		<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
	<![endif]-->
	<!-- Adding "maximum-scale=1" fixes the Mobile Safari auto-zoom bug: http://filamentgroup.com/examples/iosScaleBug/ -->
	<link rel="stylesheet" href="Calendar.css" type="text/css">
</head>

<body lang="en" class="calendar">

<cfif IsDate(request.Date)>

	<cfmodule 
		template="multical.cfm" 
		path="."
		date="#request.Date#"
		field="#request.Field#"
		delim="/">

	<!--Thank you jQuery -->
	<script src="http://code.jquery.com/jquery-latest.js"></script>
	<script>!window.jQuery && document.write(unescape('%3Cscript src="/js/libs/jquery-1.5.1.min.js"%3E%3C/script%3E'))</script>
	<script src="/js/CGI.js"></script>
	<script src="Calendar.js"></script>
	<script>
		CGI.init();
		calendar('<cfoutput>#request.Field#</cfoutput>');
		parent.dspCalendar(true);
	</script>
	
<cfelseif IsDefined("url.date") AND Compare(url.date,"")>

	<p style="padding:4px 4px 4px 4px;">Text entered is not a date.<br />
	<a href="#" onclick="parent.calendar.style.visibility='hidden';return false;">Close Window</a></p>
	
</cfif>

</body>

</html>

/*Pop-up Calendar - hhrogersii.com*/
body.calendar { 
	margin: 0; 
	background-color: #FFF; 
	font-family: Verdana, Arial, Helvetica, sans-serif; 
	font-size: 10px; 
}
table#miniCal {
	width: 172px; 
	height: 172px;
	background-color: #FFF; 
}


td {
	vertical-align:middle; 
	padding: 0; 
	cursor: pointer; 
	width:18px; height: 18px;
	color: #000;
	font-weight: bold; 
}
td.hover {
	background-color: #FFC; 
	color: #2F4F88; 
}


td.titleCell { 
	background-color: #8A9DBD; 
	font-size: 11px;
}
td.titleCell.hover { 
	background-color: #6781AB; 
	color: #FFF;
}
td.titleCell img {
	margin-top: 2px;
}


.goCell {
	background-color: #6781AB; 
	color: #FFF; 
}
.goCell.hover {
	background-color: #A6B5CD; 
	color: #000; 
}


.navCell {
	background-color: #A6B5CD; 
	color: #FFF; 
}
.navCellSel {
	background-color: #FFC; 
	color: #2F4F88;
}


tr.week td { 
	background-color: #AAA; 
}
.weekEnd, .noDay { 
	background-color: #EEE; 
	font-weight: normal;
}
.weekDay { 
	background-color: #D0D0D0; 
	font-weight: normal;
}
.toDay {
	background-color: #8A9DBD; 
}
.selDay {
	background-color: #FFC; 
	color: #2F4F88; 
}

<cfif thisTag.ExecutionMode EQ "start">
<cfsilent>
<!--- 
NAME: <CF_MultiCal>
 --->
<cfsetting showdebugoutput="No">
<cfscript>
	param type='string' name='date' default=DateFormat(Now(),'m-d-yyyy'); //default for date being viewed
	param type='string' name='field' default='date'; //default for target form date element name
	param type='string' name='delim' default='/'; //default for target form date element name
	param type='string' name='path' default='img'; //
	
	imgURL = Replace(attributes.path,"/",application.sysBang);
	imgPath = ExpandPath(attributes.path);
	
	vDelim = attributes.delim;
	
	viewDate = ParseDateTime(attributes.date);
	viewMonth = Month(viewDate);
	viewDay = Day(viewDate);
	viewYear = Year(viewDate);
	viewDaysInMonth = DaysInMonth(CreateDate(viewYear,viewMonth,1));
	
	thisDay = 2 - DayOfWeek(CreateDate(viewYear,viewMonth,1));
	
	fmtDate = "m-d-yyyy";
</cfscript>

<cfif DirectoryExists(imgPath)>
	<cfif NOT FileExists("#imgPath#\exit.gif")>
		<cfset imgExit = "R0lGODlhDAAMAKL/ABIUGMDAwHuKpYyevWl3jnuLpSMoLwAAACH5BAEAAAEALAAAAAAMAAwAAAMyGFXRvkEYQ1wgU8hDG+bCZXDE13kjAJDWtR5A1RJvPKfrKZJmtZ0mzUSGMggGmlbkmAAAOwkAOw==">
		<cffile action="WRITE" file="#imgPath#\exit.gif" output="#toBinary(imgExit)#" addnewline="No">
	</cfif>
	<cfif NOT FileExists("#imgPath#\reset.gif")>
		<cfset imgReset = "R0lGODlhDAAMAKL/ABIUGHuKpVhjdsDAwGl3jiMoLwAAAAAAACH5BAEAAAMALAAAAAAMAAwAAAM1OBMEDiSoQYol9S4r5MpMIRTERJFAEZZKUDhsxVLwJCtN6p3Re9sikkvYGqlOlwxpwnhAPAkAOwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACwAAAAADgAOAAAGc0CPULj5fDrD4ePBuHAuFxBBshQ+HBzH8iGpcBgP4SQQAG+vgLCHUGGUz4+LQxiYMN9bh0UI2rrNDwkXfFsRbgtLDYMedQ8QChAMGQZXe2sVA2cHAghyYgEOdlsUDmlWDhoYBUtdX2pLTU9RU1VJHkVHtkEAOw==">
		<cffile action="WRITE" file="#imgPath#\reset.gif" output="#toBinary(imgReset)#" addnewline="No">
	</cfif>
</cfif>

</cfsilent>
<cfoutput>
<table id="miniCal" border="0" cellpadding="0" cellspacing="1">

	<tr align="center">
		<td class="titleCell" id="date_#DateFormat(Now(),fmtDate)#" title="now"><img src="#imgURL#/reset.gif" width="12" height="12" border="0" alt="Now" title="Go to today."></td>
		<td colspan="7" class="titleCell" nowrap>#DateFormat(viewDate,"mmm - yyyy")#</td>
		<td class="titleCell" onclick="parent.dspCalendar(false);" title="exit"><img src="#imgURL#/exit.gif" width="12" height="12" border="0" alt="Exit" title="Close window."></td>
	</tr>
	
	<tr align="center" class="week">
		<td class="goCell" id="date_#DateFormat(DateAdd('m',-1,viewDate),fmtDate)#" title="previous month">&laquo;</td>
		<td>S</td>
		<td>M</td>
		<td>T</td>
		<td>W</td>
		<td>T</td>
		<td>F</td>
		<td>S</td>
		<td class="goCell" id="date_#DateFormat(DateAdd('m',1,viewDate),fmtDate)#" title="next month">&raquo;</td>
	</tr>
	
	<cfloop from="1" to="6" index="iMonth">
	<tr align="center">
		<cfset navClass = "navCell" & RepeatString( 'Sel',(iMonth IS viewMonth)+0)>
		<td class="#navClass#" id="date_#iMonth#-#viewDay#-#viewYear#" title="#MonthAsString(iMonth)#">#Left(MonthAsString(iMonth),1)#</td>
		<cfloop from="1" to="7" index="weekDay">
			<cfif thisDay GT 0 AND thisDay LTE viewDaysInMonth>

				<cfif thisDay EQ viewDay>
					<cfset thisClass = "selDay">
				<cfelseif viewDate EQ Now()>
					<cfset thisClass = "toDay">
				<cfelseif weekDay % 6 IS 1>
					<cfset thisClass = "weekEnd">
				<cfelse>
					<cfset thisClass = "weekDay">
				</cfif>

		<td class="dateCell #thisClass#" id="date_#viewMonth##vDelim##thisDay##vDelim##viewYear#">#thisDay#</td>
			<cfelse>
		<td class="noDay">&nbsp;</td>
			</cfif>
			<cfset thisDay += 1>
		</cfloop>
		<cfset iMonth = 13 - iMonth>
		<cfset navClass = "navCell" & RepeatString( 'Sel',NumberFormat(iMonth IS viewMonth))>
		<td class="#navClass#" id="date_#iMonth#-#viewDay#-#viewYear#" title="#MonthAsString(iMonth)#">#Left(MonthAsString(iMonth),1)#</td>
	</tr>
	</cfloop>
	
	<tr align="center">
	<cfset viewDate = DateAdd('yyyy',-1,viewDate)>
		<td class="goCell"  id="date_#DateFormat(viewDate,fmtDate)#" title="previous year">&laquo;</td>
	<cfset viewDate = DateAdd('yyyy',-2,viewDate)>
		<td class="navCell" id="date_#DateFormat(viewDate,fmtDate)#" title="#Year(viewDate)#">#DateFormat(viewDate,"yy")#</td>
	<cfset viewDate = DateAdd('yyyy',1,viewDate)>
		<td class="navCell" id="date_#DateFormat(viewDate,fmtDate)#" title="#Year(viewDate)#">#DateFormat(viewDate,"yy")#</td>
	<cfset viewDate = DateAdd('yyyy',1,viewDate)>
		<td class="navCell" id="date_#DateFormat(viewDate,fmtDate)#" title="#Year(viewDate)#">#DateFormat(viewDate,"yy")#</td>
	<cfset viewDate = DateAdd('yyyy',1,viewDate)>
		<td class="navCellSel" id="date_#DateFormat(viewDate,"yy")#" title="#Year(viewDate)#">#DateFormat(viewDate,'yy')#</td>
	<cfset viewDate = DateAdd('yyyy',1,viewDate)>
		<td class="navCell" id="date_#DateFormat(viewDate,fmtDate)#" title="#Year(viewDate)#">#DateFormat(viewDate,"yy")#</td>
	<cfset viewDate = DateAdd('yyyy',1,viewDate)>
		<td class="navCell" id="date_#DateFormat(viewDate,fmtDate)#" title="#Year(viewDate)#">#DateFormat(viewDate,"yy")#</td>
	<cfset viewDate = DateAdd('yyyy',1,viewDate)>
		<td class="navCell" id="date_#DateFormat(viewDate,fmtDate)#" title="#Year(viewDate)#">#DateFormat(viewDate,"yy")#</td>
	<cfset viewDate = DateAdd('yyyy',-2,viewDate)>
		<td class="goCell"  id="date_#DateFormat(viewDate,fmtDate)#" title="next year">&raquo;</td>
	</tr>
	
</table>
</cfoutput>
</cfif>

var CGI = function ()
	{
		//private properties and methods
		var _cgi = {};

		function _stripQuery(path)
		{
			return (path.indexOf('?') !== -1) ? path.substring(0, path.indexOf('?')) : path;
		}

		function _stripAnchor(path)
		{
			return (path.indexOf('#') !== -1) ? path.substring(0, path.indexOf('#')) : path;
		}

		function _getFileFromPath(path)
		{
			var strPath = _stripQuery(path),
			strPath = _stripAnchor(strPath),
			aPath = strPath.split('/');
			return aPath[aPath.length - 1];
		}

		function _getDirFromPath(path)
		{
			var strPath = _stripQuery(path);
			strPath = _stripAnchor(strPath);
			var aPath = path.split('/');
			aPath.pop();
			return aPath.join('/');
		}
		//public properties and methods
		return {
			init: function (url)
			{
				var loc = window.location;
				_cgi.http_host = loc.host;
				_cgi.path_info = _stripAnchor(_stripQuery(loc.pathname));
				_cgi.script_name = _getFileFromPath(_cgi.path_info);
				_cgi.query_string = _stripAnchor(loc.search.replace('?', ''));
				_cgi.params = {};
				if (_cgi.query_string !== '')
				{
					var aParams = _cgi.query_string.split('&');
					for (var i = 0, l = aParams.length; i < l; i++)
					{
						var aTuple = aParams[i].split('=');
						_cgi.params[aTuple[0]] = aTuple[1];
					}
				}
				_cgi.root = '/';
				if (url)
				{
					_cgi.appli = url + _cgi.root;
				}
				else
				{
					_cgi.appli = _getDirFromPath(_cgi.path_info) + '/';
				}
			},
			//these are the gets
			root: function ()
			{
				return _cgi.root;
			},
			appli: function ()
			{
				return _cgi.appli;
			},
			host: function ()
			{
				return _cgi.http_host;
			},
			query: function ()
			{
				return _cgi.query_string;
			},
			script: function ()
			{
				return _cgi.script_name;
			},
			param: function (val)
			{
				if (_cgi.params[val] != undefined)
				{
					return _cgi.params[val];
				}
				else
				{
					return null;
				}
			},
			file: function (path)
			{
				return _getFileFromPath(path);
			},
			dir: function (path)
			{
				return _getDirFromPath(path);
			}
		};
	}();