:: JavaScript calendar implemented in order to provide users with an easy yet visual way to select date and/or time in web forms and applications ::

var caldef1 =
{
	firstday :, // First day of the week: 0 means Sunday, 1 means Monday, etc.
	dtype : ' ', // Output date format MM-month, dd-date, yyyy-year, HH-hours,
	             // mm-minutes, ss-seconds
	width :, // Width of the calendar table
	windoww :, // Width of the calendar window
	windowh :, // Height of the calendar window
	border_width :, // Border of the table
	border_color : ' ', // Color of the border
	multi : boolean, // Enables multiple dates selecting
	spr :, // Multiple dates separator
	dn_css : ' ', // CSS for week day names
	cd_css : ' ', // CSS for current day
	tw_css : ' ', // CSS for current week
	wd_css : ' ', // CSS for work days (this month)
	we_css : ' ', // CSS for weekend days (this month)
	wdom_css : ' ', // CSS for work days (other month)
	weom_css : ' ', // CSS for weekend days (other month)
	wdomcw_css : ' ', // CSS for work days (other month, current week)
	weomcw_css : ' ', // CSS for weekend days (other month, current week)
	wecd_css : ' ', // CSS for weekend days (current day)
	wecw_css : ' ', // CSS for weekend days (current week)
	highlight_css : ' ' // CSS for high light dates
	preview_css : ' ' // CSS for preview_area
	time_css : ' ' // CSS for time area
	imgapply : ' ', // Image for apply button
	headerstyle :
	{
		type : ' ', // Type of the header may be: 'buttons' or 'comboboxes'
		css : ' ', // CSS for header
		imgnextm : ' ', // Image for next month button
		imgprevm : ' ', // Image for previous month button
		imgnexty : ' ', // Image for next year button
		imgprevy : ' ' // Image for previous year button
	},
	// Array with month names
	monthnames : ["January", "February", "March", "April", "May", "June", "July",
		"August", "September", "October", "November", "December"],
	// Array with week day names
	daynames : ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"],
	// Array with comments
	txt : ["Previous year", "Previous month", "Next month", "Next year", "Apply"],
	preview : boolean //indicates is preview area shows
};

To Create and Run CodeThatCalendar Use Structure Like This:

<script language="javascript" src="../Scripts/codethatcalendar.js"></script>
<script language="javascript1.2">
<!--
var caldef1 =
{
	firstday : 0,
	dtype : 'MM/dd/yyyy',
	width : 275,
	windoww : 300,
	windowh : 200,
	border_width : 0,
	border_color : 'White',
	multi : true,
	spr : '\r\n',
	dn_css : 'clsDayName',
	cd_css : 'clsCurrentDay',
	tw_css : 'clsCurrentWeek',
	wd_css : 'clsWorkDay',
	we_css : 'clsWeekEnd',
	wdom_css : 'clsWorkDayOtherMonth',
	weom_css : 'clsWeekEndOtherMonth',
	wdomcw_css : 'clsWorkDayOthMonthCurWeek',
	weomcw_css : 'clsWeekEndOthMonthCurWeek',
	wecd_css : 'clsWeekEndCurDay',
	wecw_css : 'clsWeekEndCurWeek',
	preview_css : 'clsPreview',
	highlight_css : 'clsHighLight',
	headerstyle :
	{
		type : 'buttons',
		css : 'clsDayName',
		imgnextm : 'img/forward.jpg',
		imgprevm : 'img/back.jpg',
		imgnexty : 'img/forward.jpg',
		imgprevy : 'img/back.jpg'
	},
	imgapply : 'img/apply.gif',
	preview : true,
	monthnames : ['January', 'February', 'March', 'April', 'May', 'June', 'July',
		'August', 'September', 'October', 'November', 'December'],
	daynames : ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
	txt : ['Previous year', 'Previous month', 'Next month', 'Next year', 'Apply']
};
var c1 = new CodeThatCalendar(caldef1); 
//-->
</script>
<body>	
	<P>Month+year scrollers</P>
	<form>
		<input name="id1" type="textarea"/>
		<input type="button" onClick="c1.popup('id1');" value="..."/>
	</form>
</body>

CodeThatCalendar Examples

You can create calendar with scroll buttons for years and monthes.

See an example and complete code here - Month+Year scrollers example

You can create calendar with comboboxes for years and monthes.

See an example and complete code here - Month+Year comboboxes example

You can create combined calendar with date and time controls.

See an example and complete code here - Date and time example

CodeThatCalendar has Russian and German localization.

See an example and complete code here - Localization example

You can built CodeThatCalendar in your page like static object.

See an example and complete code here - Inline Calendar example

CodeThatCalendar at the Separate Frame

Firstly you should define calendar by ordinary (see examples and code above on this page). Then build calendar in the frame by using code like this:

<body>
  <P>Month+year scrollers</P>
  <form>
    <input name="id1" type="textarea"/>
    <input type="button" onClick="c1.innerpopup('id1','calendar_frame');" value="..."/>
  </form>

<script language="javascript1.2">
<!--
// Create iframe
if (ua.oldOpera)document.write("<div id=\"calendar_div\">");
document.write("<iframe id=\"calendar_frame\" name=\"calendar_frame\"");
document.write(" frameborder=\"0\"");
document.write(" scrolling=\"no\"");
document.write(" style=\"visibility:hidden;\"");
if (ua.oldOpera)
document.write(" src=\"codethatcalendar.html\">");
document.write("</iframe>");
if (ua.oldOpera)document.write("</div>"); 
//-->
</script>
</body>

CodeThatCalendar in the Frame Example

See an example here - CodeThatCalendar in the frame example

CodeThatCalendar Opacity

Inline and Iframe calendars can be transparent. If you don't use parameter 'opacity' you'll get common opaque calendar. Also you can set a position for these calendar types.

To set opasity and position for iframe calendar you can use a structure like this:

document.write("style=\"filter:Alpha(Opacity=60);
position:absolute; left:30; top:400;\"");

To set opasity and position for inline calendar you can use a structure like this:

var caldef1 = {
	opacity : 75,
	position : {
		"absolute" : true, "x" : 100, "y" : 0
	}
	...

To call inline calendar now you should use

inline_create(document, "id")

instead of

create(document, "id")

CodeThatCalendar Opacity And Position Example

See an example and complete code here - CodeThatCalendar opacity and position example

CodeThatCalendar Path

Generally you need the following files for CodeThatCalendar work:

codethatcalendarstd.js

codethatcalendar.html

.css file

image files

You place a link to codethatcalendarpro.js at

<script language="javascript" src="../Scripts/codethatcalendarpro.js"></script>

Path to the image files you place at the calendar config.

But these files - codethatcalendar.html, .css-file - should be placed to the current calendar folder.

In case you have several sections at you web site (each of them uses CodeThatCalendar) which are placed at the different folders you should use constant to specify a one path for all calendar copies:

...
template_path : 'calendar/',
img_path : 'img/'

template_path - for codethatcalendar.html, codethatcalendarpro.js, css-style file

img_path - for image files.

CodeThatCalendar Keyboard Navigation

CodeThatCalendar supports keyboard now.

Use arrow keys to choose day.

Hold Ctrl or Shift or Alt and use up or down arrow keys to switch between years

Hold Ctrl or Shift or Alt and use left or right arrow keys to switch between months

Press Space to go to the current date

Press Enter to choose date in calendar or Ctrl or Shift or Alt + Enter when you use multiple mode.

Example - Using keyboard

You can see an example and complete code here - Using keyboard Example [popup]

Note. This feature wouldn't work in Opera and in inline variant of CodeThatCalendar

Multiple Mode

You can choose several dates from calendar and keep them in one form field at one time.

For use this feature you should enable multiple mode and set separator for dates that will use in form field as in example you see below.

var calendarDef = {
	...
	multi : true, //enable multiple mode
	spr : '\r\n', //set separator for dates in form field, by default carret return
	...
};

Example - Multiple mode

You can see an example and complete code here - Multiple mode Example [popup]

Advanced Status Bar

Now when you put your mouse over any element of calendar you will see hint for it. Except that you can put user messages in status bar with help method setStatus(s) of calendar, s is message string.

var c1 = new CodeThatCalendar(caldef1);
c1.create(document, "id1");
c1.setStatus("Choose date from calendar!");