Primeng: schedule component is not working

[shalaby]

it gives me this error:
EXCEPTION: TypeError: this.schedule.fullCalendar is not a function

[cagataycivici]

Please use forum for questions, you need to add full calendar to your application.

http://fullcalendar.io/download/

[mmisecius]

I had the same issue - my problem was I had also linked primeui-ng-all.min.js script at index.html which it seems work with a 'local' version of jquery - so although I'd linked jquery , fullcalendar as well the primeui-ng-all.min.js overrode jquery context - which did not know nothing about fullcalendar

[lluisnieto]

So, how did you manage to fix it?

[mmisecius]

simply - primeui-ng-all.min.js had to away - and added all scripts which were needed - let's say

    <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script> 
    <script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-ui-timepicker-addon/1.6.1/jquery-ui-timepicker-addon.min.js"></script>

    <!-- Charts.js -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.3/Chart.bundle.min.js"></script>

    <!-- Schedule -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/moment.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.7.2/fullcalendar.min.js"></script>

[arat3091]

did anyone found the fix ?

[softgandhi]

I am also facing the same issue. :(

[Tarek-Adra]

Yayyy I'm not the only one :P

[softgandhi]

Hi,
I got it working by using the following:

In module.ts file:

import * as jQuery from 'jquery';
import { AutoCompleteModule, ScheduleModule, DialogModule, CalendarModule, DropdownModule } from 'primeng/primeng';
(window as any).jQuery = (window as any).$ = jQuery; // This is needed to resolve issue.

don't forget to import modules in @NgModule

In my Component.ts file
import 'fullcalendar';

My library versions (in package.json):

"dependencies": {
    "@angular/animations": "^4.0.1",
    "@angular/common": "^4.0.0",
    "@angular/compiler": "^4.0.0",
    "@angular/core": "^4.0.0",
    "@angular/forms": "^4.0.0",
    "@angular/http": "^4.0.0",
    "@angular/platform-browser": "^4.0.0",
    "@angular/platform-browser-dynamic": "^4.0.0",
    "@angular/router": "^4.0.0",
    "bootstrap": "^4.0.0-alpha.2",
    "core-js": "^2.4.1",
    "font-awesome": "^4.7.0",
    "fullcalendar": "^3.3.0",
    "jquery": "^3.1.1",
    "moment": "^2.18.1",
    "primeng": "^4.0.0-rc.2",
    "primeui": "^4.1.15",
    "reflect-metadata": "^0.1.9",
    "rxjs": "^5.1.0",
    "systemjs": "^0.20.2",
    "ts-helpers": "^1.1.2",
    "zone.js": "^0.8.4"
  },
  "devDependencies": {
    "@angular/cli": "1.0.0",
...

Hope this will help other people out here.

[Tarek-Adra]

Thanks,
I got it working by installing fullcalendar

npm install fullcalendar --save

and in angular-cli.json

"styles": [
         ...
        "../node_modules/fullcalendar/dist/fullcalendar.min.css"
      ],
      "scripts": [
        ...
        "../node_modules/moment/min/moment.min.js",
        "../node_modules/fullcalendar/dist/fullcalendar.min.js"
      ],
...

[syatin003]

thanks @mmisecius .
Your solution solved my issue.

[AntonSelin]

The primeng schedule has dependency on the fullcalendar. The fullcalendar in turn has dependencies on moment.js and on jquery. The primeng requires all this dependencies to be globally available. If you use ng-cli you can do the follwing:

1. Open the command prompt and install the fullcalendar (npm install --save fullcalendar). The other dependencies will be installed automatically.
2. Go to the .angular-cli.json and reference this dependencies in the scripts section:

"scripts": [
        "../node_modules/jquery/dist/jquery.min.js",
        "../node_modules/moment/min/moment.min.js",
        "../node_modules/fullcalendar/dist/fullcalendar.min.js"
      ]

That should solve the problem.
If you not using angular-cli, you need to go to the index.html and reference all you scripts there.

[syatin003]

Ok thanks

[claudiulazar]

@Tarek-Adra Nice, simple and clean. Thanks

[HamzaWahabi]

UPDATE : The new version of fullCalendar has got a fix (it's still on beta).
use npm to get the latest version npm install [email protected] and update your dependencies in angular.json and that should do it!

Hello, I'm sorry for reopening the subject.
I have the same issue, but none of the solutions mentioned above are working.
I've installed and included the Scripts.
I even installed @types/jquery just in case.
Still, nothing, when I build and serve the app I get the message :

ERROR TypeError: e.addClass is not a function at t.initialRender (fullcalendar.min.js:10) at t.render (fullcalendar.min.js:10) at Schedule.push../node_modules/primeng/components/schedule/schedule.js.Schedule.initialize (schedule.js:222) at Schedule.push../node_modules/primeng/components/schedule/schedule.js.Schedule.ngAfterViewChecked (schedule.js:208) at callProviderLifecycles (core.js:9355) at callElementProvidersLifecycles (core.js:9326) at callLifecycleHooksChildrenFirst (core.js:9316) at checkAndUpdateView (core.js:10252) at callViewAction (core.js:10484) at execEmbeddedViewsAction (core.js:10447)

My first guess is that jQuery isn't imported correctly, yet it seems to be there.
Any help is appreciated.
Thanks.