Question

我在使用Angular 2.4并尝试使用PrimeNG的时间表，但我遇到了错误。如果您转到以下链接，您将看到计划的示例，如果向下滚动页面，还会看到文档：

http://www.primefaces.org/primeng/#/schedule

我遵循了该文档（唯一的区别是我将“MyModel”更改为“CalendarComponent”），但是出现了以下错误：

calendar.component.html：0：0引起的错误： this.schedule.fullCalendar不是函数

这是因为我需要安装和导入FullCalendar吗？我想可能是这种情况，但当我尝试导入它时，我得到了以下404：

https://localhost:44301/node_modules/fullcalendar/fullcalendar 404（）

尝试导入FullCalendar后，这是我的代码...

app.module.ts：

...
import { FullCalendar }      from 'fullcalendar/fullcalendar';
import { ScheduleModule }    from 'primeng/primeng';
import { CalendarComponent } from './calendar.component';
...
imports: [
    ...
    FullCalendar,
    ScheduleModule
],
declarations: [
    ...
    CalendarComponent
],
...

calendar.component.ts：

...
export class CalendarComponent implements OnInit {
    events: any[];
    headerConfig: any;

    public constructor(
        ...
    ) { }

    ngOnInit(): void {
        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"
            }
        ];
        this.headerConfig = {
            left: 'prev,next today',
            center: 'title',
            right: 'month,agendaWeek,agendaDay'
        };        
    }


    handleEventClick(e:any) {
        //e.event = Selected event
        //e.jsEvent = Browser click event
        //e.view = Current view object
        console.log('Selected event: ' + e.event);
        console.log('Browser click event: ' + e.jsEvent);
        console.log('Current view object: ' + e.view);
    }       
}

calendar.component.html：

<p-schedule [events]="events" [header]="headerConfig" (onEventClick)="handleEventClick($event)"></p-schedule>

systemjs.config.js：

map: {
    ...
    'fullcalendar': 'npm:fullcalendar',
    'primeng':      'npm:primeng'
},

的package.json：

"dependencies": {
    ...
    "fullcalendar": "^3.1.0",
    "primeng": "^1.1.4",
  },

Answer 1

为了使p调度程序工作，你必须在项目中包含jquery和moment及其类型定义：

适合我的配置。使用Angular CLI

<强> package.son `

> "dependencies": {
>     "fullcalendar": "^3.2.0",
>     "jquery": "^3.1.1",
>     "moment": "^2.17.1",
>     "primeng": "2.0.1",  },
> 
>   "devDependencies": {
>     "@angular/cli": "1.0.0-beta.32.3",
>     "@angular/compiler-cli": "^2.3.1",
>     "@types/fullcalendar": "^2.7.37",
>     "@types/jasmine": "2.5.38",
>     "@types/jquery": "^2.0.40",
>     "@types/moment": "^2.13.0", }

`

<强> scheduler.module.ts

`
import 'jquery';
import 'moment';
import 'fullcalendar';

import { ScheduleModule } from 'primeng/primeng';

<强>角-CLI，JSON

      "styles": [
    "styles.css",
    "../node_modules/primeng/resources/themes/omega/theme.css",
        "../node_modules/primeng/resources/primeng.min.css",
    "../node_modules/fullcalendar/dist/fullcalendar.min.css",
    "../node_modules/font-awesome/css/font-awesome.css"
  ],
  "scripts": [
    "../node_modules/jquery/dist/jquery.min.js",
    "../node_modules/moment/min/moment.min.js",     
    "../node_modules/fullcalendar/dist/fullcalendar.min.js"
  ],

组件定义类似于您的。

Answer 2

我正在使用primeng api和fullcalendar api

app.module.ts

    import * as jQuery from 'jquery';
    (window as any).jQuery = (window as any).$ = jQuery;
    import { MomentModule } from 'angular2-moment';
    import 'fullcalendar';
    import 'fullcalendar-scheduler';

    @NgModule({
    declarations:[ TriggerResizeDirective,....],
    imports: [ ScheduleModule,MomentModule...],..

<强> Calendar.component.ts

    import * as moment from 'moment';
    import { Schedule } from 'primeng/primeng';
    import * as $ from 'jquery';
    export class DashboardComponent implements OnInit {
    public  heading: any;
    public  events: any[];

    ngOnInit() {
    this.events = [
    {
      "title": "All Day Event",
      "start": "2018-03-01"
    },
    {
      "title": "Long Event",
      "start": "2016-01-07",
      "end": "2018-02-10"
    }];

<强> dashCalendar.component.html

      <p-schedule id="calendar" ></p-schedule>

以下链接可以帮助很多

enter link description here

Answer 3

尝试将其放在 main.ts ：

上

import fullcalendar from 'fullcalendar';
window['fullcalendar'] = fullcalendar;

使用PrimeNG Schedule时出现FullCalendar错误

3 个答案: