Custom event sorting possible?

[Julian Wandel]

Hello,

Is it possible to custom sort the events in schedule element? I want specific events to be rendered on top...

Thanks in advance,

Julian

[Ravikumar Venkatesan]

Hi Julian,

Greetings from Syncfusion support.

We have validated your requirement “Is it possible to custom sort the events in schedule element?” at our end. You can sort the appointments with help of the sortComparer property of the Schedule eventSettings. For the same, we have prepared a sample for your reference. Refer to the shared UG link for more details.

Sample: https://stackblitz.com/edit/ej2-angular-schedule-sort-appointments-based-priority?file=app.component.ts

UG: https://ej2.syncfusion.com/angular/documentation/schedule/appointments/#customize-the-order-of-the-overlapping-events

API: https://ej2.syncfusion.com/angular/documentation/api/schedule/eventSettingsModel/#sortcomparer

Kindly try the shared sample and let us know if you need any further assistance on this.

Regards,

Ravikumar Venkatesan

If this post is helpful, kindly consider accepting it as the solution so that other members can locate it more quickly.

[Julian Wandel]

Hi Ravikumar,

thank you for replying.

I've tried the shared sample and also implemented it with my own logic into my project:

public comparerFunc: SortComparerFunction = (args: Record<string, any>[]) => {

args.sort((event1: Record<string, any>, event2: Record<string, any>) => {

if (event1['istEntwurf'] == true && event2['istEntwurf'] == false) {

return 1;

} else if (event1['istEntwurf'] == false && event2['istEntwurf'] == true) {

return -1;

}

return 0;

});

return args;

}

It's working fine, if the appointments are starting at the same day and time:

But I noticed, that the appointments are displayed on top of each other, if the appointment with lower priorization is starting before the other one:

The same behaviour is also appearing in your provided stackblitz example.

Is this considered to be a bug?

Regards,

Julian

[Satheesh Kumar Balasubramanian]

Hi Julian,

 

We have modified the shared sample based on the shared details. But, we are unable to reproduce the problem on our end. Can you kindly share the below details it will help us to provide the solution for your problem earlier?

 

• Share a step by step reproducing steps to reproduce the problem in our shared sample or
• Reproduce the issue in the shared sample and share it with us or
• Share a simple issue replicating the sample if possible.

 

Sample: https://stackblitz.com/edit/ej2-angular-schedule-sort-appointments-based-prio-e1xgtv?file=app.component.ts,app.component.html

Regard,

Satheesh Kumar B

[Julian Wandel]

Hi Satheesh,

these are the steps for you to reproduce the problem in your provided example (same issue appearing in my own project):

1. Event "Rank 2" starts at 9:00 AM and ends at 11:00 AM
2. Event "Rank 1" ​starts at 8:00 AM and ends at 10:00 AM

Hope, you can reproduce the issue on your side. If you need further information, just let me know.

Regards,

Julian Wandel

[Ravikumar Venkatesan]

Hi Julian,

Thanks for the patience.

We have validated your reported query “The appointments are displayed on top of each other, if the appointment with lower priorization is starting before the other one” at our end. We have checked the feasibility to fix your reported scenario at our source end and we regret to let you know that we cannot avoid the overlapping of the appointments if the upcoming appointment is rendered before the previous date appointments rendered while sorting. The overlapping will be handled if the appointments are rendered on the same date. The overlapping happens due to an appointment on August 9, 2022, rendered before the August 8, 2022 appointment on sorting. To render the appointments without overlapping you need to render the previous dates appointments before the upcoming dates appointments.

Sample: https://stackblitz.com/edit/ej2-angular-schedule-appointment-sorting-based-on-priori?file=app.component.ts

Kindly let us know if you need any further assistance on this.

Regards,

Ravikumar Venkatesan

[Julian Wandel]

Hi Ravikumar,

it's been a while, but I'm working again on this issue. I just tried to sort my event array instantly after loading the data. I'm sorting it by the start in descending order. But the same issue still appears.

I've also had a look on your shared stackblitz sample - but your example is not correctly representing the case that I have.

If I set start of "Rank 2" in your example to start before the other one, the same issue is still appearing. Altough the upcoming event is rendered before the previous event.




Edited sample: https://stackblitz.com/edit/ej2-angular-schedule-appointment-sorting-based-on-oy6hud?file=app.component.ts

Please let me know, how I can prevent the overlapping of events based on the edited sample.

Thank you very much.


Regards,

[Ravikumar Venkatesan]

Hi Julian,

Thanks for the update.

We have validated your query “how I can prevent the overlapping of events based on the edited sample” at our end. In your shared scenario the upcoming start time(Subject: “Rank 1”, StartTime: new Date(2022, 7, 10, 8)) appointment is sorted first and the previous start time(Subject: “Rank 2”, StartTime: new Date(2022, 7, 9, 9)) appointment sorted last and it leads to the Rank 1 appointment rendering first and the Rank 2 appointment rendered last and it leads to overlapping as per your shared scenario.

We have checked the feasibility to achieve your reported scenario at our source end and we regret to let you know that we cannot avoid the overlapping of the appointments as per your shared scenario at our source end. So, we can only sort the appointments on the same start date in ascending and descending sort order and for the same, we have prepared a sample for your reference.

Sample: https://stackblitz.com/edit/ej2-angular-schedule-appointment-sorting-based-order-pri?file=app.component.ts

Regards,

Ravikumar Venkatesan