<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/dhtmlxcalendar.js"></script>
    <style>
        #logsHere {
            width: 500px;
            height: 150px;
            overflow: auto;
            border: 1px solid #cecece;
            font-family: Tahoma;
            font-size: 12px;
        }
 
    </style>
    <script>
var myCalendar;
var logObj;
var logInd = 0;
var logData = [];
function doOnLoad() {
    myCalendar = new dhtmlXCalendarObject("calendarHere");
    myCalendar.show();
    myCalendar.attachEvent("onMouseOver", function(d, ev) {
        logData.push((++logInd) + ") onMouseOver event, date " + myCalendar.getFormatedDate("%d.%m.%Y", d));
        writeLog();
    });
    myCalendar.attachEvent("onMouseOut", function(d, ev) {
        logData.push((++logInd) + ") onMouseOut event, date " + myCalendar.getFormatedDate("%d.%m.%Y", d));
        writeLog();
    });
}
function writeLog() {
    if (!logObj)
        logObj = document.getElementById("logsHere");
    var t = "";
    for (var q = logData.length - 1; q >= Math.max(logData.length - 6, 0); q--)
        t += logData[q] + "<br>";
    logObj.innerHTML = t;
}</script>
 
 
    <div id="calendarHere" style="position:relative;height:250px;"></div>
    <div id="logsHere"></div>