FullCalendar error when using PrimeNG Schedule

Question

I am on Angular 2.4 and trying to use PrimeNG schedule, but I am getting errors. If you go to the following link, you will see an example of a schedule and documentation, if you scroll down the page:

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

I followed this documentation (with the only difference being that I changed "MyModel" to "CalendarComponent"), but got the following error:

The error in calendar.component.html: 0: 0 caused by: this.schedule.fullCalendar is not a function

Is it because I need to install and import FullCalendar? I figured it could be so, but when I tried to import it, I got the following 404:

https: // localhost: 44301 / node_modules / fullcalendar / fullcalendar 404 ()

Here is my code after trying to import 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

To make p-scheduler work, you must enable jquery and the moment and determine their types in your project:

A configuration that works for me. Using 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';

angular-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"
  ],

Component It is defined similarly to yours.

Answer 2

Try putting this on : main.ts

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

Answer 3

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>