Combo select in month and year in dhtmlxcalendar


I am using dhtmlx calendar in one of my jsp, I’ve set isYearEditable and isMonthEditable to true:

var mCal = new dhtmlxCalendarObject(target,true,{headerButtons: true,btnPrev: true,btnNext: true,btnBgPrev: true,btnBgNext: true,isYearEditable: true,isMonthEditable: true});


Now the year and month i am able to change but user is not able to identify that there are drop down for year and month change. Can you please suggest me how can i make these drop down as combo boxes so that user can easily identify the drop downs.

Thanks in Advance.



unformtunately there isn’t a public method to change the drop-downs for year and month. We’ll try to find the solution and provide it if it’s possible.

We have attached the modified dhtmlxcalendar.js (for yahoolike skin). You can try to use it instead of the original one.

The dropdown.gif should be placed in the imgs folder.

dhtmlxcalendar.css (10.2 KB)


 continue to this mail only, calendar drop down is working fine in all the versions of IE except IE 6, in this only month drop down is working but when i am clicking on year's drop down its not responding at all. Please suggest me any suggestion.

Thanks in advance



locally calendar works correctly with isYearEditable: true, isMonthEditable: true. If the problem is still actual, you can provide the sample where the problem can be recreated.


 Thanks for the reply, actually the problem is not with the drop down, I am using the new css file you had sent me to show the drop down icons for month and year. Now the exact problem is that when I am clicking on month's arrow button it is showing me the drop down, but the same is not happening with year's drop down. Although, year's drop down is coming when i am clicking on year itself , but user requirement is that it should show when arrow button is clicked as it is working for month drop down.

Just to remind you that this functionality is not working only in IE6.

following is the initializing code :

var mCal = new dhtmlxCalendarObject(targetEle,true,{headerButtons: true,btnPrev: true,btnNext: true,btnBgPrev: true,btnBgNext: true,isYearEditable: true,isMonthEditable: true});

Waiting for your reply,

Thanks & Regards,

Hi All,

I am still waiting for the reply, please let me know if there is any solution for this problem or not, so that i can move further on this.

Looking forward for your positive reply.



locally this solution works in IE6.
In order to show arrow image we added the highlighted properties to the .dhtmlxcalendar_yahoolike div.planeMonth,.dhtmlxcalendar_yahoolike div.planeYear classes.

.dhtmlxcalendar_yahoolike div.planeMonth,
.dhtmlxcalendar_yahoolike div.planeYear {
height: auto;
overflow: auto;
font-weight: bold;
background:url(imgs/dropdown.gif) center right no-repeat;

You can try to modify this class as you need.