Header of details form - text defined by next templates
scheduler.templates.event_header scheduler.templates.event_bar_text
Sections below are defined through scheduler.config.lightbox.sections (see details here), default configuration is the next:
lightbox:{ sections:[ {name:"description", height:200, map_to:"text", type:"textarea" , focus:true}, {name:"time", height:72, type:"time", map_to:"auto"} ] }
Sections is an array, which represent the sections inside the form
{name:"reccuring", height:21, type:"select", map_to:"rec_type", options:[ {key:"", label:"Do not repeat"}, {key:"day", label:"Each day"}, {key:"week", label:"Each week"}, {key:"month", label:"Each month"} ]},
On server side, just add some field to the list of data fields
$scheduler->render_table("events_rec","event_id","start_date,end_date,text,rec_type");
If you are generating xml by custom code, just add subtag to the event as
<event id='50' > <start_date><![CDATA[2009-06-10 00:00:00]]></start_date> <end_date><![CDATA[2009-06-12 00:00:00]]></end_date> <text><![CDATA[New event]]></text> <rec_type><![CDATA[ some value ]]></rec_type> </event>
Now on client side, you can use the same name in the map_to attribute of event
{name:"reccuring", map_to:"rec_type" ...
Final code can be checked at samples/sample_custom_editor.html
To create your own custom section, you need to define new object in the next way
scheduler.form_blocks["my_editor"]={ render:function(sns){ //sns - section configuration object return "html code of editor here"; }, set_value:function(node,value,ev){ //node - html object related to html defined above //value - value defined by map_to property //ev - event object ... code to set value to the element ... }, get_value:function(node,ev){ //node - html object related to html defined above //event object return "current value from editor"; }, focus:function(node){ //node - html object related to html defined above ...code to set focus to the element... } }
Make sure that you don't use short closing syntax for tags inside the html code returned by the “render” function, since that might cause parsing problems in the browser:
render:function(){ return "<div id='box'/>";// this is WRONG }
Instead use opening and closing tags syntax:
render:function(){ return "<div id='box'></div>";// recommended }
In real life it may look as
scheduler.form_blocks["my_editor"]={ render:function(sns){ return "<div class='dhx_cal_ltext' style='height:60px;'>Text <input type='text'><br/>Details <input type='text'></div>"; }, set_value:function(node,value,ev){ node.childNodes[1].value=value||""; node.childNodes[4].value=ev.details||""; }, get_value:function(node,ev){ ev.location = node.childNodes[4].value; return node.childNodes[1].value; }, focus:function(node){ var a=node.childNodes[1]; a.select(); a.focus(); } } scheduler.config.lightbox.sections=[ { name:"description", height:200, map_to:"text", type:"my_editor" , focus:true}, { name:"time", height:72, type:"time", map_to:"auto"} ]
Can be done by customizing set_value method of related section object
scheduler.form_blocks.textarea.set_value=function(node,value,ev){ node.firstChild.value=value||""; node.firstChild.disabled = ev.disabled; // or just = true; to disable for all events }
Can be done by customizing set_value method of related section object
scheduler.form_blocks.textarea.set_value=function(node,value,ev){ node.firstChild.value=value||""; var style = ev.some_property?"":"none"; node.style.display=style; // editor area node.previousSibling.style.display=style; //section header scheduler.setLightboxSize(); //correct size of lightbox }
Just redefine showLightbox method with any custom one
scheduler.showLightbox = function(id){ // id - id of event ... code to show any custom form ... }
There are two helper methods - startLightbox and endLightbox , which you can use to simplify custom form implementation. Assuming that you have #custom_form html container somewhere on the page, you can use
var custom_form = document.getElementById("custom_form"); scheduler.showLightbox = function(id){ var ev = scheduler.getEvent(id); scheduler.startLightbox(id, custom_form ); ...'here you need to set values in the form'... //document.getElementById("some_input").value = ev.text; } //need to be attached to the save button function save_form() { var ev = scheduler.getEvent(scheduler.getState().lightbox_id); ...'here you need to retrieve values from the form'... //ev.text = document.getElementById("some_input").value; scheduler.endLightbox(true, custom_form); } //need to be attached to the cancel button function close_form(argument) { scheduler.endLightbox(false, custom_form); }
It possible to have a custom button in section header, to create it just add a button property to section object
{name:"description", height:130, map_to:"text", type:"textarea" , focus:true, button:"help"}
scheduler.locale.labels.button_help="Help label"; scheduler.form_blocks.textarea.button_click=function(index, src, sec, data){ //called on button click // index - index of section // sec - html element of section header // sec - html element of section editor }
You can define image used for the button through next css class
.dhx_custom_button_help{ background-image:url(imgs/but_help.gif); }
By default scheduler has 3 button at bottom - save, cancel, delete, which are configured as
scheduler.config.buttons_left=["dhx_save_btn","dhx_cancel_btn"]; scheduler.config.buttons_right=["dhx_delete_btn"];
if necessary you can remove buttons from lightbox by altering the above configuration collection. Also, you can add the custom button
scheduler.config.buttons_right = ["dhx_custom_btn_info"]; scheduler.locale.labels["dhx_custom_btn_info"] = "Info"; scheduler.attachEvent("onLightboxButton", function(button_id, node, e){ alert(button_id); });
.dhx_custom_btn_info{ background-image:url('../../codebase/imgs/controls.gif'); background-position: -2px 0px; width:20px; }
Beware that lightbox configuration need to be done BEFORE scheduler.init command.
Standard buttons:
Redefined buttons:
You can switch form to the wide-layout, by using
scheduler.config.wide_form = true;
Result form will require much lesser vertical space and can be used for devices with small-to-medium screens ( most netbooks ), for which default lightbox can be too big.
Standard form:
Wide form:
The initial duration can be activated by the single line:
scheduler.config.event_duration = 60;
But if you want that after changing start event time or date, the end event time and date will be changed automatically to make the event duration value 60 minutes, you must add the following:
scheduler.config.auto_end_date = true;
You can add the possibility of setting full day events in 'timeline' view. For this you just need to add the next codeline:
scheduler.config.full_day = true;
Now Full Day checkbox will be displayed in the right top of the Time period section. After selection, all entry fields of the section will be blocked, and the event duration will be set as a full day from 0.00am the current cell data to 0.00am next day.
You can use the next api to get|set values from|to lightbox sections
//get value var value = scheduler.formSection('description').getValue(); //set value scheduler.formSection('description').setValue('abc');
In case of recurring events, form configuration looks like
[ {name:"description", height:130, map_to:"text", type:"textarea" , focus:true}, {name:"recurring", height:115, type:"recurring", map_to:"rec_type", button:"recurring"}, {name:"time", height:72, type:"time", map_to:"auto"} ]
You may add any extra section, but need to preserve both recurring and time sections. It is important that time section is placed after recurring section.