[QUESTION] Can event order in day/week view by controlled by the application?

[dongryphon]

Request from a user

The goal is to see "Valley" on the left and "Good Sam Hospital" on the right on both the 12th and 13th:

event-order.png (21.54 KiB) Viewed 593 times

[morriebrown]

Don,

Per our discussion: we are trying to get the events to "align" within the days in an order other than date time stamp.

Here is my suggestion: I think assigned a “value/position” as an option for displaying the events rather than StartDate/DateStamp will do the job. With this option selected in code, we will be able to assign from the “inspector” to set this “value/position”. The result will be all Valley jobs in position 1 (left most in date column) and Good Sam in positions 2 (right most). If we have (3) three assignments, then we would sort by position, 1, 2, 3 - Left, Center, Right... etc.

Hope this defines what I am looking for.

Thanks,

Morrie

[dongryphon]

With regard to event sorting and ordering in a day view, there are two phases to consider.

The first phase is a simple startDate/duration sort. This sort has impact on the second phase but does not have as much influence as may be desired.

The second phase is packing and collision detection. In this process, each event is processed in the sorted order and compared to previous events in the same cluster (a group of mutually overlapping events). The notion of "previous" here is defined by the first phase sort which allows the collision detection to only consider a portion of all events in the cluster for possible collision with the current event. Based on overlaps with prior events, the event is packed along side or in between previous events to minimize the number of "columns" allocated.

It is not possible adjust the second phase with an event priority or sort, but the initial sorting of events can be adjusted at the cost of potential misbehavior in the packing and collision detection phase.

This misbehavior may be of little or no consequence depending on the data involved. Below is a code example of how to adjust this sort. It is not a production-ready solution or anything because the code does not really present a clean way to replace this sort. This will be just to test the outcome and see if it produces a satisfactory result.

This is a replacement for the basic calendar example. If you replace "app.js" with this you should be able to see the effects of adjusting the event sort:

import '../_shared/shared.js'; // Adds example page chrome
import Calendar from '../../lib/Calendar/view/Calendar.js';
import FluidDayLayout from '../../lib/Calendar/layout/day/FluidDayLayout.js';

class MyEventLayout extends FluidDayLayout {
    static get type() {
        return 'my-day-layout';
    }

layoutEvents(cellData) {
    const
        { dayTime } = cellData,
        hookedDayTime = Object.create(dayTime);

    // This is a hack to test the outcome of arbitrary event order sorting
    // for demonstration only:
    hookedDayTime.sortEvents = (date, events) => {
        events.sort((ev1, ev2) => ev1.order - ev2.order);
        return events;
    };

    return super.layoutEvents({
        ...cellData,
        dayTime : hookedDayTime
    });
}
}

const calendar = new Calendar({
    // Start life looking at this date
    date : new Date(2020, 9, 12),

events : [{
    id        : 1,
    startDate : '2020-10-13T13:00:00',
    endDate   : '2020-10-14T15:00:00',
    name      : 'Event 1',
    order     : 1
}, {
    id        : 2,
    startDate : '2020-10-13T13:30:00',
    endDate   : '2020-10-14T18:00:00',
    name      : 'Event 2',
    order     : 2
}],

modes : {
    week : {
        showAllDayHeader : false,
        eventLayout : {
            type : MyEventLayout
        }
    }
},

appendTo : 'container'
});

At first glance it appears to do what you want but I am not sure how it will hold up with more realistic data.

[dongryphon]

There is a feature request for "resource lanes" in the calendar. Perhaps that is more in line with what you are wanting?

A mock up of what is proposed:

calendar-resource-lanes.png (71 KiB) Viewed 564 times