I'm looking to add resource columns to a spfx fullCalendar app.
Following the documentation I tried to replicate what is shown in the demo here:
https://fullcalendar.io/docs/resourceColumns
https://fullcalendar.io/docs/resourceColumns-demo.
The demo seems to use resource columns to add an additional field for "occupancy"
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 },
]
I have implemented the same piece of code however I receive an error.
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;
}
}
It seems that I need to add an additional property for occupancy, although I cant find anything in the demo which shows how this is done.
