<link rel="STYLESHEET" type="text/css" href="../../codebase/dhtmlxcalendar.css">
<script>
window.dhx_globalImgPath = "../../codebase/imgs/";</script>
<script  src="../../codebase/dhtmlxcommon.js"></script>
<script  src="../../codebase/dhtmlxcalendar.js"></script>
<script>
var cal1,
cal2,
mCal,
mDCal,
newStyleSheet;
var dateFrom = null;
var dateTo = null;
window.onload = function() {
    cal1 = new dhtmlxCalendarObject('calendar1');
    cal1.setOnClickHandler(selectDate1);
    cal2 = new dhtmlxCalendarObject('calendar2');
    cal2.setOnClickHandler(selectDate2);
    mCal = new dhtmlxCalendarObject('dhtmlxCalendar', false, {
        isYearEditable: true
    });
    mCal.setYearsRange(2000, 2500);
    mCal.draw();
}
function setFrom() {
    mCal.setSensitive(dateFrom, dateTo);
    return true;
}
function selectDate1(date) {
    document.getElementById('calInput1').value = cal1.getFormatedDate(null, date);
    document.getElementById('calendar1').style.display = 'none';
    dateFrom = new Date(date);
    mCal.setSensitive(dateFrom, dateTo);
    return true;
}
function selectDate2(date) {
    document.getElementById('calInput2').value = cal2.getFormatedDate(null, date);
    document.getElementById('calendar2').style.display = 'none';
    dateTo = new Date(date);
    mCal.setSensitive(dateFrom, dateTo);
    return true;
}
 
function showCalendar(k) {
    document.getElementById('calendar' + k).style.display = 'block';
}</script>
 
 
<form action="">
<table cellpadding="10">
  <tr>
<td valign="top"><div id="dhtmlxCalendar"></div></td>
<td valign="top"><strong>Set Sensitive range:</strong>
    <input type="button" value="set" onClick="setFrom()" />
    </td>
  </tr>
</table>
</form>
<br />
<code>setSensitive(dateFrom, dateTo)</code> allocates a sensitive period in the calendar 
<br />