dhtmlxcalendar in lightbox doesn’t appear.

Scheduler Javascript
#1

dhtmlxcalendar in lightbox doesn’t appear in my custom scheduler.form_blocks[“my_editor”].


<div class='dhx_cal_ltext' style='height:600px;'>
    <table width='650px' cellspacing='10'>
        <tbody>   
      
            <tr id='UnAvailableDueToRow'>
                <td class='LightBoxHeadingCell'>
                    UnAvailable Due To : 
                </td>
                <td>
                    <select name='StatusDropDown' id='StatusDropDown'>
                        <option value='PersonalLeave'>Personal Leave</option>
                        <option value='Sick'>Sick</option>
                        <option value='StatHoliday'>Stat Holiday</option>
                        <option value='Sick'>Sick</option>
                        <option value='Training'>Training</option>
                        <option value='Vacation'>Vacation</option>
                    </select>
                </td>
            </tr>
            <tr id='AddressTypeRow'>
                <td class='LightBoxHeadingCell'>
                    Address Type : 
                </td>
                <td>
                    <select name='AddressTypeDropDown' id='AddressTypeDropDown'>
                        <option value='EvaluatorsOffice'>Evaluators Office</option>
                        <option value='Clinic'>Clinic</option>
                    </select>
                </td>
            </tr>
            <tr id='StartAndEndDatesCalendarRow'>
                <td colspan='2'>
                    <table width='500px' cellspacing='5' style='margin-top: 5px;border: 1px solid black;'>
                        <tbody>
                            <tr>
                                <td class='LightBoxHeadingCell'>
                                    Start Date : 
                                </td>
                                <td>
                                    <input type='text' id='StartDateCalendar1'>
                                </td>
                                <td class='LightBoxHeadingCell'>
                                    End Date : 
                                </td>
                                <td>
                                    <input type='text' id='EndDateCalendar'>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </td>
            </tr>
            
            
        </tbody>
    </table>
</div>
#2

Please provide some code, so we could reproduce the problem

#3

Here is my code for creating/initializing the object.

scheduler.attachEvent("onLightbox", function (event_id){    					       
	var myCalendar = new dhtmlXCalendarObject(['StartDateCalendar1','EndDateCalendar']); 	              
});
#4

There are two possible issues

a) z-index of lightbox is quite big, you may need to edit css of dhtmlxCalendar and adjust its z-index ( 10010 or higher )

.dhtmlxcalendar_container { z-index: 10999; }

b) beware that onLightbox will be called for each edit operation, while you need to init calendars only once.

#5

Thank you very much for your suggestions and it works now.