Start Building Professional
Web Apps Today

Calendar position bug or problem

Hi!

I my goal is to build text input for dates and I want to have pop-up calendar, which opens and closes by clicking on calendar icon next to the text input. Everything works fine except the pop-up calendar's position. Calendar's background and header seems to be in ride place but the content of the calendar (days, weekdays, months, years and month navigation images) are out of the calendar's background. What I do wrong?

Here is my code:
<input type="text" name="input" id="input" value="" />
<img id="calendaricon" src="/dhtmlx/imgs/icon_minicalendar.gif" onclick="toggle();" />
<div id="container"></div>

<script type="text/javascript">
    
    var calendar;
    
    window.onload = initCalendar();
    
    //initialize the popup calendar
    function initCalendar(){
        calendar = new dhtmlxCalendarObject("container",false,{isMonthEditable: true, isYearEditable: true,isWinHeader: true});
        calendar.draw();
        calendar.setPosition(document.getElementById("calendaricon"));
        calendar.setSkin("yahoolike");
        calendar.hide();
    
        calendar.attachEvent("onClick",function(date){
        var input = document.getElementById("input");
            input.value = calendar.getFormatedDate("%d.%m.%Y", date);
            calendar.hide();
    });
    }
    
    //
    function toggle(){
        if(calendar.isVisible()){
            calendar.hide();
        }
        else{
            calendar.show();
        }
    }
</script>

Hi,

Have you any experience what kind of style definitions can mess up display of the pop-up calendar?

Hi,

I found the css code, which messed up calendar's display. The calendar was inside a table, which had following style class:

.classname td
{
    border: 1px solid gray;
    padding: 5px;
    vertical-align: top;
}

So that probably affected also calendar's td tags.