Start Building Professional
Web Apps Today

Close calendar if clicks on page

Hello,

How to hide calendar control if clicked outside calendar control only?

I'm trying out this sample:
.......
dhtmlxEvent(document.body,"click",function(){ <myCalendarObject>.hide(); });
.......
In this case the calendar control hides away always when clicked on the page but it hides even if `calendar picture` is clicked (!) How to hide a calendar control only when clicked outside calendar?

dhtmlxEvent(document.body,"click",function(){ <myCalendarObject>.hide(); });  //hide calendar onclick
dhtmlxEvent(<myCalendarObject>.cont,"click",function(e){ (e||event).cancelBubble=true; });  //block click events inside calendar object

Hello,

I'm trying out this sample:

dhtmlxEvent(document.body,"click",function(){ <myCalendarObject>.hide(); });  //hide calendar onclick
dhtmlxEvent(<myCalendarObject>.cont,"click",function(e){ (e||event).cancelBubble=true; });  //block click events inside calendar object

In this case the code produces the following error:

'addEventListener' is null or not an object.

Thanks.

 

Such error can occur when
a) first parameter of dhtmlxEvent is not a valid object ( in your case document.body not rendered yet, or calendar container not exist yet ) 
b) you are using not supported browser

probably calendar container not exist yet(<myCalendarObject>.cont), how to create it?

Thanks.

Actually the code of dhtmlxcalendar doens't use such property as calendar.cont at all, you probably need to use <myCalendarObject>.con

I have done everything like you described in this post, thank you very much for the answer. Everything works except one thing. There is one more problem. I use dhtmlxGrid on my page. When I click on it, the calendar does not disappear. How can I fix it?

You need to add one more line of code
        dhtmlxEvent(mygrid.obj,"click",function(){ <myCalendarObject>.hide(); });  

where mygrid - reference to the grid object

Many thanks!