Calendar component not disappear

hi, I am so use Calendar, and binding an input, but when the mouse clicks somewhere else, Calendar component will not disappear, you can look at to solve.


    For demo purpose only :: &1



Attaching to input


You can attach calendar to input object.

Click in a text fild



to hide calendar where mouse is clicks somewhere you can try to use the following method:

document.body.onclick = function(){

First,thank you for the answer,but the Calendar component does not appear forever!

the code like this:


      <input type=“text” id=“startTime” name=“startTime”  />

the Calendar component does not appear!  would you like give me a better way! Thank you very much!


By default calendar disappears without any additional event handlers.

Please check the sample the calendar package dhtmlxCalendar/samples/01_initialization/01_calendar_attach_to_input.html … input.html

Our company is in July this year, bought all the products your company, when the product version is 2.1,

but you are now some products is 2.5, you will give our company to upgrade?

If we can upgrade, would there be compatibility problems?

This calendar  will not disappear in version 2.1

This issue wasn’t reproduced at the 2.5 version. If you have the same example as at the provided link, you issue will be fixed if you update you file.
Regarding version update please contact


I have simular problems in the Calendar control.

In my scenario I have two different calendar controls on one page. These controls both have their own input box. One Calendar is used to show the “orderdate” of a product and the other Calendar is used to show the “shippeddate”. I am not using the double Calendar since there is no relationship between the two different dates.

Scenario: the user enters the first date, the first calendar appears (ok!). Then the user clicks enters the second date. The second calendar appears (ok!). The first calendar is still there so the second is overlapping the first one (not ok!).

Both calendars are loaded with a similar script in the load function of the page:

function calendar_load_shippedDate()
mCall_shippedDate = new dhtmlxCalendarObject(‘shippedDate’, false, {isYearEditable:true, isMonthEditable:true, yearsRange:[2000, 2020]});
dhtmlxCalendarLangModules[‘myLanguageModule’] = {
langname: ‘myLanguageModule’,
monthesFNames: [“January”, “February”, “March”, “April”, “May”, “June”, “July”, “August”, “September”, “October”, “November”, “December”],
monthesSNames: [“Jan”, “Feb”, “Mar”, “Apr”, “May”, “Jun”, “Jul”, “Aug”, “Sep”, “Oct”, “Nov”, “Dec”],
daysFNames: [“Sunday”, “Monday”, “Tuesday”, “Wednesday”, “Thursday”, “Friday”, “Saturday”],
daysSNames: [“Su”, “Mo”, “Tu”, “We”, “Th”, “Fr”, “Sa”],
weekend: [0, 6],
weekstart: 1,
msgClose: “Close”,
msgMinimize: “Minimize”,
msgToday: “Today”
mCall_shippedDate.attachEvent(“onClick”, mCall_shippedDate_handleClick);

I am using the Calendar control dhtmlxSuite_v25_pro_91111.
I prefer not to change the source code to dhtmlSuite.

Any hints or workarounds?
My organization bought a license this year. If you would like to know more about this license and my organization please contact me privately.


calendar provides hide() and show() method which allow to control calendar visibility.

Calendar can be also attached to several inputs:

If the problem isn’t solved, please provide the complete demo.