// 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>>arg¡eBarg!e: Pop-up Calendar</title>
<meta name="description" content="…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">«</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">»</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"> </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">«</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">»</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);
}
};
}();