Popup calendar
<html>
<head>
<title>Popup Calendar Demo</title>
<style>
</style>
<script language="Javascript">
// {{{ docs <-- this is a VIM (text editor) text fold
/**
* Popup Calendar {VERSION}
*
* Summary: Popup Calendar is a date selector script that can be associated with
* an image next to a text form element that requires a date. The calendar
* pops up, at which point a date can be selected, and it will close the
* calendar and pass the date down to the input field. It has customizable
* colors and full year/month navigation. It works on all browsers (Konqueror,
* IE, Netscape 4, Mozilla, Opera) and makes choosing dates in forms much more
* pleasant.
*
* Maintainer: Dan Allen <dan@mojavelinux.com>
*
* License: LGPL - however, if you use this library, please post to my forum where you
* use it so that I get a chance to see my baby in action. If you are doing
* this for commercial work perhaps you could send me a few Starbucks Coffee
* gift dollars to encourage future developement (NOT REQUIRED). E-mail me
* for and address.
*
* Homepage: http://www.mojavelinux.com/forum/viewtopic.php?t=6
*
* Freshmeat Project: http://freshmeat.net/projects/popupcalendar/?topic_id=92
*
* Updated: {UPDATED}
*
* Supported Browsers: Mozilla (Gecko), IE 5+, Konqueror, Opera 7, Netscape 4
*
* Usage:
* Bascially, you need to pay attention to the paths and make sure
* that the function getCalendar is looking in the right place for calendar.html,
* which is the parent frame of calendar_body.html.
*
* The colors are configured as an associative array in the parent window. I
* haven't had a chance to document this yet, but you should be able to see what I
* am going for in the calendar.js file. All you have to do when calling
* getCalendar is specify the full object to that form element, such as
*
* return getCalendar(document.formName.elementName);
*
* You will need to put killCalendar() in the body to make it go away if it is still open
* when the page changes.
**/
// }}}
// {{{ settings (Editable)
var calendarWindow = null;
var calendarColors = new Array();
calendarColors['bgColor'] = '#BDC5D0';
calendarColors['borderColor'] = '#333366';
calendarColors['headerBgColor'] = '#143464';
calendarColors['headerColor'] = '#FFFFFF';
calendarColors['dateBgColor'] = '#8493A8';
calendarColors['dateColor'] = '#004080';
calendarColors['dateHoverBgColor'] = '#FFFFFF';
calendarColors['dateHoverColor'] = '#8493A8';
var calendarMonths = new Array('January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December');
var calendarWeekdays = new Array('S', 'M', 'T', 'W', 'T', 'F', 'S', 'S');
var calendarUseToday = true;
var calendarFormat = 'y/m/d';
var calendarStartMonday = true;
var calendarScreenX = 100; // either 'auto' or numeric
var calendarScreenY = 100; // either 'auto' or numeric
// }}}
// {{{ getCalendar()
function getCalendar(in_dateField)
{
if (calendarWindow && !calendarWindow.closed) {
alert('Calendar window already open. Attempting focus...');
try {
calendarWindow.focus();
}
catch(e) {}
return false;
}
var cal_width = 415;
var cal_height = 310;
// IE needs less space to make this thing
if ((document.all) && (navigator.userAgent.indexOf("Konqueror") == -1)) {
cal_width = 410;
}
calendarTarget = in_dateField;
calendarWindow = window.open('calendar.html', 'dateSelectorPopup','toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=no,resizable=0,dependent=no,width='+cal_width+',height='+cal_height + (calendarScreenX != 'auto' ? ',screenX=' + calendarScreenX : '') + (calendarScreenY != 'auto' ? ',screenY=' + calendarScreenY : ''));
return false;
}
// }}}
// {{{ killCalendar()
function killCalendar()
{
if (calendarWindow && !calendarWindow.closed) {
calendarWindow.close();
}
}
// }}}
</script>
</head>
<body>
<form name="foo">
<input type="text" name="bar" /><a href="#" onclick="return getCalendar(document.foo.bar);"><img src="calendar.png" border="0" /></a>
</form>
</body>
</html>
popupcalendar-2.0.6.zip( 23 k)Related examples in the same category