FullCalendar resources 渲染顺序不按数据顺序排列 怎么处理?

 参考官网:

resourceOrder - Docs | FullCalendarDetermines the ordering of the resource list.https://fullcalendar.io/docs/resourceOrder

fullCalendar 的 resourceTimeGridDay 视图会按照以下顺序处理资源:

  1. 首先,按照指定的 resources 数组中的顺序显示资源。
  2. 其次,对于每个资源,将其与事件进行匹配并将其显示在对应的时间轴上。
  3. 如果两个或多个事件在同一时间段内发生并且它们都属于同一个资源,则它们将按照它们在 events 数组中出现的顺序进行排列。

总体而言,resourceTimeGridDay 视图会先根据资源顺序进行分组,然后按照每个资源中事件的开始时间进行排序。如果两个事件在同一时间段内发生并且它们都属于同一个资源,则它们将按照它们在 events 数组中出现的顺序进行排列。

resourceOrder 是一个排序函数,可以根据您的需求自定义。该函数接受两个参数,分别是 resourceA 和 resourceB,表示两个资源。该函数需要返回一个数字,如果返回值小于 0,则 resourceA 将排在 resourceB 之前;如果返回值大于 0,则 resourceA 将排在 resourceB 之后;如果返回值等于 0,则两个资源的顺序不变。

写法:
 

var calendar = new Calendar(calendarEl, {
  resourceOrder: 'index',
  resources: [
    {
      id: 'A',
      title: 'Resource A',
      index: 1,
    },
    {
      id: 'B',
      title: 'Resource B',
      index: 3,
    },
    {
      id: 'C',
      title: 'Resource C',
      index: 2,
    }
  ]
});

猜你喜欢

转载自blog.csdn.net/m0_53574149/article/details/129196339