Calendar not close/hide by clicking outside calendar

Suite and Optimus Suite 5
#1

Hi,

I have a button which on-click event generate a calendar. Select a date in the calendar will have the calendar close. I want to make the calendar close/hide if I click outside the calendar.

I tried

mCal = new dhtmlxCalendarObject('calInput1'); 
dhtmlxEvent(document.body,"click",function(){ 
		mCal.hide(); 
});
mCal.show();

bit it does not show the calendar. I think it close immediately after it shows.

I am using calendar v3.0

Thanks for helps.

#2

Hi,

if “calInput1” is an input id, the calendar will be closed automatically on click. However, if html container has onclick event handler with cancelled bubbling, body event listener won’t detect this event.

I want to make the calendar close/hide if I click outside the calendar.

Yes, dhtmlxEvent(document.body,“click”,function(){mCal.hide();}); will close the calendar right after it’s opened.

#3

Did you mean ‘on click’ as select a date from calendar or click outside calendar ?

At the time being, the calendar only closes when I select a date. Clicking outside calendar does not close it. Is there a working solution to this ?

Thanks

#4

Did you mean ‘on click’ as select a date from calendar or click outside calendar ?

Any click. Please check the sample dhtmlxCalendar/samples/01_init_and_usage/01_attach_to_input.html

At the time being, the calendar only closes when I select a date. Clicking outside calendar does not close it. Is there a working solution to this ?

If you’ve clicked on an element with own onclick event handler that blocks listening event by parent elements, such a problem may occur.

#5

Hi All,

First declare a variable

var calshow = false;

when you show the calender
make calshow = true;

ex- myCalendar.show();
calshow=true;

then write this code to close the calender
document.onclick = function hidecal2 () {
if (!calshow)
{
myCalendar.hide();
}
calshow = false;
}

on escape key press

document.onkeypress = function hidecal1 () {
if (event.keyCode==27)
{
myCalendar.hide();
}
}

here i have given sample code… example

Html code

                </td>