reorder the text on custom eventbox externally

I have 3 issues with custom eventbox.

  1. I created the custom eventbox showing the --Appointment Time ,resourcename, customername and notes.

I need to create a seperate ui so that i can reorder the details shown on eventbox .
For example. currently i have eventbox details in this order ->
Appointment Time
Resourcename
Customername
Notes

i created a listbox to move the text position on the label.

How do i apply the change in the eventbox . Please help.

[code]function customeventbox() {

scheduler.renderEvent = function (container, event) {
    var typeid = event.TypeID;

    if (typeid == 1) {
       
        scheduler.xy.min_event_height = 1;
        debugger;
        // var container_width = container.style.width; // e.g. "105px"
       
        var b = new Date(event.start_date);//here is issue . when i tried to set a alert here for var b and c, i always get the today's date here.not the event's date. am i missing out anything here?.I wrote this code to set the height of evnetbox according to the duration. 
        var c = new Date(event.end_date);
    //    alert(b + "" + c);
        var f = b.getHours() * 60 + b.getMinutes();

        g = c.getHours() * 60 + c.getMinutes() || scheduler.config.last_hour * 60;
        var l2 = Math.max(scheduler.xy.min_event_height, (g - f) * scheduler.config.hour_size_px / 60);
        var l = l2 - 5;
        scheduler.templates.event_class = function (start, end, event) {
            if(typeid==1)
                return "my_event";
            else 
                return "sale_my_event"//issue 3.this is css is not getting applied.I get only my_event for both eventbox.
        };
        scheduler.templates.event_header = function (start, end, event) {
            return scheduler.templates.event_date(event.start_date) + "- " +
            scheduler.templates.event_date(event.end_date)
        }
        scheduler.templates.event_text = function (start, end, event) {
            if (event.StdTaskDesc != null) {
                return event.time+ "<br>" + event.resnmae+""+event.cusname+""+event.notes;
            }
            else {
                return event.time+ "<br>" + event.notes;
            }
        }
      
        var html;
        var paidid = 1;
        var customcolor;
        if (paidid == 1) {
            customcolor = 'background-image:url("../Content/images/upbg.png")';
        }
        else {
            customcolor = 'background:blue';
        }

        //   html += "<div class='dhx_event_move dhx_header' style='background:" + event.color + ";color:" + event.textColor + "'></div>";
        html = "<div class='dhx_event_move dhx_title' style=' display:none; background:" + event.color + "; border-left:3px solid " + customcolor + ";color:" + event.textColor + "'>";
        html += scheduler.templates.event_header(event.start_date, event.end_date, event);
        html += "</div>";
     
        html += "<div class='dhx_body'  style='background:" + event.color + "; color:" + event.textColor + ";height:" + l + "px'>";
        html += "<div class='paidbox' style='height:" + l + "px;float:left; background-position: left;width: 4px;" + customcolor + ";'></div>";
        html += scheduler.templates.event_header(event.start_date, event.end_date, event) + "<BR>";
        html += scheduler.templates.event_text(event.start_date, event.end_date, event);
        html += "</div>";
        container.innerHTML = html;
        return true; // required, true - we've created custom form; false - display default one instead
    }
    else if (typeid == 2||typeid==3)
    {
       
        var l = 12;
        var html;
        var paidid = 1;
        var customcolor;
       // checkhere
   scheduler.config.cascade_event_margin = 0; 
        if (paidid == 1) {
            customcolor = 'background-image:url("../Content/images/upbg.png")';
        }
        else {
            customcolor = 'background:blue';
        }
        //   html += "<div class='dhx_event_move dhx_header' style='background:" + event.color + ";color:" + event.textColor + "'></div>";
      
       
        
        html = "<div class='container' style='width:8px;border: 1px solid blue; height:8px;border-radius:6px;' >"
       
        html += "<div class='dhx_event_move dhx_title' style=' display:none; background:" + event.color + "; border-left:3px solid " + customcolor + ";color:" + event.textColor + "'>";

        html += scheduler.templates.event_header(event.start_date, event.end_date, event);
        html += "</div>";
    //    html += "<div class='paidbox' style='height:" + l + "px;float:left; background-position: left;width: 12px;" + customcolor + ";'></div>";
        html += "<div class='dhx_body'  style=' display:none;background:" + event.color + ";width: 12px; color:" + event.textColor + ";height:" + l + "px'>";
        html += scheduler.templates.event_header(event.start_date, event.end_date, event) + "<BR>";
        html += scheduler.templates.event_text(event.start_date, event.end_date, event);
        html += "</div>";
        html += "</div>";
        container.innerHTML = html;
        return true;
    }
};[/code]

I need to create a seperate ui so that i can reorder the details shown on eventbox .

The details shown in an eventbox are defined through event_text template, that is already used in the above code. So by changing template logic, you can change the order or details. The separate UI for such task is not a part of scheduler’s functionality, so unfortunately, I can’t suggest anything.

thanks
I mentioned the other 2 issues in the comments:
pls help.

scheduler.templates.event_class = function (start, end, event) { if(typeid==1) return "my_event"; else return "sale_my_event"//issue 3.this is css is not getting applied.I get only my_event for both eventbox. };

The problem with invalid event.start_date is quite strange. At this place of code the event.start_date must be a valid date object. Do you have any kind of sample where problem can be checked?

As for Issue 3 - you are using if(typeid==1)
which probably must be

if (event.TypeID == 1)