<link rel="stylesheet" type="text/css" href="../../codebase/dhtmlxcalendar.css">
    <link rel="stylesheet" type="text/css" href="../../codebase/skins/dhtmlxcalendar_dhx_skyblue.css">
    <script src="../../codebase/dhtmlxcommon.js"></script>
    <script src="../../codebase/dhtmlxcalendar.js"></script>
    <script src="../../codebase/ext/dhtmlxcalendar_double.js"></script>
    <style>
        #calendar {
            border: 1px solid #909090;
            font-family: Tahoma;
            font-size: 12px;
        }
        #logsHere {
            width: 500px;
            height: 150px;
            overflow: auto;
            border: 1px solid #cecece;
            font-family: Tahoma;
            font-size: 12px;
        }
    </style>
    <script>
var myCalendar;
function doOnLoad() {
    myCalendar = new dhtmlXCalendarObject("calendar");
    myCalendar.attachEvent("onShow", function() {
        writeLog("onShow event called");
    });
    myCalendar.attachEvent("onHide", function() {
        writeLog("onHide event called");
    });
}
var logObj,
logInd = 0;
function writeLog(t) {
    if (!logObj)
        logObj = document.getElementById("logsHere");
    logObj.innerHTML = (++logInd) + ") " + t + "<br>" + logObj.innerHTML;
}</script>
 
 
    <div style="position:relative;height:280px;"><input type="text" id="calendar"></div>
    <div id="logsHere"></div>