Hi
Using your eventsLayout demo, we are using a custom sort function for horizontalEventSorterFn using the id (as an example):
function customSorter(a, b) {
console.log('Sorter: ', a.name, ' /// : ', b.name, a.id - b.id)
return a.id - b.id;
}
In the image attached why is the meeting 3 (which has id = 3) above Meeting 2 (id = 2)? We were expecting Meeting 3 to be below Meeting 2 since both overlap...
Hi jandresampaio,
It compared with all records in the resource, not only with a neighbour one, and same with overlapping, and applies only if no free space is available. In the case you showed, there is a space to put the event, so it was used. If you expand Meeting #1 to overlap with Meeting #3, it will be sorted out as you expected to see, because no free space available at all, so events will be sorted using that customSorter without any improvements.
It is described in the docs more or less:
https://bryntum.com/docs/scheduler/#Scheduler/view/mixin/SchedulerEventRendering#config-horizontalEventSorterFn
Override this method to provide a custom sort function to sort any overlapping events.
All the best,
Alex
Hi Alex,
As I understood, horizontalEventSorterFn result is not reflected on the view for "free space optimization" purposes. I think there should be a flag to control this.
From the docs, we were expecting that the events would be laid out from top to bottom according to a property, ignoring free space.
Is there a workaround?
Not out of the box.
We implemented that logic to keep the space as much as it possible and that's default behaviour (stack) together with 2 more available modes (pack and overlap), as you see in example.
You could try to patch HorizontalLayoutStack class and try to implement something you need, as well as hire us to implement it, check https://www.bryntum.com/services/ .
Btw, from 4.3.0 version it will be supported in SchedulerPro with a new demo to show its power. New feature called custom layouts.
All the best,
Alex
Hello.
This is expected behavior. As Alex explained above, when our layouts position events in the row they account for two factors: sort order (which is affected by horizontal sorter fn) and best fit, which is a primary factor. Best fitting event is an event that is placed after current event by sorter function and starts after current event end date.
If you're using scheduler pro it should be very easy to customize this layout as you like: https://bryntum.com/docs/scheduler-pro/api/SchedulerPro/eventlayout/ProHorizontalLayout#manual-event-layout
If you're using regular scheduler, you can try overriding findClosestSuccessor. Please check this thread with the example: viewtopic.php?f=44&t=17842&p=88349&hilit=findClosestSuccessor#p88349
Thank you for the explanation.
I've followed the thread but could not import the HorizontalLayoutStack using the
import HorizontalLayoutStack from "@bryntum/scheduler/source/lib/Scheduler/eventlayout/HorizontalLayoutStack.js";
This returns the error:
./node_modules/@bryntum/scheduler/source/lib/Core/Base.js 22:29
Module parse failed: Unexpected token (22:29)
File was processed with these loaders:
* ./node_modules/@angular-devkit/build-angular/src/babel/webpack-loader.js
* ./node_modules/@ngtools/webpack/src/ivy/index.js
Any advice on this?
That is where we use optional chaining: this.super?.getInherited. Given you're facing this issue first time, I conclude you were using a bundle previously. In bundle we do not export layout classes, but some users found their way around: viewtopic.php?f=51&t=18533&p=91539&hilit=findClosestSuccessor#p91539
Of course you still can import from sources, which would give you full control over the source code. The downside is that you couldn't use @bryntum/scheduler-angular package, and you'll have to configure angular to understand that our source code use latest es 6 features like optional chaining, object spread, nullish coalescence and many more.