Start Building Professional
Web Apps Today

Custom forms not working

Hi Everyone,

Was wondering how to create a custom form for the scheduler tool. Looking in the documentation it says that to make a custom form you need to put code inside:

--------------------------------
scheduler.showLightbox = function(id){
... custom code here
}
--------------------------------

When i place the following code in there:

--------------------------------
var d=document.createElement("DIV");
d.className="dhx_cal_light";
d.style.visibility="visible";
d.innerHTML = "Testing...is it working?";                        
this.showCover(d);
this._fill_lightbox(id,d);
--------------------------------

When triggerd, only the "cover" (Lightbox shadow effect) is shown but the content is not, i also receive a javascript error:

--------------------------------
"1" is empty or no object
--------------------------------

Can someone please direct me in the right way on how to create a custom form for this wonderful tool.

You are calling the 
          this._fill_lightbox(id,d);
in your custom code, the method expects to receive a form template as second parameter, not just a custom html container. 
You can comment this line and use you own code to get and set data

      var event = scheduler.getEvent("id")
      // event.text - you can access ( get or set ) any event property in such way 

Thanks for replaying, i'm not quite sure how to do this. I cannot find " var event = scheduler.getEvent("id")" in the exsisting source code, i tried using the code from "source/lightbox.js" but i can not get it to work.

Could you perhaps be so kind to show me a small example... thanks in advance.

OK, i think i have been at this for too long, it was right in front of me... i think i did itm it now shows a box with text:

------------------------------------
  scheduler.showLightbox = function(id){
   var ev = scheduler.getEvent(id);
   var start_date =  ev.start_date;
   var end_date = ev.end_date;

   var d=document.createElement("DIV");
   d.className="dhx_cal_light";
   d.style.visibility="visible";
   d.innerHTML="I think it is working now...";
   d.style.display="block";
   d.style.top="200px";
   d.style.left="200px"; 

   document.body.appendChild(d);
   scheduler._lightbox_id=id;
  }

------------------------------------

Thanks for the help...

Actually you can ignore any previously used code at all and show the fully custom form. The code may  look as 


scheduler.showLightbox = function(id){
   scheduler.showCover(); //show modal layer

   //show custom form
   var frm = document.getElementById("custom_form");
   frm.style.display="block";
   scheduler.set_xy(frm,300,200,100,100);

   //fill custom form with data
   var ev = scheduler.getEvent(id);
   frm.getElementsByTagName("INPUT")[0].value = ev.text;
   scheduler._last_custom_id = id; //save id in some temp var
}

Full sample is attached.