如何添加其他资源列 full日历计划程序

Question

我希望将资源列添加到spfx fullCalendar应用程序中。

按照文档，我尝试在此处复制演示中显示的内容：

https://fullcalendar.io/docs/resourceColumns

https://fullcalendar.io/docs/resourceColumns-demo。

该演示似乎使用资源列为"占用"添加附加字段

resourceColumns: [
        {
          labelText: 'Room',
          field: 'title'
        },
        {
          labelText: 'Occupancy',
          field: 'occupancy'
        }
      ],
      resources: [
        { id: 'a', title: 'Auditorium A', occupancy: 40 },
        { id: 'b', title: 'Auditorium B', occupancy: 60 },
        { id: 'c', title: 'Auditorium C', occupancy: 40 },
        { id: 'd', title: 'Auditorium D', occupancy: 40 },
      ]

我已经实现了相同的代码段，但是我收到错误。

Type '{ id: string; title: string; occupancy: number; }[]' is not assignable to type 'ResourceSourceInput'.
  Type '{ id: string; title: string; occupancy: number; }[]' is not assignable to type 'ResourceInput[]'.
    Type '{ id: string; title: string; occupancy: number; }' is not assignable to type 'ResourceInput'.
      Object literal may only specify known properties, and 'occupancy' does not exist in type 'ResourceInput'.

declare module 'fullcalendar-scheduler/src/types/input-types' {
    /// <reference types="jquery" />
    import * as moment from 'moment';
    import { BusinessHoursInput, EventOptionsBase } from 'fullcalendar';
    export interface ResourceInput {
        id?: string;
        title?: string;
        eventColor?: string;
        eventBackgroundColor?: string;
        eventBorderColor?: string;
        eventTextColor?: string;
        eventClassName?: string | string[];
        businessHours?: BusinessHoursInput;
        children?: ResourceInput[];
        parentId?: string;
        parent?: ResourceInput;
    }
    export interface ResourceComplexInput extends EventOptionsBase, JQueryAjaxSettings {
    }
    export type ResourceFunctionCallback = (resources: ResourceInput[]) => void;
    export type ResourceFunction = (callback: ResourceFunctionCallback, start: moment.Moment, end: moment.Moment, timezone: string) => void;
    export type ResourceSourceInput = ResourceInput[] | ResourceFunction | ResourceComplexInput; module 'fullcalendar/src/types/input-types' {
        interface DropInfo {
            resourceId?: string;
        }
        interface OptionsInputBase {
            schedulerLicenseKey?: string;
            resourceAreaWidth?: number;
            resourceLabelText?: string;
            resourceColumns?: any;
            resources?: ResourceSourceInput;
            refetchResourcesOnNavigate?: boolean;
            groupByResource?: boolean;
            groupByDateAndResource?: boolean;
            resourceOrder?: string;
            resourceGroupField?: string;
            resourceGroupText?: (groupValue: string) => string;
            resourcesInitiallyExpanded?: boolean;
            filterResourcesWithEvents?: boolean;
            resourceText?: (resource: ResourceInput) => string;
            resourceRender?: (resource: ResourceInput, labelTds: JQuery, bodyTds: JQuery) => void;
            eventResourceEditable?: boolean;
        }
    }

似乎我需要添加一个额外的占用属性，尽管我在演示中找不到任何显示如何完成此操作的内容。

Answer 1

添加扩展此接口的其他类型：

type Extended = ResourceInput & {occupancy: number}