:: 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 ::

User Manual
Samples

Introduction

Generation from the DB

On-line Builder

CODETHATCALENDAR USER GUIDE

The following "8 steps" instruction will guide you step by step through the CodeThatCalendar configuration process.

Download package with CodeThatCalendar script and unarchive it.

Please bear in mind that CodeThat scripts come in two editions STANDARD and PRO. Editions differ by the features set and license type.

Standard version is given for free and comes with the inscription representing our company's name. Upon registration you will get rid of that text.

Read Standard vs PRO to know the differences between CodeThatCalendar Standard and PRO.

Create the basic HTML file.

Your file may look as following:

<HTML>
<HEAD>
<link href="common.css" rel="stylesheet" type="text/css">
<script language="javascript1.2" src="../Scripts/codethatcalendarstd.js"></script>
</HEAD>
<BODY>
<p>&nbsp;HELLO WORD!
</BODY>
</HTML>

Now lets create your first CodeThatCalendar.

For this purpose you can both create separate config *.js file or write the config construction right to your *.html file. Here we will view second variant.

To describe new calendar create an object with following structure:

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
};

Now we describe all calendar's properties:

var caldef1 =
{
	firstday : 0,
	dtype : 'MM/dd/yyyy HH:mm:ss',
	width : 250,
	windoww : 300,
	windowh : 200,
	border_width : 0,
	border_color : '#0000d3',
	dn_css : 'clsDayName',
	cd_css : 'clsCurrentDay',
	wd_css : 'clsWorkDay',
	we_css : 'clsWeekEnd',
	wdom_css : 'clsWorkDayOtherMonth',
	weom_css : 'clsWeekEndOtherMonth',
	headerstyle :
	{
		type : "buttons",
		imgnextm : 'img/forward.jpg',
		imgprevm : 'img/back.jpg',
		css : 'clsDayName'
	},
	showtime : true,
	monthnames : ["January", "February", "March", "April", "May", "June",
		"July", "August", "September", "October", "November", "December"],
	daynames : ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"]
};

Hint - if parameters description isn't clearly understanding please have a look to CodeThatCalendar User Manual

If you'd like to add time control, use code like the following:

dtype : 'MM/dd/yyyy HH:mm:ss',
showtime : true

So... A complete code for this example you can see here:

<html>
<head>
<META http-equiv="Content-Type" content="text/html; charset=windows-1251">
<script language="javascript" src="../Scripts/codethatcalendarpro.js"></script>
<script language="javascript1.2">
<!--

var caldef1 = {
	firstday : 1,
	dtype : 'MM/dd/yyyy HH:mm:ss',
	width : 220,
	windoww : 240,
	windowh : 200,
	border_width : 0,
	border_color : '#efefef',
	dn_css : 'clsDayName',
	cd_css : 'clsCurrentDay',
	tw_css : 'clsCurrentWeek', // CSS for current week
	wd_css : 'clsWorkDay',
	we_css : 'clsWeekEnd',
	wdom_css : 'clsWorkDayOtherMonth',
	weom_css : 'clsWeekEndOtherMonth',
	wdomcw_css : 'clsWorkDayOthMonthCurWeek',
	weomcw_css : 'clsWeekEndOthMonthCurWeek',
	wecd_css : 'clsWeekEndCurDay',
	wecw_css : 'clsWeekEndCurWeek',
	highlight_css : 'clsHighLight',
	preview_css : 'clsPreview',
	time_css : 'clsTime',
	headerstyle : {
		type : "buttons",
		imgnextm : 'forward.jpg',
		imgprevm : 'back.jpg',
		imgnexty : 'forward.jpg',
		imgprevy : 'back.jpg',
		css : 'clsDayName'
	},
	showtime : true,
	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"]
	template_path : '',
	img_path : 'img/'
}; 

//-->
</script>
</head>

<body>	
<script language="javascript1.2">
<!--

var c3 = new CodeThatCalendar(caldef1); 

//-->
</script>
<form>
	<input name="id3" type="textarea"/>
	<input type="button" onClick="c3.popup('id3');" value="..."/>
</form>
</body>
</html>

If you prefer to keep the calendar at the separate file you should paste menu definition to *.js file. Your *.html file will look like the:

<html>
<head>
	<META http-equiv="Content-Type" content="text/html; charset=windows-1251">
	<script language="javascript" src="../Scripts/codethatcalendarpro.js"></script>
	<script language="javascript" src="my_calendar.js"></script>
</head>
	
<body>	
<script language="javascript1.2">
<!--

var c3 = new CodeThatCalendar(caldef1); 

//-->
</script>
<form>
	<input name="id3" type="textarea"/>
	<input type="button" onClick="c3.popup('id3');" value="..."/>
</form>
</body>
</html>

Hint - for using CodeThat Scripts you aren't limited only by html files. For example, you can build it in the *.php files. We've made it at this site :)

Congratulations! You have just created your first CodeThatCalendar enhanced web page.

See an example and complete code here - Date and Time Example [popup]