next sibling of null error

below code i added in js file and calling on document.ready using jquery

[code]scheduler.config.multi_day = true;
scheduler.config.repeat_date = “%Y-%m-%d %H:%i:%s”;
scheduler.config.include_end_by = true;
scheduler.config.repeat_precise = true;
scheduler.config.event_duration = 35;
scheduler.config.xml_date="%Y-%m-%d %H:%i:%s";
scheduler.locale.labels.section_userselect = “Displays”;
scheduler.locale.labels.section_colorpicker = “Color Picker”;

	scheduler.attachEvent("onTemplatesReady", function()
	{
		var lightbox_form = scheduler.getLightbox(); // this will generate lightbox form
		var inputs = lightbox_form.getElementsByTagName('input');
		var date_of_end = null;
		for (var i=0; i<inputs.length; i++)
		{
			if (inputs[i].name == "date_of_end")
			{
				date_of_end = inputs[i];
				break;
			}
		}

		$('#colorpicker').ColorPicker(
		{
	    	onSubmit: function(hsb, hex, rgb, el)
	    	{
	    		$(el).val(hex);
	    		$(el).ColorPickerHide();
	    	},
	    	onBeforeShow: function ()
	    	{
	    		$(this).ColorPickerSetColor(this.value);
	    	},
	    	onHide: function (colpkr)
	    	{
	    		$(colpkr).fadeOut(500);
	    		return false;
	    	},
	    	onChange: function (hsb, hex, rgb)
	    	{
	    		$('#colorpicker').val('#' + hex);
	    	}
	    })
	    
	    .bind('keyup', function(){
	    	$(this).ColorPickerSetColor(this.value);
	    });

		var repeat_end_date_format = scheduler.date.date_to_str("%Y-%m-%d");
		
		var show_minical = function()
		{
			if (scheduler.isCalendarVisible())
				scheduler.destroyCalendar();
			else {
				scheduler.renderCalendar({
					position:date_of_end,
					date:scheduler._date,
					navigation:true,
					handler:function(date,calendar) {
						date_of_end.value = repeat_end_date_format(date);
						scheduler.destroyCalendar()
					}
				});
			}
		};
		date_of_end.onclick = show_minical;

	});

	scheduler.form_blocks["my_form"] =
	{					
		render:function(sns)
		{
		        return "<div class='event_category' style='height:auto;'><label style='margin-left:2%;'><input id='normal_event' type='radio' name='event_type' checked>Normal Event</label><label style='margin-left:2%;'><input id='special_event' type='radio' name='event_type'>Special Event</label></div>";
		},
		set_value:function(node,value,ev)
		{
			document.getElementById("normal_event").checked = true;
			if(ev.event_type == 1)
			{
				document.getElementById("special_event").checked = true;
			}
		},
		get_value:function(node,ev)
		{
			if(document.getElementById("special_event").checked == true)
			{
				ev.event_type = 1;
			}
			else
			{
				ev.event_type = 0;
			}
		},
		focus:function(node)
		{

		}
	}

	scheduler.form_blocks["my_form_1"] =
	{					
		render:function(sns)
		{
		        return "<div class='event_category' style='height:auto;'><input style='margin-left:10px;' id='colorpicker' type='textbox' readonly></div></div>";
		},
		set_value:function(node,value,ev)
		{
			$('#colorpicker').val(ev.event_color);
		},
		get_value:function(node,ev)
		{
			ev.event_color = $('#colorpicker').val();
			
			if(ev.event_color != "")
			{
				if($('#colorpicker').val().indexOf('#') != 0)
				{
					ev.event_color = '#'+$('#colorpicker').val();
				}
				else
				{
					ev.event_color = $('#colorpicker').val();
				}
			}
			else
			{
				ev.event_color = '#664d0c';
			}
		},
		focus:function(node)
		{

		}
	}

	scheduler.config.lightbox.sections = [
		{ name:"description", height:100, map_to:"text", type:"textarea" , focus:true },
		{ name:"userselect", height:15, map_to:"user_id", type:"my_form", options: scheduler.serverList("user_id"),vertical:"false" },
		{ name:"colorpicker", height:15, map_to:"user_id", type:"my_form_1", options: scheduler.serverList("user_id")},			
		{ name:"recurring", type:"recurring", map_to:"rec_type", button:"recurring" },
		{ name:"time", height:72, type:"calendar_time", map_to:"auto" }
	];

	scheduler.init('scheduler_here', new Date(), "month");
	scheduler.config.show_loading=true;[/code]

below is my html form

[code]


	<div id="form_header_left">
	</div>
	<div id="form_header_right">
	</div>
</div>

<div id="form_body">
	<div class="slidetable">
		<div class="title">
			<h4 align='left'>Event Management</h4>
		</div>	
		<div class="SecondNav">
			
		</div>
	</div>
	<div style="position:absolute; width:99%; height:100%; margin:0px; padding:0px;">
	<div id="scheduler_here" class="dhx_cal_container" style="width:100%; height:99%;">
	<div class="dhx_cal_navline">
	<div style="margin-left:10px;" class="remove"><input type="text" id="inputDate"></div>
	<div style="margin-left:200px;" class="remove"><input type='button' value='Generate HTML' onclick="generatehtml();"></div>
	<div class="dhx_cal_prev_button" style="background-color:white;">&nbsp;</div>
	<div class="dhx_cal_next_button" style="background-color:white;">&nbsp;</div>
	<div class="dhx_cal_today_button" style="background-color:white;"></div>
	<div class="dhx_cal_date"></div>
</div>
<div class="dhx_cal_header">
</div>
<div class="dhx_cal_data">
</div>
[/code]

now i m getting “cannot read property of next sibling of null” when i double click to create event

Hello,
this error may be thrown if lightbox sections contain control of unknown type (type that is not defined in scheduler.form_blocks)

Make sure you’ve added js files for recurring events and minicalendar, as these controls are used in your form:
codebase/ext/dhtmlxscheduler_recurring.js
codebase/ext/dhtmlxscheduler_minical.js