dhtmlxScheduler - Event aligment

Hello,



I’m working with dhtmlxScheduler and i have question - is it posssible to change inline order of events via API.



Currently all events are automacily aligned to left margin order by begin date.



Is posiible to place event with with for example important/high prioryty always as first (on left side), and then others (also is they started before important task).

Can be done only by code modification.

You can locate next code lines ( originally stored in the event.js )


scheduler._pre_render_events_line=function(evs,hold){
evs.sort(function(a,b){ return a.start_date>b.start_date?1:-1; })

The sorting order defines order in which events will be placed on view.
You can change it as

evs.sort(function(a,b){
if (a.priority > b.priority) return 1;
if (a.priority < b.priority) return -1;
return a.start_date>b.start_date?1:-1; })

This was wonderfully useful when I was trying to display event tracks neatly together.

Unfortunately, it creates a horrid problem. Because timing is no longer the key issue with sorting events, scheduler creates “long” events that cover up ones that come down the line.

The only work-around I came up with was to iterate over the events after rendering with JQuery and adjust all event sizes to the minimum.

The right way to do something like this:

when rendering the event
compute width (as now)
see if there is already an event with right and bottom coordinates that would interfere with this one - and adjust its width

OK, that’s a pretty tall order. In the meantime, here is my hack, which could be rewritten without jquery - and included as a config option for the scheduler:

    function adjust_event_size(){
            var min_w = 1000;
            $('.dhx_cal_event').each(function(){
                    var w = $(this).width();
                    if (w > 0 && min_w > w) min_w = w;
            });
            $('.dhx_cal_event').css({width: min_w});
            $('.dhx_cal_event .dhx_body').css({width: min_w - 10});
            $('.dhx_cal_event .dhx_footer').css({width: min_w - 3});
    }

Errr… that doesn’t work the whole way as events can cover each other up vertically! Would love to hear a solution from you guys. :slight_smile: