Custom form using dhtmlxWindows

Scheduler Javascript
#1

Hi,

I have the following piece of code to replace the scheduler’s lightbox.

The main reason is that I need to accomplish 2 things here:

  1. I need to use calendar along with the form
  2. I need to create the form from external xml file
    So I assume having a window with the form based on xml is the best choice here - am I right?

I load the data to the scheduler from a db and that works pretty fine so far (I use sampledb from the samples folder).

So my html code looks like this:

[code]

Scheduler Test 
<link rel="stylesheet" type="text/css" href="codebase/dhtmlxCalendar/codebase/dhtmlxcalendar.css"></link>
<link rel="stylesheet" type="text/css" href="codebase/dhtmlxCalendar/codebase/skins/dhtmlxcalendar_dhx_skyblue.css"></link>
<script src="codebase/dhtmlxCalendar/codebase/dhtmlxcalendar.js"></script>

<script src="codebase/dhtmlxscheduler.js" type="text/javascript" charset="utf-8"></script>
<script src="codebase/dhtmlx.js" type="text/javascript" charset="utf-8"></script>

<script src="codebase/ext/dhtmlxscheduler_year_view.js" type="text/javascript" charset="utf-8"></script>
<script src="codebase/ext/dhtmlxscheduler_limit.js" type="text/javascript" charset="utf-8"></script>
<script src="sources/locale_pl.js" type="text/javascript" charset="utf-8"></script>
<script src="index.js" type="text/javascript" charset="utf-8"></script>
<script src="codebase/ext/dhtmlxscheduler_editors.js" type="text/javascript" charset="utf-8"></script>

<!-- dhtmlx.css contains styles definitions for all included components -->
<link rel="stylesheet" type="text/css" href="codebase/dhtmlx.css" />
<link rel="stylesheet" href="codebase/dhtmlxscheduler.css" type="text/css" charset="utf-8" />
<link rel="stylesheet" type="text/css" href="index.css" />

<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/dhtmlxform.js"></script>

<style>
	/*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;
	}
	
</style>
 
 
[/code] and the javascript file (index.js) contains: [code] dhtmlxEvent(window,"load",function(){ 
dhtmlx.image_path='codebase/imgs/';

// Create main layout
var mainLayout = new dhtmlXLayoutObject(document.body, '2U');

    .
    .
    .

// Attach vacation scheduler to the lower cell
var cellScheduler = layoutRight.cells(‘b’);
cellScheduler.hideHeader();
scheduler.config.xml_date = ‘%Y-%m-%d’;
scheduler.config.month_day = “%j”;

scheduler.config.wide_form = false;
scheduler.config.full_day  = true;

scheduler = cellScheduler.attachScheduler(null,"month","vacation_scheduler");

scheduler.config.start_on_monday = true;
scheduler.config.show_loading = false;
scheduler.blockTime(0, "fullday");
scheduler.blockTime(6, "fullday");
scheduler.load('events.php');

scheduler.showLightbox = function(event_id){
	var schedulerEvent = scheduler.getEvent( event_id );
	var dhxWins= new dhtmlXWindows();
	var win = dhxWins.createWindow( "form_window", 100, 100, 555, 400 );
	var formLayout = win.attachLayout("1C");
	formLayout.cells("a").hideHeader();
	var vacForm = formLayout.cells("a").attachForm();
	vacForm.loadStruct("vacation-form.xml");

	var newEventDate = scheduler.getEventStartDate( event_id );
	vacForm.setItemValue( 'timeStart',newEventDate );
	vacForm.setItemValue( 'timeEnd',newEventDate );

	vacForm.attachEvent("onButtonClick", function(name, command) {
        switch( name ){
			case "submit":
				//vacForm.validate();
				var selectOptions = vacForm.getOptions( "vac_type" );
				scheduler.addEvent( vacForm.getItemValue( "timeStart" ), vacForm.getItemValue( "timeEnd" ), selectOptions[vacForm.getItemValue('vac_type')-1].text );
				scheduler.endLightbox(true);
				dhxWins.forEachWindow( function( win ){
					win.close();
				});
				break;
			case "cancel":
				dhxWins.forEachWindow( function( win ){
					win.close();
				});
				break;
		}
	});

});
[/code]
Now, I experience few major issues with the code:

  1. Placing a call of scheduler.endLightbox() anywhere in the code creates an error (available via Firefox error console): “a is undefined 127.0.0.1/codebase/dhtmlxscheduler.js Line:154”
  2. The data from the form appears in the scheduler (the new event is created and filled with the info) but it is not saved to the db.
  3. Even if the window and form is closed without saving datat to the scheduler (using window’s x-close button or form’s ‘Cancel’ button) the event is created and initial time of 00:00 appears in the selected day of the scheduler. No idea how to prevent that to happen and why it does happen at all!
  4. Double clicking on the already existing event in the scheduler fires my custom form window, but (I believe) scheduler.getEventStartDate( event_id ) returns the date in another format that the one required by calendar input of the form - thus the input does not accept the dates

I am using 3.0 of the scheduler and the entire dhtmlx suite (downloaded from the download section of your website).

Any help will be much appreciated. This is quite important project for my company and I cannot let go of it.

Many thanks!

Adam