Custome mini-calendar in lightbox

Scheduler Javascript
#1

Hello,

I’m trying to use mini-calendar in the time section so that I can reduce the number of clicks. I further want to reduce the number of clicks by displaying only start_date, start_time - end_time. In the background the end_date will be made equal to the start_date and on selecting the start_time, the end_time should be automatically changed to (start_time + step).

Please help.

Thanks,
Chetan

#2

Check dhtmlxscheduler_minical.js ( or its source in “sources” folder )
Here the scheduler.form_blocks.calendar_time is defined
You can alter styling of “render” method, applying display:none to unnecessary date input.

#3

Hey Stanislav,

Thanks for the prompt reply.

I tried doing that successfully. I just wondered if there is better way than modifying the original source code.

Also, is it possible to add onChange event on start_time?

Thanks again,
Chetan

#4

You can redefine related method outside of default js file , so it will not be overwritten by possible future updates.

Also, as you can see in source code, the time input control is pretty simple - so you can create a custom form-block and use it instead of the default one. In such case it will not be affected by any future updates.

#5

Hi, i am exactly trying to do this now, i modified the render function as below, the lightbox is showing correctly, but when i try to Save, Cancel, or delete events it shows error in my firebug console,

A is undefined
var A=this.getEvent(B);if(A.rec_type){

i am using dhtmlxscheduler_recurring.js along side, this error is from recurring.js. I want to know some details on how to do this?

render:function(){
var html = “”;
var cfg = scheduler.config;
var dt = this.date.date_part(new Date());
if (cfg.first_hour) dt.setHours(cfg.first_hour);

	html+=" <select onchange='populateEndTime(\"dhx_section_time\",this)'>";
	for (var i=60*cfg.first_hour; i<60*cfg.last_hour; i+=this.config.time_step*1){
		var time=this.templates.time_picker(dt);
		html+="<option value='"+i+"'>"+time+"</option>";
		dt=this.date.add(dt,this.config.time_step,"minute");
	}
	html+="</select>";									
	
	var endTimeHtml =" <select onchange='populateEndTime(\"dhx_section_time\",this)'>";
	for (var i=60*cfg.first_hour; i<60*cfg.last_hour; i+=this.config.time_step*1){
		var time=this.templates.time_picker(dt);
		endTimeHtml+="<option value='"+i+"'>"+time+"</option>";
		dt=this.date.add(dt,this.config.time_step,"minute");
	}
	endTimeHtml+="</select>";
	
	return "<div style='height:30px; padding-top:0px; font-size:inherit;' class='dhx_cal_lsection dhx_section_time'>"+html+"<span style='font-weight:normal; font-size:10pt;'> &nbsp;&ndash;&nbsp; </span>"+endTimeHtml+"</div>";
}

please help.

#6

Be sure that in your lightbox, time selection section is below recurring section - it is mandatory requirement.

The error in question occurs because some logic can’t locate event by ID and it can’t be related to custom render method. Are you sure that all have work correctly before new render implementation ?

#7

Hi Stanislav,
I solved it with the hint in your first reply, ‘You can alter styling of “render” method, applying display:none to unnecessary date input’

i actually copy pasted the ‘var html’ in render function & used the same code to render controls for ‘var endTimeHtml’ adding style=‘display:none’ to the input.

the return of the render function now looks like this:

return “

”+html+"  –  “+endTimeHtml+”
";

and its working fine now, in my last try i was just omitting the date picker input, that’s why the errors were pertaining.

Thanks.