Initialization samples
- Common initialization (as an individual object)
- Calendar as date input field
  - As individual control
  - As form's control

Initialization samples

Common initialization (as an individual object)

<!DOCTYPE HTML> 
<head>
	<link rel="stylesheet" type="text/css" href="../calendar/codebase/dhtmlxcalendar.css"></link>
	<link rel="stylesheet" type="text/css" href="../calendar/codebase/skins/dhtmlxcalendar_dhx_skyblue.css"></link>
	<script src="../calendar/codebase/dhtmlxcalendar.js"></script>
	<script>
		var myCalendar;
		function doOnLoad() {
			myCalendar = new dhtmlXCalendarObject("calendarHere");
			myCalendar.show();
		}
	</script>
</head>
<body onload="doOnLoad();">
	<div id="calendarHere" style="position:relative;"></div>
</body>
</html>

Calendar as date input field

As individual control

<!DOCTYPE HTML> 
<head>
	<link rel="stylesheet" type="text/css" href="../calendar/codebase/dhtmlxcalendar.css"></link>
	<link rel="stylesheet" type="text/css" href="../calendar/codebase/skins/dhtmlxcalendar_dhx_skyblue.css"></link>
	<script src="../calendar/codebase/dhtmlxcalendar.js"></script>
	<script>
		function doOnLoad() {
			var t = new dhtmlXCalendarObject(["calendar","calendar2","calendar3"]);
		}
	</script>
</head>
<body onload="doOnLoad();">
	<input type="text" id="calendar">
	<input type="text" id="calendar2">
	<input type="text" id="calendar3">
</body>
</html>

As form's control

<!DOCTYPE HTML> 
<head>
	<link rel="stylesheet" type="text/css" href="../calendar/codebase/dhtmlxcalendar.css"></link>
	<link rel="stylesheet" type="text/css" href="../calendar/codebase/skins/dhtmlxcalendar_dhx_skyblue.css"></link>
	<script src="../calendar/codebase/dhtmlxcalendar.js"></script>
 
	<link rel="STYLESHEET" type="text/css" href="../codebase/dhtmlxform_dhx_skyblue.css">
	<script  src="../codebase/dhtmlxform.js"></script>
	<script src="..codebase/ext/dhtmlxform_item_calendar.js"></script>
 
 
	<script src="../codebase/dhtmlxcontainer.js"></script>
	<script  src="../codebase/dhtmlxcommon.js"></script>
 
	<script>
		var myForm, formData;
		function doOnLoad() {
			formData = [
				{type: "calendar", dateFormat: "%Y-%m-%d %H:%i", value: "2011-06-13 11:35", name: "start_date", },
				{type: "calendar", name: "end_date", label: "End Date", value: "2011-02-10", dateFormat: "%Y-%m-%d", calendarPosition: "right"}
			];
			myForm = new dhtmlXForm("box", formData);
 
		}
	</script>
</head>
<body onload="doOnLoad();">
	<div id="box"></div>
</body>
</html>