AngularFullcalendar-多个资源区域列宽度不同 _编程开发

创始人

2024-10-24 22:33:06

0次

在 Fullcalendar 中，使用 resources 功能可以创建包含多个资源的日历。如果每个资源列的宽度不同，则需要进行自定义设置。

首先，在组件中导入 Fullcalendar 的资源功能：

import { Calendar, ResourceTimeGrid } from '@fullcalendar/angular'; import resourceTimelinePlugin from '@fullcalendar/resource-timeline';

然后，使用以下代码创建资源列：

在 resources 属性中，可以设置每个资源的 id、title、eventColor 和 width。其中，width 属性可以设置每个资源列的宽度（使用百分比）。

在 ng-template 中，可以为每个资源列自定义内容。这里使用 fc-cell-content 类给资源列添加样式，并在内部添加资源标题。

最后，加载资源功能的插件：

export class CalendarComponent implements OnInit { calendarPlugins = [resourceTimelinePlugin]; events = [ // ... ]; // ... }

在组件类中，将 resourceTimelinePlugin 插件添加到 calendarPlugins 数组中即可使用资源功能。

使用以上代码，在 Fullcalendar 中就可以创建包含多个资源列，且每个资源列宽度不同的日历。