Calendar hidden by lightbox in dhtmlxscheduler


I’m try to attach dhtmlxcalendar to lightbox in dhtmlxscheduler.
I want to attach calendar to text input to limit date, no start_date, no end_date.
First, I’m try to customize minicalendar In dhtmlxscheduler, but it’s hard.
Next, I found dhtmlxcalendar, but I have one problem.
Please show attach picture.
Blue area is calendar element.
Calendar was shown, but hid behind lightbox.

I’m add below code copy from dhtmlxscheduler_minical.js to scheduler.form_blocks In dhtmlxscheduler.js.

calendartext: {
		render: function (a) {
			var html = "<input class='dhx_readonly' type='text' id='calendar'>  <input type='button' value='Show' onclick='JavaScript:doOnLoad();' />";
//			var html = "<input class='dhx_readonly' type='text' readonly='true' id='calendar' onLoad='doOnLoad();'>";    //original

			var b = (a.height || "130") + "px";
			return "<div class='dhx_cal_ltext' style='height:" + b + ";'>" + html + "</div>"
		set_value: function (a, b) {
			a.firstChild.value = b || ""
		get_value: function (a) {
			return a.firstChild.value
		focus: function (a) {
			var b = a.firstChild;;

And add below code to scheduler page.

	var myCalendar;
	function doOnLoad() {
		myCalendar = new dhtmlXCalendarObject("calendar");

Please help my problem :cry:

My problem was cleared.

I understand that dhtmlxscheduler’s lightbox is set z-index = 20000, and dhtmlxcalendar is set z-index=1999.

On calling calendar script, set calendar’s z-index = 20001, worked.


Thank you.