jquery - 完整日历中的resourceGroupField在 Angular 4中不起作用

Question

我已经在 Angular 4 中实现了完整的日历调度程序。我引用此链接 https://fullcalendar.io/ 。完整日历需要实现资源分组，但它不适合我。

Package.json

{
  "name": "demo6",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^6.0.3",
    "@angular/common": "^6.0.3",
    "@angular/compiler": "^6.0.3",
    "@angular/core": "^6.0.3",
    "@angular/forms": "^6.0.3",
    "@angular/http": "^6.0.3",
    "@angular/platform-browser": "^6.0.3",
    "@angular/platform-browser-dynamic": "^6.0.3",
    "@angular/router": "^6.0.3",
    "@types/jqueryui": "^1.12.2",
    "angular-draggable": "^1.0.1",
    "core-js": "^2.5.4",
    "fullcalendar": "^3.9.0",
    "fullcalendar-scheduler": "^1.9.4",
    "jquery": "^3.3.1",
    "jquery-ui-dist": "^1.12.1",
    "moment": "^2.22.2",
    "rxjs": "^6.0.0",
    "zone.js": "^0.8.26"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.6.8",
    "@angular/cli": "~6.0.8",
    "@angular/compiler-cli": "^6.0.3",
    "@angular/language-service": "^6.0.3",
    "@types/jasmine": "~2.8.6",
    "@types/jasminewd2": "~2.0.3",
    "@types/jquery": "^3.3.0",
    "@types/node": "~8.9.4",
    "awesome-typescript-loader": "^5.2.0",
    "codelyzer": "~4.2.1",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "jqueryui": "^1.11.1",
    "karma": "~1.7.1",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.0",
    "karma-jasmine": "~1.1.1",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.3.0",
    "source-map-loader": "^0.2.3",
    "ts-node": "~5.0.1",
    "tslint": "~5.9.1",
    "typescript": "^2.7.2",
    "webpack": "^4.16.0"
  }
}

这是我尝试过的代码。

`让containerEl:JQuery = $('#calendar');

        containerEl.fullCalendar({
            schedulerLicenseKey: 'CC-Attribution-NonCommercial-NoDerivatives',
            editable: true,
            droppable: true,
            aspectRatio: 1.2,
            scrollTime: '06:00',
            header: {
                left: 'today prev,next',
                center: 'title',
                right: 'timelineDay,agendaWeek,month'
            },
            defaultView: 'timelineDay',
            resourceGroupField: 'jobnum',
            resourceLabelText: 'Jobs',                              
            resources: [
                {}
            ],
            events: [

            ],
            drop: function (date) {
                if ($('#drop-remove').is(':checked')) {
                    $(this).remove();
                }
            },
            eventReceive: function (event) {
                console.log('eventReceive', event);
                self.getEvent();
            },
            eventDrop: function (event) {
                console.log('eventDrop', event);
            }
        });`

当我使用 jobnum 作为分组资源的属性名称时，会出现错误

ERROR in src/app/app.component.ts(39,29): error TS2345: Types of property 'resources' are incompatible. Type '{ jobnum: string; }[]' is not assignable to type 'ResourceSourceInput'. Type '{ jobnum: string; }[]' is not assignable to type 'ResourceFunction'. Type '{ jobnum: string; }[]' provides no match for the signature '(callback: ResourceFunctionCallback, start: Moment, end: Moment, timezone: string): void'.

任何人请帮助我。提前致谢。

Answer 1

您需要像下面的代码一样更改初始化。您需要使用<any>

(<any>$('#calendar')).fullCalendar({
...
...
});