Our powerful JS Calendar component
Hello,
I’m currently using the eventSorter function to sort allDay events in the Calendar based on an event property called priority. I’d like to allow users to drag and drop allDay events within the same day to reorder them, and then call an endpoint to update the priority accordingly.
Could you please advise on the best approach to implement this behavior?
Thank you!
Hey nhinguyen3620,
Thanks for reaching out.
You can implement this by catching the calendar drag/drop finish, recomputing the priority for all-day events on that date, updating the EventStore and then calling your backend. Use the CalendarDrag events (beforeDragMoveEnd / dragMoveEnd) so you can run code when the user drops an all-day event. See the CalendarDrag API: https://bryntum.com/products/calendar/docs/api/Calendar/feature/CalendarDrag
Minimal pattern:
- Listen for the drop (beforeDragMoveEnd if you want to veto/async, or dragMoveEnd after the move).
- Find all all-day events for the target day (filter calendar.eventStore for e.allDay and same day as eventRecord.startDate).
- Sort them using the same logic you use in eventSorter (so UI order = priority order).
- Assign new priority values and commit (eventRecord.priority = newPriority or eventRecord.set('priority', newPriority)).
- Send the updated priorities to your endpoint (batch the changes or send the list).
If you need the exact drag context (to compute the insertion index from the pointer rather than relying on post-drop ordering), please provide a minimal test case with your current eventSorter implementation, and I’ll give a more precise snippet.
Best regards,
Márcio
How to ask for help? Please read our Support Policy
In a DayCellRenderer like CalendarRow (which is the Calendar view used to hold the all day events in a DayView) or MonthView, the event bars' initial order is as specified by the event sorter.
But remember that long running events from previous dates can intrude. Any long running events stay in the slot they started in.
So events for a day will be in order but "around" any intruding events from previous days.
You cannot reorder the events within the cell because there is no correlation between the position and the time, unlike in the main part of the DayView where vertical position correlates exactly with a known time.