How to ADD a ADD CLIENT button on the lightbox

seby20 · April 22, 2014, 12:41pm

hi, In my lightbox, I have a dropdown filed to select a client coming from database. I want to add a little addclient.png button at the end of the line wich will popup a php form addclient.php. That will help me adding a new client directly from the lightbox. How can I accomp^lish that please.
tks
Seby

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><head>
	<meta http-equiv="Content-type" content="text/html; charset=utf-8">
	<title></title>
</head>

<script src="http://www.simplestudiophoto.com/demo/simplestudio/js/jquery-ui-1.10.4/jquery-1.10.2.js"></script>
<script src="http://www.simplestudiophoto.com/demo/simplestudio/js/jquery-ui-1.10.4/jquery-1.10.2.js"></script>
<script src="http://www.simplestudiophoto.com/demo/simplestudio/js/jquery-ui-1.10.4/ui/jquery.ui.core.js"></script>
<script src="http://www.simplestudiophoto.com/demo/simplestudio/js/jquery-ui-1.10.4/ui/jquery.ui.widget.js"></script>
	<script src="../../codebase/dhtmlxscheduler.js" type="text/javascript" charset="utf-8"></script>
	<script src="../../codebase/ext/dhtmlxscheduler_year_view.js"></script>
	<script src='../../codebase/ext/dhtmlxscheduler_minical.js' type="text/javascript" charset="utf-8"></script>
   <link rel="stylesheet" href="../../codebase/ext/dhtmlxscheduler_ext.css" type="text/css">
   <link rel="stylesheet" href="../../codebase/dhtmlxscheduler.css" type="text/css">
   <script src="../../codebase/ext/dhtmlxscheduler_editors.js" type="text/javascript" charset="utf-8"></script>
	<link rel="stylesheet" type="text/css" href="../../codebase/dhtmlxcombo/codebase/dhtmlxcombo.css">
	<script  src="../../codebase/dhtmlxcombo/codebase/dhtmlxcommon.js"></script>
	<script  src="../../codebase/dhtmlxcombo/codebase/dhtmlxcombo.js"></script>
	<script src="../../codebase/ext/dhtmlxscheduler_tooltip.js"></script>
	<script src="../../codebase/ext/dhtmlxscheduler_timeline.js	"></script>
	<script src="../../codebase/ext/dhtmlxscheduler_dhx_terrace.js	"></script>
	<script src="../../codebase/ext/dhtmlxscheduler_treetimeline.js	"></script>
	<script src="../../sources/locale_fr.js" type="text/javascript" charset="utf-8"></script>
	<link rel="stylesheet" href="script/jquery.simplecolorpicker-regularfont.css">
<link rel="stylesheet" href="script/jquery.simplecolorpicker.css">
<script src="script/jquery.simplecolorpicker.js"></script>	



	

<style type="text/css" media="screen">
	html, body{
		margin:0px;
		padding:0px;
		height:100%;
		overflow:hidden;
	}	
</style>


<script type="text/javascript" charset="utf-8">
var monday;
$.ajax({
 url: "php/ajax_session.php",
 async:false,
 cache: false,
 success: function(data) {
     if( data == "0"){
         monday = false;
     }else{
		monday = true;
	 
	 }
 }         

});






function mycheckfun(rd)
{
//alert("hello");
//alert(rd);
}

   function show_minical(){
      if (scheduler.isCalendarVisible())
         scheduler.destroyCalendar();
      else
         scheduler.renderCalendar({
            position:"dhx_minical_icon",
            date:scheduler._date,
            navigation:true,
            handler:function(date,calendar){
               scheduler.setCurrentView(date);
               scheduler.destroyCalendar()
            }
         });
   }
   



	function init() {




 	
	///////////////////-------------added by sushma ////////////////
		
		var sections=[
			{key:'Business', label:"Travail  /  Business"},
			{key:'Quote', label:"Devis  /  Quote"},
			{key:'Personal', label:"À Faire  /  ToDo"}
			
			
		];
		
		var colors=[
			{key:'#7bd148', label:"01 <img style='width:20px;height:15px;' src='../../../simplestudio/images/01.png'/>"},
			{key:'#5484ed', label:"02 <img style='width:20px;height:15px;' src='../../../simplestudio/images/02.png'/>"},
			{key:'#a4bdfc', label:"03 <img style='width:20px;height:15px;' src='../../../simplestudio/images/03.png'/>"},
			{key:'#46d6db', label:"04 <img style='width:20px;height:15px;' src='../../../simplestudio/images/04.png'/>"},
			{key:'#7ae7bf', label:"05 <img style='width:20px;height:15px;' src='../../../simplestudio/images/05.png'/>"},
			{key:'#51b749', label:"06 <img style='width:20px;height:15px;' src='../../../simplestudio/images/06.png'/>"},
			{key:'#fbd75b', label:"07 <img style='width:20px;height:15px;' src='../../../simplestudio/images/07.png'/>"},
			{key:'#ffb878', label:"08 <img style='width:20px;height:15px;' src='../../../simplestudio/images/08.png'/>"},
			{key:'#ff887c', label:"09 <img style='width:20px;height:15px;' src='../../../simplestudio/images/09.png'/>"},
			{key:'#dc2127', label:"10 <img style='width:20px;height:15px;' src='../../../simplestudio/images/10.png'/>"},
			{key:'#dbadff', label:"11 <img style='width:20px;height:15px;' src='../../../simplestudio/images/11.png'/>"},
			{key:'#e1e1e1', label:"12 <img style='width:20px;height:15px;' src='../../../simplestudio/images/12.png'/>"}
		];

	
		
		
		
		
		scheduler.locale.labels.unit_tab = "Unit"
		scheduler.locale.labels.section_custom="Select";
		scheduler.config.multi_day = true;
		scheduler.config.auto_end_date = true;
		scheduler.config.event_duration = 60;
		scheduler.config.first_hour=4;

		scheduler.config.details_on_create=true;
		scheduler.config.details_on_dblclick=true;


		
		scheduler.config.xml_date="%Y-%m-%d %H:%i";
		scheduler.config.prevent_cache = true;
		

		scheduler.config.time_step = 15;
		
		

		
	
		
		
		
		/////////////////////////////////////////////////////////////
		
          scheduler.config.lightbox.sections=[
            {name:"session", height:20, map_to:"session_name", type:"textarea" , focus:true},
            {name:"type", height:20, type:"combo" , image_path: "../../codebase/dhtmlxcombo/codebase/imgs/", options:sections, map_to:"type" },
            {name:"subtype", height:20, type:"combo",  image_path: "../../codebase/dhtmlxcombo/codebase/imgs/", map_to:"session_type",options:scheduler.serverList("session_type") },
            {name:"realsubtype", height:20, type:"combo",  image_path: "../../codebase/dhtmlxcombo/codebase/imgs/", map_to:"session_subtype",options:scheduler.serverList("realsubtype") },
            {name:"reference", height:20, type:"combo",  image_path: "../../codebase/dhtmlxcombo/codebase/imgs/", map_to:"session_reference",options:scheduler.serverList("reference") },
            {name:"photographers", height:20, type:"combo", type:"combo" , image_path: "../../codebase/dhtmlxcombo/codebase/imgs/", map_to:"photographers_id",options:scheduler.serverList("photographers") },
            {name:"rooms", height:20, type:"combo" , image_path: "../../codebase/dhtmlxcombo/codebase/imgs/", map_to:"rooms_id",options:scheduler.serverList("rooms") },
            {name:"clients", map_to:"client_id", type:"combo", image_path: "../../codebase/dhtmlxcombo/codebase/imgs/", filtering: true, script_path: "php/complete.php", cache: true },
            {name:"place", height:20, type:"textarea", map_to:"session_location" },
            {name:"time", height:70, type:"calendar_time", map_to:"auto"},
  			{name:"colorpicker", height:20, type:"select" , image_path: "../../codebase/dhtmlxcombo/codebase/imgs/", options:colors, map_to:"scolor" },              
            {name:"notes", height:60, type:"textarea", map_to:"session_notes" }      
          ]
          
	 

          
          scheduler.locale.labels.section_session="Événement";
          scheduler.locale.labels.section_notes="Notes";
          scheduler.locale.labels.section_colorpicker="Couleur";
		  scheduler.locale.labels.section_type = "Agenda";
          scheduler.locale.labels.section_subtype="Type";
		  scheduler.locale.labels.section_realsubtype = "Sous-Type";
          scheduler.locale.labels.section_reference="Référence";
          scheduler.locale.labels.section_clients="Clients";
          scheduler.locale.labels.section_photographers="Photographe";
          scheduler.locale.labels.section_rooms="Piéce";
          scheduler.locale.labels.section_place="Place";
          scheduler.locale.labels.timeline_tab ="Photographe";
          scheduler.config.year_x = 4;
          scheduler.config.year_y = 3;
		  
		  


	  

	
		
		
		
scheduler.createTimelineView({
			section_autoheight: false,
			name:	"timeline",
			x_unit:	"day",
			x_date:	"%F %d",
			x_step:	1,
			x_size: 14,
			x_start: 0,
			x_length:	0,
round_position:true,
			render: "tree",
			folder_events_available: true,
			dy:60,
     y_unit: scheduler.serverList("photographers"),        //sections of the view (titles of Y-Axis)
        
     y_property:"photographers_id", //mapped data property
     render:"tree" 
	 //view mode
});		

	 

		

	
	
		//top label of calendar
scheduler.templates.calendar_month =  scheduler.date.date_to_str("%F %Y");

//week label of calendar
scheduler.templates.calendar_scale_date =  scheduler.date.date_to_str("%D");
//date value on the event's details form
scheduler.templates.calendar_time = scheduler.date.date_to_str("%d-%m-%Y");
	
 	
	
scheduler.templates.event_class = function(s,e,ev){
if (ev.type == 'Personal') return "Personal";
if (ev.type == 'Business') return "Business";
if (ev.type == 'Quote') return "Quote";

return "";
}	
	
	
		//scheduler.locale.labels.section_radiotype="Select";
		//scheduler.config.details_on_create=true;
		//scheduler.config.details_on_dblclick=true;
var d = new Date();
var curr_date = d.getDate();
var curr_month = d.getMonth();
var curr_year = d.getFullYear();




	 
		scheduler.config.xml_date="%Y-%m-%d %H:%i";
		
		
		Number.prototype.padLeft = function(base,chr){
    var  len = (String(base || 10).length - String(this).length)+1;
    return len > 0? new Array(len).join(chr || '0')+this : this;
}
		
		scheduler.attachEvent("onEventSave",function(id,data,flag){
			var s_date=(data.start_date).getFullYear()+'-'+((data.start_date).getMonth()+1).padLeft()+'-'+((data.start_date).getDate()).padLeft()+' '+((data.start_date).getHours()).padLeft()+':'+((data.start_date).getMinutes()).padLeft()+':'+((data.start_date).getSeconds()).padLeft();
			
			var passedValidation = false;
			$.ajax({
				type: "POST",
				async: false,
				url: "php/ajax_valid.php",
				data: { start_date: s_date, photographers_id: data.photographers_id, rooms_id: data.rooms_id, id: id , type: data.type , session_name: data.session_name }
			})
			.done(function( msg ) {
				if(msg!="")
				{
					alert(msg);
					passedValidation = false;
					return false;
				}
				else
				{
					passedValidation = true;
				}				
			});
			return passedValidation;
		});


scheduler.attachEvent("onLightbox", function (id){


try {
	$('select[name="colorpicker"]').simplecolorpicker('destroy');
	
	
	}
	catch(e) {
	
	}
$('select[name="colorpicker"]').simplecolorpicker({theme: 'regularfont'});

});




/*
scheduler.attachEvent("onAfterLightbox", function (){


//scheduler.clearAll();
//scheduler.updateView();

});
*/


	
scheduler.templates.event_bar_date = function(start,end,ev){

	var color1 = ev.scolor;
	
	if (color1=='#7bd148'){return "<img style='width:9px;height:9px;' src='../../../simplestudio/images/01.png'/><b>"+scheduler.templates.event_date(start)+"</b> ";}
	if (color1=='#5484ed'){return "<img style='width:9px;height:9px;' src='../../../simplestudio/images/02.png'/><b>"+scheduler.templates.event_date(start)+"</b> ";}
	if (color1=='#a4bdfc'){return "<img style='width:9px;height:9px;' src='../../../simplestudio/images/03.png'/><b>"+scheduler.templates.event_date(start)+"</b> ";}
	if (color1=='#46d6db'){return "<img style='width:9px;height:9px;' src='../../../simplestudio/images/04.png'/><b>"+scheduler.templates.event_date(start)+"</b> ";}
	if (color1=='#7ae7bf'){return "<img style='width:9px;height:9px;' src='../../../simplestudio/images/05.png'/><b>"+scheduler.templates.event_date(start)+"</b> ";}
	if (color1=='#51b749'){return "<img style='width:9px;height:9px;' src='../../../simplestudio/images/06.png'/><b>"+scheduler.templates.event_date(start)+"</b> ";}
	if (color1=='#fbd75b'){return "<img style='width:9px;height:9px;' src='../../../simplestudio/images/07.png'/><b>"+scheduler.templates.event_date(start)+"</b> ";}
	if (color1=='#ffb878'){return "<img style='width:9px;height:9px;' src='../../../simplestudio/images/08.png'/><b>"+scheduler.templates.event_date(start)+"</b> ";}
	if (color1=='#ff887c'){return "<img style='width:9px;height:9px;' src='../../../simplestudio/images/09.png'/><b>"+scheduler.templates.event_date(start)+"</b> ";}
	if (color1=='#dc2127'){return "<img style='width:9px;height:9px;' src='../../../simplestudio/images/10.png'/><b>"+scheduler.templates.event_date(start)+"</b> ";}
	if (color1=='#dbadff'){return "<img style='width:9px;height:9px;' src='../../../simplestudio/images/11.png'/><b>"+scheduler.templates.event_date(start)+"</b> ";}
	if (color1=='#e1e1e1'){return "<img style='width:9px;height:9px;' src='../../../simplestudio/images/12.png'/><b>"+scheduler.templates.event_date(start)+"</b> ";}
	return scheduler.templates.event_date(start)+" - ";

};	


scheduler.templates.event_header = function(start,end,ev){


	var color2 = ev.scolor;
	
	if (color2=='#7bd148'){return "<img style='width:9px;height:9px;' src='../../../simplestudio/images/01.png'/><b>"+scheduler.templates.event_date(start)+" - "+scheduler.templates.event_date(end)+"</b> ";}
	if (color2=='#5484ed'){return "<img style='width:9px;height:9px;' src='../../../simplestudio/images/02.png'/><b>"+scheduler.templates.event_date(start)+" - "+scheduler.templates.event_date(end)+"</b> ";}
	if (color2=='#a4bdfc'){return "<img style='width:9px;height:9px;' src='../../../simplestudio/images/03.png'/><b>"+scheduler.templates.event_date(start)+" - "+scheduler.templates.event_date(end)+"</b> ";}
	if (color2=='#46d6db'){return "<img style='width:9px;height:9px;' src='../../../simplestudio/images/04.png'/><b>"+scheduler.templates.event_date(start)+" - "+scheduler.templates.event_date(end)+"</b> ";}
	if (color2=='#7ae7bf'){return "<img style='width:9px;height:9px;' src='../../../simplestudio/images/05.png'/><b>"+scheduler.templates.event_date(start)+" - "+scheduler.templates.event_date(end)+"</b> ";}
	if (color2=='#51b749'){return "<img style='width:9px;height:9px;' src='../../../simplestudio/images/06.png'/><b>"+scheduler.templates.event_date(start)+" - "+scheduler.templates.event_date(end)+"</b> ";}
	if (color2=='#fbd75b'){return "<img style='width:9px;height:9px;' src='../../../simplestudio/images/07.png'/><b>"+scheduler.templates.event_date(start)+" - "+scheduler.templates.event_date(end)+"</b> ";}
	if (color2=='#ffb878'){return "<img style='width:9px;height:9px;' src='../../../simplestudio/images/08.png'/><b>"+scheduler.templates.event_date(start)+" - "+scheduler.templates.event_date(end)+"</b> ";}
	if (color2=='#ff887c'){return "<img style='width:9px;height:9px;' src='../../../simplestudio/images/09.png'/><b>"+scheduler.templates.event_date(start)+" - "+scheduler.templates.event_date(end)+"</b> ";}
	if (color2=='#dc2127'){return "<img style='width:9px;height:9px;' src='../../../simplestudio/images/10.png'/><b>"+scheduler.templates.event_date(start)+" - "+scheduler.templates.event_date(end)+"</b> ";}
	if (color2=='#dbadff'){return "<img style='width:9px;height:9px;' src='../../../simplestudio/images/11.png'/><b>"+scheduler.templates.event_date(start)+" - "+scheduler.templates.event_date(end)+"</b> ";}
	if (color2=='#e1e1e1'){return "<img style='width:9px;height:9px;' src='../../../simplestudio/images/12.png'/><b>"+scheduler.templates.event_date(start)+" - "+scheduler.templates.event_date(end)+"</b> ";}
	return scheduler.templates.event_date(start)+" - "+scheduler.templates.event_date(end);

};			
		
	


scheduler.templates.year_tooltip = function(start,end,ev){


	var color3 = ev.scolor;
	
	if (color3=='#7bd148'){return "<img style='width:9px;height:9px;' src='../../../simplestudio/images/01.png'/> "+scheduler.templates.event_date(start)+" - "+scheduler.templates.event_date(end)+" - "+ev.text+"  ";}
	if (color3=='#5484ed'){return "<img style='width:9px;height:9px;' src='../../../simplestudio/images/02.png'/> "+scheduler.templates.event_date(start)+" - "+scheduler.templates.event_date(end)+" - "+ev.text+"  ";}
	if (color3=='#a4bdfc'){return "<img style='width:9px;height:9px;' src='../../../simplestudio/images/03.png'/> "+scheduler.templates.event_date(start)+" - "+scheduler.templates.event_date(end)+" - "+ev.text+"  ";}
	if (color3=='#46d6db'){return "<img style='width:9px;height:9px;' src='../../../simplestudio/images/04.png'/> "+scheduler.templates.event_date(start)+" - "+scheduler.templates.event_date(end)+" - "+ev.text+"  ";}
	if (color3=='#7ae7bf'){return "<img style='width:9px;height:9px;' src='../../../simplestudio/images/05.png'/> "+scheduler.templates.event_date(start)+" - "+scheduler.templates.event_date(end)+" - "+ev.text+"  ";}
	if (color3=='#51b749'){return "<img style='width:9px;height:9px;' src='../../../simplestudio/images/06.png'/> "+scheduler.templates.event_date(start)+" - "+scheduler.templates.event_date(end)+" - "+ev.text+"  ";}
	if (color3=='#fbd75b'){return "<img style='width:9px;height:9px;' src='../../../simplestudio/images/07.png'/> "+scheduler.templates.event_date(start)+" - "+scheduler.templates.event_date(end)+" - "+ev.text+"  ";}
	if (color3=='#ffb878'){return "<img style='width:9px;height:9px;' src='../../../simplestudio/images/08.png'/> "+scheduler.templates.event_date(start)+" - "+scheduler.templates.event_date(end)+" - "+ev.text+"  ";}
	if (color3=='#ff887c'){return "<img style='width:9px;height:9px;' src='../../../simplestudio/images/09.png'/> "+scheduler.templates.event_date(start)+" - "+scheduler.templates.event_date(end)+" - "+ev.text+"  ";}
	if (color3=='#dc2127'){return "<img style='width:9px;height:9px;' src='../../../simplestudio/images/10.png'/> "+scheduler.templates.event_date(start)+" - "+scheduler.templates.event_date(end)+" - "+ev.text+"  ";}
	if (color3=='#dbadff'){return "<img style='width:9px;height:9px;' src='../../../simplestudio/images/11.png'/> "+scheduler.templates.event_date(start)+" - "+scheduler.templates.event_date(end)+" - "+ev.text+"  ";}
	if (color3=='#e1e1e1'){return "<img style='width:9px;height:9px;' src='../../../simplestudio/images/12.png'/> "+scheduler.templates.event_date(start)+" - "+scheduler.templates.event_date(end)+" - "+ev.text+"  ";}
	return scheduler.templates.event_date(start)+" - "+scheduler.templates.event_date(end)+" - "+ev.text;

};			
		
	
$.ajax({
        url: "php/ajaxdefaultcalendar.php",
        type: "POST",
        dataType: "html",
        success: function(data)
        {
			scheduler.init('scheduler_here',new Date(curr_year,curr_month,curr_date), data);		
			scheduler.setLoadMode(data);
			
        }
});
		
		/*scheduler.init('scheduler_here',new Date(curr_year,curr_month,curr_date), data_r);		
		scheduler.setLoadMode(data_r);*/
		

		
		scheduler.load("php/events.php");
		
		
		
		var dp = new dataProcessor("php/events.php");
		
		dp.init(scheduler);
		

		/*dp.defineAction("invalid",function(response){
		   var message = response.textContent;
		   alert(message);
		   return false;// return false to cancel default data processing at all
		});*/
		

	}

scheduler.config.start_on_monday = monday;	

</script>




<body onload="init();">
<!--<div style="text-align:center"><a href="#" onclick="testAjax()">Test</a></div>-->
	<div id="scheduler_here" class="dhx_cal_container" style='width:100%; height:100%;'>
		<div class="dhx_cal_navline">
			<div class="dhx_cal_prev_button">&nbsp;</div>
			<div class="dhx_cal_next_button">&nbsp;</div>
			<div class="dhx_cal_today_button"></div>
			<div class="dhx_cal_date"></div>
			<div class="dhx_minical_icon" id="dhx_minical_icon" onclick="show_minical()">&nbsp;</div>
			<div class="dhx_cal_tab" name="day_tab" style="right:204px;"></div>
			<div class="dhx_cal_tab" name="week_tab" style="right:140px;"></div>
			<div class="dhx_cal_tab" name="month_tab" style="right:76px;"></div>
			<div class="dhx_cal_tab" name="year_tab" style="right:12px;"></div>
			<div class="dhx_cal_tab" name="timeline_tab"  style="width:auto; right:268px;"></div>
		</div>
		<div class="dhx_cal_header">
		</div>
		<div class="dhx_cal_data">
		</div>		
	</div>
</body>

SergeM · April 23, 2014, 8:34am

Hi,
you can create a custom lightbox control with select and button, or just add an additional control with a button:
docs.dhtmlx.com/scheduler/custom … ditor.html

Or you can add a button to the standard lightbox button set:
docs.dhtmlx.com/scheduler/changi … ttons.html

seby20 · April 23, 2014, 10:37am

Hi sir, you did not really answered my question i think to my particular problem. I don’t have a custom lightbox, I already have mine. From what I have right now, how could I accomplish what I needed please
tks
seby

SergeM · April 25, 2014, 11:51am

Hi,
under “custom lightbox control” I mean a new field you can add to the dhtmlx lightbox (you already use it). All steps and a demo are presented on the documentation page.
In your case the render for this section will look like :

scheduler.form_blocks["my_editor"]={
    render:function(sns){ //sns - section configuration object
        var html = "<select id='my_select'><option value="1">1</option>...</select><input type='button' value='Add client' onclick='addClient();' />";
        return html;
    },
    set_value:function(node,value,ev){
        document.getElementById("my_select").value = ev["my_select"]; // read event property
    },
    get_value:function(node,ev){
        return document.getElementById("my_select").value;
    },
    focus:function(node){

    }
}