在MVC应用程序中使用Fullcalendar 4.0.0-alpha.2的问题

时间:2018-11-16 10:41:04

标签: angular visual-studio-2017 fullcalendar primeng

加载时我的组件遇到以下错误;

  

错误TypeError:this.schedule.fullCalendar不是函数

我正在将Visual Studio 2017与Angular 6,PrimNG和Fullcalendar 4.0.0.-alpha2一起使用

这是我的配置(我没有使用angular-cli):

package.json

 {
  "name": "testcalendar",
  "version": "1.0.0",
  "dependencies": {
    "@angular/animations": "^6.1.0",
    "@angular/common": "^6.1.0",
    "@angular/compiler": "^6.1.0",
    "@angular/core": "^6.1.0",
    "@angular/forms": "^6.1.0",
    "@angular/http": "^6.1.0",
    "@angular/platform-browser": "^6.1.0",
    "@angular/platform-browser-dynamic": "^6.1.0",
    "@angular/router": "^6.1.0",
    "chart.js": "2.7.1",
    "core-js": "2.5.7",
    "font-awesome": "4.7.0",    
    "intl": "1.2.5",    
    "primeicons": "1.0.0-beta.9",
    "primeng": "6.0.0",
    "quill": "1.1.8",
    "rxjs": "6.2.0",
    "web-animations-js": "2.3.1",
    "zone.js": "0.8.26",     
    "fullcalendar": "4.0.0-alpha.2"
  },
  "devDependencies": {
    "@types/core-js": "^0.9.41",
    "@types/node": "~8.9.4",
    "gulp": "3.9.1",
    "gulp-tsc": "^1.2.5",
    "gulp-typescript": "^3.1.2",
    "rimraf": "^2.5.4",
    "typescript": "~2.9.2"    
   }
 }

system.config.js

(function (global) {
    var map = {
        'app': '/app',
        '@angular': '/node_modules/@angular',
        'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
        'rxjs': '/node_modules/rxjs',
        '@angular/animations/browser': '/node_modules/@angular/animations/bundles/animations-browser.umd.js',
        '@angular/platform-browser/animations': '/node_modules/@angular/platform-browser/bundles/platform-browser-animations.umd.js',
        '@angular/common/http': '/node_modules/@angular/common/bundles/common-http.umd.js',  
        'primeng': '/node_modules/primeng',    
        'fullcalendar': "/node_modules/fullcalendar/dist/fullcalendar.min.js"

    },
        packages = {
            'app': { main: './main.js', defaultExtension: 'js' },
            'angular2-in-memory-web-api': { main: './index.js', defaultExtension: 'js' },            
            'rxjs': { main: 'index.js', defaultExtension: 'js' },
            'rxjs/operators': { main: 'index.js', defaultExtension: 'js' },
            'primeng': { defaultExtension: 'js' }
        },
        ngPackageNames = [
            'animations',
            'common',
            'compiler',
            'core',
            'http',
            'platform-browser',
            'platform-browser-dynamic',
            'router',
            'forms'
        ];

    function packUmd(pkgName) { packages['@angular/' + pkgName] = { main: '/bundles/' + pkgName + '.umd.min.js', defaultExtension: 'js' } }

    ngPackageNames.forEach(packUmd);    

    var config = {
        map: map,
        packages: packages
    };

    System.config(config);

})(this);

我的组件:

import { Component, OnInit } from '@angular/core';
import { ScheduleModule } from 'primeng/schedule';

import { Calendar } from 'fullcalendar';

@Component({
    selector: 'calendar',
    templateUrl: '/app/Dashboard/calendar.component.html'
})
export class MyCalendarComponent implements OnInit{

    events: any[];

    ngOnInit() {
        this.events = [
            {
                "title": "All Day Event",
                "start": "2016-01-01"
            },
            {
                "title": "Long Event",
                "start": "2016-01-07",
                "end": "2016-01-10"
            },
            {
                "title": "Repeating Event",
                "start": "2016-01-09T16:00:00"
            },
            {
                "title": "Repeating Event",
                "start": "2016-01-16T16:00:00"
            },
            {
                "title": "Conference",
                "start": "2016-01-11",
                "end": "2016-01-13"
            }
        ];
    }
}

组件HTML:

<p-schedule [events]="events"></p-schedule>

0 个答案:

没有答案