CodeThatCalendar User Manual 

 123GUIDE (get started)

You can read a breaf tutorial here.

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.

 CodeThatCalendar MAIN FEATURES

With CodeThatCalendar you can:

  • define first day of the week
  • define output date format
  • define calendar size
  • define calendar borders
  • customize calendar's elements style by using CSS
  • images in calendar buttons are supported
  • customize calendar's header style: 'buttons' or 'comboboxes'
  • show calendar at the separate frame

 CodeThatCalendar properties are described below: 


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
	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)	
	highlight_css: ' '   // CSS for high light dates
	preview_css: ' '     // CSS for preview_area
	time_css:' '	     // CSS for time area

	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"],
	
	create_preview: boolean //indicates is preview area shows
};

 To create and run CodeThatCalendar use structure like this: 

<script language="javascript" src="codethatcalendar.js"></script>
<script language="javascript">
var caldef1 = {
		firstday:0,     
		dtype:'MM/dd/yyyy',
		width:250,      
		windoww:300,    
		windowh:170,    
		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',         
			css:'clsDayName',       
			imgnextm:'img/next.gif',
			imgprevm:'img/prev.gif',
			imgnexty:'img/next_year.gif',
			imgprevy:'img/prev_year.gif' 
		},

		monthnames :["January", "February", "March", "April", 
			     "May", "June", "July", "August", "September", 
			     "October", "November", "December"],

		daynames : ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"]

			
		};

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

CodeThatCalendar comes 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.

  CodeThatCalendar Standard vs CodeThatCalendar Pro

Features supported by CodeThatCalendar Pro only:

  • Ability to configure the Calendar through the CSS styles.
  • Inline calendar (layers based) support.

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