在调度程序渲染后动态设置 resourceOrder

Posted 2023-02-19

【中文标题】在调度程序渲染后动态设置 resourceOrder

【英文标题】：Set resourceOrder dynamically after the scheduler was rendered

【发布时间】：2017-11-07 22:56:06

【问题描述】：

我在 Angular 1.5 应用程序中使用 fullCalendar 调度程序。

我将它包装到一个指令中，并且在指令中我有一个包含所有属性的配置对象

var calendarConfig = 
  schedulerLicenseKey: '----------------------------',
  resources: function (callback) 
    scope.getResources()(callback);
  ,
  resourceColumns: [
    
      labelText: 'Name',
      field: 'name'
    ,
    
      labelText: 'Id',
      field: 'id',
      width: "85px"
    
  ],
  resourceOrder: "name",
  defaultView: "timelineMonth",
  resourceLabelText: "Test",
  resourceAreaWidth: "17%",
  aspectRatio: '100%',
  header: 
    left: 'reorderBtn',
    center: 'title',
    right: 'prev next'
  ,
  customButtons: 
    sortName: 
      text: 'reorderBtn',
      click: function (oEvent) 
        ---------- how to perform the reordering inside here ? ----
      
    
  ,
  eventClick: eventClick,
  dayClick: dayClick,
  viewRender: viewRender,
  weekNumbers: true,
;

我注意到调度程序有一个名为“resourceOrder”的属性，它在初始化时效果很好。

我的用例是当我按下按钮时，我想查看按名称降序排列的资源。

我尝试使用

$(element).fullCalendar('getView').options.resourceOrder = "-name"
$(element).fullCalendar('render')

但它不起作用。

我可以手动对指令之外的资源进行排序，然后将排序后的资源重新设置为源，但我想避免这种情况并利用调度程序提供的好属性“resourceOrder”。

有什么想法吗？或者关于如何一次按一列对资源进行排序的任何最佳实践？

【参考方案1】：

您可以使用 fullCalendar setters and getters 动态设置或获取 fullCalendar 选项。

在你的情况下：

$('#calendar').fullCalendar('option', 'resourceOrder', '-name');

【讨论】：

效果很好。我现在可以删除解决方法！ :D 非常感谢！！

【参考方案2】：

适用于 FullCalendar v5.0+

calendar.setOption('resourceOrder', '-name')

【参考方案3】：

在 Angular2+ 和 FullCalendar5

resourceOrder 的默认值为：'id, title'。覆盖默认值

calendarOptions: CalendarOptions = 
  height: "500px",
  resourceOrder: 'type1', // Here ...
  // resourceOrder: '-type1', // If prefixed with a minus sign like '-type1', the ordering will be descending.
  //resourceOrder: 'type1,type2', //  Compound ordering criteria can be specified as a single string separated by commas.
  resources: [
    
      id: 'A',
      title: 'Resource A',
      type1: 10,
      type2: 55
    ,
    
      id: 'B',
      title: 'Resource B',
      type1: 12,
      type2: 60
    ,
  ],
  ...