Attach inputs dynamically
</> Source
<!DOCTYPE html>
<html>
<head>
<title>Attach inputs dynamically</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<link rel="stylesheet" type="text/css" href="../../../codebase/fonts/font_roboto/roboto.css"/>
<link rel="stylesheet" type="text/css" href="../../../codebase/dhtmlx.css"/>
<script src="../../../codebase/dhtmlx.js"></script>
<style>
#calendar,
#calendar2,
#calendar3 {
border: 1px solid #dfdfdf;
font-family: Roboto, Arial, Helvetica;
font-size: 14px;
color: #404040;
}
#att_state,
#att_state2,
#att_state3 {
font-family: Roboto, Arial, Helvetica;
font-size: 14px;
color: #404040;
}
</style>
<script>
var myCalendar;
function doOnLoad() {
myCalendar = new dhtmlXCalendarObject();
myCalendar.setPosition("right");
var k = {"cal_1":"att_state","cal_2":"att_state2","cal_3":"att_state3"};
for (var a in k) doAttach(a,k[a]);
}
var attached = {};
function doAttach(id, sp) {
if (attached[id] != null) return;
attached[id] = myCalendar.attachObj(id);
document.getElementById(sp).innerHTML = "attached";
document.getElementById(sp).style.color = "green";
}
function doDetach(id, sp) {
if (attached[id] == null) return;
myCalendar.detachObj(attached[id]);
attached[id] = null;
document.getElementById(sp).innerHTML = "not attached";
document.getElementById(sp).style.color = "red";
}
</script>
</head>
<body onload="doOnLoad();">
<div style="position:relative;height:350px;">
<table>
<tr>
<td>
<input type="button" value="attach" onclick="doAttach('cal_1','att_state');">
<input type="button" value="detach" onclick="doDetach('cal_1','att_state');">
</td>
<td width="100"><span id="att_state"></span></td>
<td><input type="text" id="cal_1"></td>
</tr>
<tr>
<td>
<input type="button" value="attach" onclick="doAttach('cal_2','att_state2');">
<input type="button" value="detach" onclick="doDetach('cal_2','att_state2');">
</td>
<td><span id="att_state2"></span></td>
<td><input type="text" id="cal_2"></td>
</tr>
<tr>
<td>
<input type="button" value="attach" onclick="doAttach('cal_3','att_state3');">
<input type="button" value="detach" onclick="doDetach('cal_3','att_state3');">
</td>
<td><span id="att_state3"></span></td>
<td><input type="text" id="cal_3"></td>
</tr>
</table>
</div>
</body>
</html>Documentation
Check documentation to learn how to use the components and easily implement them in your applications.