Adding a function to scheduler.from_blocks['time']

Scheduler Javascript
#1

Hi,
I’m wondering what is the cleanest way to add a function to scheduler.from_blocks[‘time’]?

I’ve managed to get the actual result I want by doing the following:

  1. Copied the entire definition of the “time” editor (from scheduler_debug.js) and added my own function - ph_setend

[code]scheduler.form_blocks[‘ph_time’]={
render:function(){
//hours
var cfg = scheduler.config;
var dt = this.date.date_part(new Date());
var last = 2460, first = 0;
if(scheduler.config.limit_time_select){
last = 60cfg.last_hour+1;
first = 60*cfg.first_hour;
dt.setHours(cfg.first_hour);
}

        var html="<select>";
        for (var i=first; i<last; i+=this.config.time_step*1){
            var time=this.templates.time_picker(dt);
            html+="<option value='"+i+"'>"+time+"</option>";
            dt=this.date.add(dt,this.config.time_step,"minute");
        }
        
        //days
        html+="</select> <select>";
        for (var i=1; i < 32; i++) 
            html+="<option value='"+i+"'>"+i+"</option>";
        
        //month
        html+="</select> <select>";
        for (var i=0; i < 12; i++) 
            html+="<option value='"+i+"'>"+this.locale.date.month_full[i]+"</option>";
        
        //year
        html+="</select> <select>";
        dt = dt.getFullYear()-5; //maybe take from config?
        for (var i=0; i < 10; i++) 
            html+="<option value='"+(dt+i)+"'>"+(dt+i)+"</option>";
        html+="</select> ";
        
        return "<div style='height:30px; padding-top:0px; font-size:inherit;' class='dhx_cal_lsection dhx_section_time'>"+html+"<span style='font-weight:normal; font-size:10pt;'> &nbsp;&ndash;&nbsp; </span>"+html+"</div>";            

    },
    set_value:function(node,value,ev){

        var s=node.getElementsByTagName("select");

        if(scheduler.config.full_day) {
            if (!node._full_day){
                node.previousSibling.innerHTML+="<div class='dhx_fullday_checkbox'><label><input type='checkbox' name='full_day' value='true'> "+scheduler.locale.labels.full_day+"&nbsp;</label></input></div>";
                node._full_day=true;
            }
            var input=node.previousSibling.getElementsByTagName("input")[0];
            var isFulldayEvent = (scheduler.date.time_part(ev.start_date)==0 && scheduler.date.time_part(ev.end_date)==0 && ev.end_date.valueOf()-ev.start_date.valueOf() < 2*24*60*60*1000);
            input.checked = isFulldayEvent;
            
            for(var k in s)
                s[k].disabled=input.checked;

            input.onclick = function(){ 
                if(input.checked) {
                    var start_date = new Date(ev.start_date);
                    var end_date = new Date(ev.end_date);
                    
                    scheduler.date.date_part(start_date);
                    end_date = scheduler.date.add(start_date, 1, "day")
                } 
                for(var i in s)
                    s[i].disabled=input.checked;
                
                _fill_lightbox_select(s,0,start_date||ev.start_date);
                _fill_lightbox_select(s,4,end_date||ev.end_date);
            }
        }
        
        if(scheduler.config.auto_end_date && scheduler.config.event_duration) {
            function _update_lightbox_select() {
                ev.start_date=new Date(s[3].value,s[2].value,s[1].value,0,s[0].value);
                ev.end_date.setTime(ev.start_date.getTime() + (scheduler.config.event_duration * 60 * 1000));
                _fill_lightbox_select(s,4,ev.end_date);
            }
            for(var i=0; i<4; i++) {
                s[i].onchange = _update_lightbox_select;
            }
        }
        
        function _fill_lightbox_select(s,i,d){
            s[i+0].value=Math.round((d.getHours()*60+d.getMinutes())/scheduler.config.time_step)*scheduler.config.time_step;    
            s[i+1].value=d.getDate();
            s[i+2].value=d.getMonth();
            s[i+3].value=d.getFullYear();
        }
        
        _fill_lightbox_select(s,0,ev.start_date);
        _fill_lightbox_select(s,4,ev.end_date);
    },
    //only this part customised: RW 23/10/10
    ph_setend:function(node,ev,service_duration){
        var s=node.getElementsByTagName("select");
        ev.end_date.setTime(ev.start_date.getTime() + (service_duration * 60 * 1000));
        
        function _fill_lightbox_select(s,i,d){
            s[i+0].value=Math.round((d.getHours()*60+d.getMinutes())/scheduler.config.time_step)*scheduler.config.time_step;    
            s[i+1].value=d.getDate();
            s[i+2].value=d.getMonth();
            s[i+3].value=d.getFullYear();
        }
        _fill_lightbox_select(s,4,ev.end_date);    
    },
    //till here... need to find a cleaner way to extend
    get_value:function(node,ev){
        s=node.getElementsByTagName("select");
        ev.start_date=new Date(s[3].value,s[2].value,s[1].value,0,s[0].value);
        ev.end_date=new Date(s[7].value,s[6].value,s[5].value,0,s[4].value);
        if (ev.end_date<=ev.start_date) 
            ev.end_date=scheduler.date.add(ev.start_date,scheduler.config.time_step,"minute");
    },
    focus:function(node){
        node.getElementsByTagName("select")[0].focus(); 
    }
    }
  [/code]
  1. Added a custom editor to my lightbox

scheduler.config.lightbox.sections=[ ... {name:"time", height:72, type:"ph_time", map_to:"auto"}, ... ];

I then call the function when I need to…
Was it necessary for me to copy all the code as in step 1 or is it possible to extend it in a cleaner way?

Many thanks in advance!

regards,
Rose

#2

Hello,

I believe you can do something like that:

var nice_function = function(message) { alert(message); } scheduler.form_blocks.time.new_function = nice_function;
Hope this helps.

Best regards,
Ilya

#3

Thank you Ilya, that worked perfectly!