完整日历中的resourceGroupField在角度4中不起作用

时间:2018-07-16 05:26:21

标签: jquery angular fullcalendar

我已经在angular 4.i中实现了完整的日历调度程序,请参阅此链接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"
  }
}

这是我尝试过的代码。

`let 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作为资源分组的属性名称时,会给我错误

  src / app / app.component.ts(39,29)中的

ERROR:错误TS2345:类型   属性“资源”不兼容。输入'{jobnum:string; } []'是   不可分配给“ ResourceSourceInput”类型。输入'{jobnum:string;   } []'不可分配给'ResourceFunction'类型。输入'{jobnum:   串; } []'不提供签名'(回调:   ResourceFunctionCallback,开始:时刻,结束:时刻,时区:   字符串):无效”。

任何人请帮助我。预先感谢。

1 个答案:

答案 0 :(得分:2)

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

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