CODEWITHSUNDEEP
calendardhtmlx-scheduler
prabhu
prabhu

Reputation: 39

control flow of dhtmlx schedular for saving data via custom field

I have added custom text field in dhtmlschedular.js but

I am unable to trace the path. how can my custom field value get on controller.

or complete flow of dhtmlx for saving the data to db.

I done so far :-

lightbox: {
        sections: [
            {name: "description", height: 200, map_to: "text", type: "textarea",             focus: true },
            { name:"prabhu", height:200, map_to:"txt1", type:"dhiraj"},
            {name: "time", height: 72, type: "time", map_to: "auto"}]


    dhiraj: {
        render:function(sns){
            return "<div class='dhx_cal_ltext' style='height:60px;'>Text&nbsp;<input id='txt1' name='txt1' type='text'><br/>Details&nbsp;<input id='calendarDetailId' name='txt2' 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(); 
        }
    }
};

Upvotes: 0

Views: 1391

Answers (1)

Paul
Paul

Reputation: 1656

You can add custom field without modifying sources of the component (i'd recomend avoid modifying them whenever it's possible)

If you need to add another control into the details form, you can overwrite scheduler.configuration.lightbox.sections object (in your page/script file, not in the sources)

The 'map_to' property defines property of the data object(event) to be mapped to the input. If control should be mapped to several fields, you can use map_to:"auto" and retreive needed fields from event object manually.

The code on your page may look like following:

//defining a control
scheduler.form_blocks["dhiraj"]={
    render:function(sns){
        return "<div class='dhx_cal_ltext' style='height:60px;'>" +
                "Text&nbsp;<input id='txt1' name='txt1' type='text'><br/>" +
                "Details&nbsp;<input id='calendarDetailId' name='txt2' type='text'>" +
                "</div>";
    },
    set_value:function(node,value,ev){
        //get values from event manually
        node.childNodes[1].value = ev.txt1 || "";
        node.childNodes[4].value = ev.txt2 || "";
    },
    get_value:function(node,ev){
        //assign values to event object
        ev.txt1 = node.childNodes[1].value;
        ev.txt2 = node.childNodes[4].value;
    },
    focus:function(node){
        var a=node.childNodes[1]; a.select(); a.focus();
    }
};

//add control to the details form
scheduler.locale.labels.section_prabhu = "";//labels for inputs are defined as 'seciton_'+inputName
scheduler.config.lightbox.sections = [
    {name:"description", height:200, map_to:"text", type:"textarea" , focus:true},
    {name:"prabhu", height:200, map_to:"auto", type:"dhiraj"},//here it is
    {name:"time", height:72, type:"time", map_to:"auto"}
];

//init scheduler after control is defined
scheduler.init('scheduler_here',new Date(),"week");

New input will show value of 'txt1' and 'txt2' properties, as can be seen in the definition. When changes are saved, component will send all event values to the server. Custom values also will be sent.

Depending on how you handle update on the server side, you should either add custom fields to configuration of dhtmlxConnector, or retreive them from GET/POST parameters.

http://docs.dhtmlx.com/scheduler/lightbox_editors.html http://docs.dhtmlx.com/scheduler/custom_lightbox_editor.html

Upvotes: 1

Related Questions