Fullcalendar v4 - 仅将特定父资源设置为折叠

Question

我正在 Fullcalendar v4 上使用时间线视图。我有 3 个父资源，每个资源都有多个子资源。因为只鼓励使用 3 个父资源中的 1 个，所以我想将其他 2 个父资源设置为在初始视图中折叠。

我找到了这个设置，它将所有父资源设置为折叠。但它不允许我将每个父资源设置为展开或折叠。 https://fullcalendar.io/docs/resourcesInitialExpanded

我能实现我的目标吗？

Answer 1

根据您的资源结构，这可以通过组合batchRendering和扩展日历API来完成。

我使用了平面资源数组结构而不是分组（resourceAreaColumns/resourceGroupField），因此每个顶级（折叠）资源都有一个唯一的 ID（也可以使用嵌套数组结构来完成）。

resources: [
{ id: 'a', title: 'Room A' },
{ id: 'a1', parentId: 'a',  title: 'Room A1'  },
{ id: 'b', title: 'Room B' },
{ id: 'b1', parentId: 'b',  title: 'Room B1'  },
{ id: 'c', title: 'Room C' },
{ id: 'c1', parentId: 'c',  title: 'Room C1'  }
]

接下来，我使用内部调度机制通过资源 ID 扩展资源的函数扩展了日历 Api。

calendar.expandResourceById = function(resourceId, expanded) {
this.dispatch({
    type: 'SET_RESOURCE_ENTITY_EXPANDED',
    id: resourceId,
    isExpanded: expanded,
});
}

最后，利用批量渲染的能力将重新渲染延迟到最后一个操作。

calendar.batchRendering(function() {
   calendar.expandResourceById('c', true);
});

完整演示可在 CodePen

获取