My own litebox using dhtmlx windows/forms.... how do I save?

michaelwjoyner · February 25, 2012, 2:09am

My code below is a very simple scheduler that will genrate a window and form with scheduler.showLightbox function.
Since I am not using a DIV, I cannot call scheduler.endLightbox(true, form_div_id)

Can I save events by scheduler.updateEvent(id) to the database?
Can I save delete events by scheduler.deleteEvent(id) to the database?

I need to know what my form needs to do to save the event data.

###############################################################################

<title>Area Statistics</title>
<!-- dhtmlx.js contains all necessary dhtmlx library javascript code -->

<script type="text/javascript" src="codebase/dhtmlxscheduler.js"></script>	
<script type="text/javascript" src="codebase/dhtmlxcommon.js"></script>
<script type="text/javascript" src="codebase/dhtmlxlayout.js"></script>
<script type="text/javascript" src="codebase/dhtmlxcontainer.js"></script>
<script type="text/javascript" src="codebase/dhtmlxmenu.js"></script>
<script type="text/javascript" src="codebase/ext/dhtmlxmenu_ext.js"></script>
<script type="text/javascript" src="codebase/ext/dhtmlxscheduler_limit.js"></script>
<script type="text/javascript" src="codebase/dhtmlxtoolbar.js"></script>
<script type="text/javascript" src="codebase/dhtmlxwindows.js"></script>
<script type="text/javascript" src="codebase/dhtmlxform.js"></script>
<script type="text/javascript" src="codebase/connector/connector.js"></script>
<script type="text/javascript" src="codebase/connector/dhtmlxdataprocessor.js"></script>
<!-- <script type="text/javascript" src="codebase/connector/dhtmlxdataprocessor_debug.js"></script>-->

<!-- CSS for components -->
<link rel="stylesheet" type="text/css" href="codebase/dhtmlxscheduler_glossy.css" />
<link rel="stylesheet" type="text/css" href="codebase/dhtmlxlayout.css" />
<link rel="stylesheet" type="text/css" href="codebase/dhtmlxwindows.css" />
<link rel="stylesheet" type="text/css" href="codebase/skins/dhtmlxlayout_dhx_skyblue.css" />
<link rel="stylesheet" type="text/css" href="codebase/skins/dhtmlxmenu_dhx_skyblue.css" />
<link rel="stylesheet" type="text/css" href="codebase/skins/dhtmlxtoolbar_dhx_skyblue.css" />
<link rel="stylesheet" type="text/css" href="codebase/skins/dhtmlxwindows_dhx_skyblue.css" />
<link rel="stylesheet" type="text/css" href="codebase/skins/dhtmlxform_dhx_skyblue.css" />

<script type="text/javascript" src='codebase/ext/date.js'></script>
<script type="text/javascript" src='codebase/ext/message.js'></script>
<link rel="STYLESHEET" type="text/css" href="codebase/themes/message_default.css" />

<style type="text/css">
	/*these styles allow dhtmlxLayout to work in fullscreen mode in different browsers correctly*/
	html,body {
		width: 100%;
		height: 100%;
		margin: 0px;
		overflow: hidden;
		background-color: white;
	}

	.inactive_day .dhx_month_body{
		background-color: #f2f2f2;
	}

	.inactive_day .dhx_month_head{
		background-color: #f2f2f2;
	}
	
</style>
<script type="text/javascript">

	var layout, menu, toolbar, winLogin, winEvent;
	
	dhtmlx.image_path = "codebase/imgs/";
	
	dhtmlxEvent(window,"load",function(){
		
		layout = new dhtmlXLayoutObject(document.body,"1C");
		layout.cells("a").hideHeader();
		layout.cells("a").setWidth(400);
	
	
		menu = layout.attachMenu();
		menu.setIconsPath("images/");
		menu.loadXML("xml/menu.xml");
		menu.attachEvent("onclick",function(id){
			if(id=="mnuFile_New"){}
		});
	
		// LOGIN WINDOW
		var windows = new dhtmlXWindows();
		winLogin = windows.createWindow('winLogin', 0, 0, 310, 210);
		winLogin.setText('Please Log In');
		winLogin.denyResize();
		winLogin.setModal(1);
		winLogin.centerOnScreen();
		winLogin.button('park').hide();
		winLogin.button('minmax1').hide();
		winLogin.button('close').hide();
		// LOGIN FORM
		var frmLogin = winLogin.attachForm();
		frmLogin.loadStruct("xml/frmLogin.xml");
		frmLogin.attachEvent("onButtonClick", function(name, command){ 
						frmLogin.send("./common/ajaxLoginCalendar.php", "post", afterCall);
		});
	
	}) // attachEvent(window,load)

			function afterCall(text, xml){
		var configObject = eval('(' + xml + ')');           

		/*validate result*/
		if (configObject["user"].result == "success"){

			// Config object
			winLogin.close(); // close a window
			document.title = configObject["user"].firstName+" "+configObject["user"].lastName+"'s Calendar";

			var dateParts = configObject["user"].dateStart.split("-");
			var dtCalendarStartDate = new Date(dateParts[0],dateParts[1] - 1,dateParts[2]);				
			dateParts = configObject["user"].dateEnd.split("-");
			var dtCalendarEndDate = new Date(dateParts[0],dateParts[1] - 1,dateParts[2]);				
			dtCalendarEndDate.addDays(1);
			
				// Initialize the scheduler
			scheduler.config.xml_date="%Y-%m-%d %H:%i";
			scheduler.config.prevent_cache = true;
			scheduler.config.first_hour=0;
	 		scheduler.config.details_on_create=true;
			scheduler.config.details_on_dblclick=true;
			scheduler.config.start_on_monday=false
			scheduler.config.full_day = true; // enable parameter to get full day event option on the lightbox form
			scheduler.locale.labels.section_type = "Type";
			scheduler.config.limit_start = dtCalendarStartDate;
			scheduler.config.limit_end   = dtCalendarEndDate;				
			scheduler.templates.event_bar_date=function(start,end,event){
		   		return "";
		  }		

			scheduler.templates.month_date_class=function(date){
				if(date<dtCalendarStartDate){ // event start before control date
					return "inactive_day";
				}
      if(date>=dtCalendarEndDate) // event start before control date
           return "inactive_day";
      return ""; // default return
			}

			// Load the scheduler
			layout.cells("a").attachScheduler(dtCalendarStartDate,"month");
			scheduler.setLoadMode("month");
			scheduler.load("common/events.php");
			var dp = new dataProcessor("common/events.php");
			dp.init(scheduler);
			dp.setTransactionMode("POST",true)

			
			scheduler.showLightbox = function(id){
				var ev = scheduler.getEvent(id);
				var windows = new dhtmlXWindows();
				winEvent = windows.createWindow('winEvent', 0, 0, 275, 185);
				winEvent.setText('Days Off Request');
				winEvent.denyResize();
				winEvent.setModal(1);
				winEvent.centerOnScreen();
				winEvent.button('park').hide();
				winEvent.button('minmax1').hide();
				winEvent.button('close').hide();
				var frmEvent = winEvent.attachForm();     
				frmEvent.loadStruct("xml/frmEvent.php", function(){
					frmEvent.setItemValue("name",ev.text);						
					frmEvent.setItemValue("details",ev.details);						
				});
				frmEvent.attachEvent("onButtonClick", function(name, command){
					if (name=="submit"){
									/****************************
									 **  
									 **  HOW DO I SAVE EVENT?
									 **
									 ****************************/
					} else {
									// USER CANCELLED
									winEvent.close();
					}
				});
			}

		} else {
				dhtmlx.modalbox({ 
						type:"alert-error",
						title:"Error", 
						text:"<br/><strong>Incorrect username or password<\/strong><br/><br/>",
						buttons:["Ok"]
				});
		}
	} // function: afterCall()

</script>

bmcgin · February 25, 2012, 9:19pm

try this:

var ev = scheduler.getEvent(scheduler.getState().lightbox_id);
ev.text   = "someting"; // do set this....
ev.name   = "xyz" // set any variable to any value
ev.detils = "xyz" // set any variable to any value
ev.xyz   = "zyz" // set any variable to any value
//ev.start_date = any javascript date 
//ev.end_date   = any javascript date 
scheduler.endLightbox(true);
windows.forEachWindow(function(win){
win.close();
});

if you find a way to show popup calander in the window, pls let me know, z-index is a problem.

michaelwjoyner · March 2, 2012, 2:52pm

If this works … you rock!!! I will try it and see if it will persist into DB.

bmcgin · March 9, 2012, 2:39am

It’s working in my scheduler and it saves to the db. When it’s time to load the I load via a url and set the custom fields in a json format. So far it’s working well.