Custom LightBox

Scheduler Javascript
#1

Hi Sir,

Am so happy with your service with Scheduler. It works amazing. I need one small help.

I have the scheduler which displays names. If I double click it gives lightbox with name, start date & end date. I want to display some more information and I click on the click like city, state, phone no like that.

Can anyone help me, I will be great help.

Thanks in advance.

#2

Hi @sowmyark

Thank you for the positive feedback.

You should add new sections controls into the default lightbox definition scheduler.config.lightbox.sections to show more information. All existing controls are listed here in the documentation.

An example with a select control: https://snippet.dhtmlx.com/c84adac42

Also there is a possibilities to create Custom Lightbox Control or even Fully Custom Lightbox.

#3

Thank you sir,

But how do I give table column name to that.

#4

Hi Sir,

Is there any way I can add the php page link to the scheduler.

Instead of lightbox, Is I can get the php page with id as reference.

Please help me sir.

#5

Hi,
please clarify what do you mean. Do you want to redirect user to another page for editing?
If so, it can be done with the code like following

scheduler.attachEvent("onBeforeLightbox", function (id){ window.location.href = 'edit.php?event=' + id; });

#6

Hi Sir,

I did as you suggested, but it is not working.

Here is the code attached.

<!doctype html>

Outsource ACE 
<script src="codebase/dhtmlxscheduler.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" href="codebase/dhtmlxscheduler.css" type="text/css" media="screen" title="no title" charset="utf-8">

<script src="http://maps.google.com/maps/api/js?sensor=false"></script> 

<script src="codebase/ext/dhtmlxscheduler_pdf.js" type="text/javascript" charset="utf-8"></script>
<script src="codebase/ext/dhtmlxscheduler_multisource.js"></script>
<script src="codebase/ext/dhtmlxscheduler_mvc.js"></script>
<script src="codebase/ext/dhtmlxscheduler_multisection.js"></script>

<style type="text/css" media="screen">
	html, body{
		margin:0;
		padding:0;
		height:100%;
		overflow:hidden;
	}
	.dhx_cal_event.past_event div{
	background-color:purple !important; 
	color:white !important;
}
/*multi-day event in month view*/
.dhx_cal_event_line.past_event{
	background-color:purple !important; 
	color:white !important;
}
/*event with fixed time, in month view*/
.dhx_cal_event_clear.past_event{
	color:purple !important;
}


</style>

<script type="text/javascript" charset="utf-8">

	function init() {
		scheduler.config.xml_date="%Y-%m-%d %H:%i";
			scheduler.locale.labels.timeline_tab = "Timeline";
	scheduler.locale.labels.section_custom="Section";
	scheduler.config.details_on_create=true;
		scheduler.config.time_step = 30;
		scheduler.config.multi_day = true;

scheduler.templates.event_class=function(start,end,event){
if (start < (new Date())) //if date in past
return “past_event”; //then set special css class for it
}

scheduler.templates.event_text=function(start,end,event){
return “Text: “+event.text+”
”+“Descr.”+event.details;
}

scheduler.templates.event_header=function(start,end,event){
return (event.important?"":"")+scheduler.templates.hour_scale(start);
}

scheduler.templates.event_bar_text=function(start,end,event){
var text = event.text.substr(0,20);
return “”+text+"";
}

scheduler.attachEvent(“onBeforeLightbox”, function (id){
window.location.href = ‘data_update.php?event=’ + id;
});

	scheduler.init('scheduler_here',new Date(),"month");
	scheduler.load("data/connector.php");
	var dp = new dataProcessor("data/connector.php");
    dp.init(scheduler);
	
	}
		scheduler.attachEvent("onBeforeLightbox", function (id){
window.location.href = 'data_update.php?event=' + id;

});

</script>
 
 
 
	</div>
	<div class="dhx_cal_header">
	</div>
	<div class="dhx_cal_data">
	</div>		
</div>

Please help me out.

#7

Thank you sir , Its working :slight_smile:

#8

Hi Sir,

I want to display company name in the scheduler and I want to display in map the address

How to I do .

Please help me.
Thanks in advance
Sowmya RK