eventOrder gets affected by startTime and duration - Full Calendar

Question

I'm using latest version of Full Calendar (v5) and need to group events based on skillPriority only. But when i specify

      eventOrder={['SkillPriority']}
      resources={Resources}
      resourceOrder={['unitPriority', 'areaPriority']}

Its getting sorted but, the startTime and duration is affecting the order. is there anyway to change this behaviour ???

Green events are coming along with blue. Both should come separate.

Talking about vertical placement not the time

Please see the resources/events i use.

export const Resources = [
  {
    id: '1',
    title: 'Unit A',
    unitName: 'Unit A',
    unitId: 1,
    unitPriority: 2,
    children: [
      { id: '11', title: 'UnitArea 11', areaPriority: 2 },
      { id: '12', title: 'UnitArea 12', areaPriority: 1 },
    ],
  },
  {
    id: '2',
    title: 'Unit B',
    unitName: 'Unit B',
    unitId: 2,
    unitPriority: 1,
    children: [
      { id: '21', title: 'UnitArea 21', areaPriority: 2 },
      { id: '22', title: 'UnitArea 22', areaPriority: 1 },
    ],
  },
];


    export const Events = [
  {
    id: '9991',
    resourceId: '11',
    title: 'event 1 - Area 11 - Skill 2',
    start: '2020-09-10 02:00:00',
    end: '2020-09-10 09:00:00',
    SkillPriority: '2',
    backgroundColor: 'green',
    borderColor: 'green',
  },

  {
    id: '9992',
    resourceId: '11',
    title: 'event 1 - Area 11 - Skill 2',
    start: '2020-09-09 07:00:00',
    end: '2020-09-09 09:00:00',
    SkillPriority: '2',
    backgroundColor: 'green',
    borderColor: 'green',
  },
  {
    id: '9993',
    resourceId: '11',
    title: 'event 6 - Area 11 - Skill 1',
    start: '2020-09-09 06:00:00',
    end: '2020-09-09 07:00:00',
    SkillPriority: '1',
  },
  {
    id: '9994',
    resourceId: '11',
    title: 'event 7 - Area 11 - Skill 2',
    start: '2020-09-09 06:00:00',
    end: '2020-09-09 12:00:00',
    scheduleTitle: 'dummy tile test',
    SkillPriority: '2',
    backgroundColor: 'green',
    borderColor: 'green',
  },
  {
    id: '9995',
    resourceId: '11',
    title: 'event 8 - Area 11 - Skill 2',
    start: '2020-09-09 06:00:00',
    end: '2020-09-09 07:00:00',
    SkillPriority: '2',
    backgroundColor: 'green',
    borderColor: 'green',
  },
  {
    id: '9996',
    resourceId: '12',
    title: 'event 3 - Area 12 - Skill 1',
    start: '2020-09-09 07:00:00',
    end: '2020-09-09 09:00:00',
    SkillPriority: '1',
  },
  {
    id: '9997',
    resourceId: '22',
    title: 'event 4 - Area 22 - Skill 1',
    start: '2020-09-09 08:00:00',
    end: '2020-09-09 10:00:00',
    SkillPriority: '1',
  },
  {
    id: '9998',
    resourceId: '21',
    title: 'event 5 - Area 21 - Skill 1',
    start: '2020-09-09 09:00:00',
    end: '2020-09-09 11:00:00',
    SkillPriority: '1',
  },
  {
    id: '9999',
    resourceId: '22',
    title: 'event 2 - Area 22 - Skill 1',
    start: '2020-09-09 07:00:00',
    end: '2020-09-09 09:00:00',
    SkillPriority: '1',
  },
  {
    id: '10000',
    resourceId: '12',
    title: 'event 9 - Area 12 - Skill 1',
    start: '2020-09-09 07:00:00',
    end: '2020-09-09 09:00:00',
    SkillPriority: '1',
  },
  {
    id: '10001',
    resourceId: '11',
    title: 'event 10 - Area 11 - Skill 1',
    start: '2020-09-09 06:00:00',
    end: '2020-09-09 06:15:00',
    SkillPriority: '1',
  },
  {
    id: '10002',
    resourceId: '11',
    title: 'event 11 - Area 11 - Skill 2',
    start: '2020-09-09 06:15:00',
    end: '2020-09-09 06:30:00',
    SkillPriority: '2',
    backgroundColor: 'green',
    borderColor: 'green',
  },
  {
    id: '10003',
    resourceId: '11',
    title: 'event 12 - Area 11 - Skill 2',
    start: '2020-09-09 06:00:00',
    end: '2020-09-09 12:00:00',
    SkillPriority: '1',
  },
  {
    id: '10004',
    resourceId: '11',
    title: 'event 13 - Area 11 - Skill 1',
    start: '2020-09-09 06:00:00',
    end: '2020-09-09 06:30:00',
    SkillPriority: '2',
    backgroundColor: 'green',
    borderColor: 'green',
  },
];

You could ask for clarification by raising a documentation issue on the fullCalendar GitHub, but AFAIK the eventOrder in a view which is time-specific (such as TimeGrid or Timeline) only affects events whose start time and duration are otherwise equal. If it literally just sorted them by SkillPriority, where exactly on the timeline would you expect them to appear? It would be very confusing because events with a specific time might appear on the wrong time, because they're trying to be shown before an event with a different priority. — ADyson, Sep 09 '20 at 19:40
You weren't very specific, but I assume you're complaining about event 11? That starts 15 minutes after most of the other events, so it's positioned correctly. — ADyson, Sep 09 '20 at 19:44
@ADyson i tried, but we need a sample and everything to create an issue, otherwise it gets closed by the bot. Also i need to group events based on SkillPriority. based on teh data greena nd blue should remain seperate — Victor, Sep 10 '20 at 05:46
@ADyson is there a way to make sure event1 and event 11 appears after event 12 — Victor, Sep 10 '20 at 05:48
"we need a sample and everything"...why is that a problem? you've already got enough data here for that. — ADyson, Sep 10 '20 at 08:12
"is there a way to make sure event1 and event 11 appears after event 12"...only if they're all starting at the same time. Like I said before, where exactly would you want them to appear? event1 starts at 7am. So it needs to be in the 7am box. It wouldn't make sense to put it with the 6am events. So what exactly do you mean by putting it "after" event12? Perhaps draw us a sample of what the calendar would look like if it worked the way you want. — ADyson, Sep 10 '20 at 08:13
@ADyson i'm talking about vertical arrangement not the time. event 6 , 10, 12 will appear first then the other events(green ones). — Victor, Sep 10 '20 at 08:26
Event 6, Event 10, Event 12 (Blue ones) and Green ones as another set inside the resource. — Victor, Sep 10 '20 at 08:28
It'll only put them further down if there are other events above them at that start time. the time slots are separate groupings. Otherwise it just starts at the top and uses the space available. As I mentioned at the start, event ordering on a time-aware view only works within a specific start time. There's no way around that, unless you want to start altering the internal event-rendering engine of fullCalendar. I'd agree though, that the documentation is quite unclear on that point. (It was clearer in earlier versions, I think). — ADyson, Sep 10 '20 at 08:43
BTW as a workaround, if you want to group them by this priority, in a resource-timeline view you could quite easily achieve the desired visual effect by simply putting them into two separate resources - e.g. "UnitArea 11 - Skill 1" and "UnitArea 11 - Skill 2". — ADyson, Sep 10 '20 at 08:44
@ADyson https://en.it1352.com/article/6d4c3a24282544c49ae1c54fca87f3a6.html is this related to the same thing? do i need to make extensive changes in the lib .. — Victor, Sep 10 '20 at 09:49
It's somewhat related, but, since it refers to fullCalendar v3, the code used is unlikely to be helpful. I'm not familiar with the source myself, but I do know from the various blog posts and upgrade guides that significant re-writes to the internal code have taken place in subsequent versions. So I strongly doubt you could simply copy and paste and use in v5. — ADyson, Sep 10 '20 at 09:55
Anyway, making arbitrary changes to the source is a bad idea because it risks leaves you incompatible with upgrades and bug fixes. Better to get it implemented as a proper feature and then you can specify the desired behaviour through the calendar options. If you feel strongly enough about it you could always contribute the code yourself - https://fullcalendar.io/contributing — ADyson, Sep 10 '20 at 09:57
@ADyson can u take a look at this https://stackoverflow.com/questions/62753149/full-calendar-drag-and-drop-customisation its something i have been looking for months. I need to disable drag and drop for changing time in scheduler (User shouldn't even be able to start dragging horizontally) — Victor, Sep 10 '20 at 14:42
I saw one that a long time ago. The answer which is already there is the best you can get. Unless you completely disable editing (by setting "editable=false") then the user will always be able to start dragging. But then you wouldn't be able to drag between resources either. Does it really matter that much? If they drag to the wrong place it will get rejected...so what? They'll soon learn not to do it. — ADyson, Sep 10 '20 at 14:48
As for the "smooth" drag and drop, I suspect the reason it snaps to a position is somewhat related to what we've been discussing here - vertical positioning within a resource is determined by the code, not the user. It snaps to the next available space (or the slot where it belongs, depending on the eventOrder). The user can't just drop it wherever they like. — ADyson, Sep 10 '20 at 14:50

eventOrder gets affected by startTime and duration - Full Calendar

0 Answers0