FullCalendar - Module not found

UI Components for Angular
RickMcDee
Posts: 2
Joined: 01 May 2019, 21:27

01 May 2019, 21:52

Hey all,
maybe I just messed things up, but I have a problem with the calendar.
I am using PrimeNG 7.1.0 with FullCalendar 4.1.0
Here is what I did:

Code: Select all

console
npm install @fullcalendar/core --save

Code: Select all

app.module.ts
import { FullCalendarModule } from 'primeng/fullcalendar';
[...]
@NgModule({
imports: [ ...
FullCalendarModule,
...]
})

Code: Select all

html
<p-fullCalendar [events]="events"></p-fullCalendar>
Starting the App I revieve the following error:

Code: Select all

Failed to compile.
./node_modules/primeng/components/fullcalendar/fullcalendar.js
Module not found: Error: Can't resolve 'fullcalendar' in '[...]\ClientApp\node_modules\primeng\components\fullcalendar'
So I looked into the fullcalendar.js and changed line 41 from

Code: Select all

var fullcalendar_1 = require("fullcalendar");
to

Code: Select all

var fullcalendar_1 = require("@fullcalendar/core");
Now I can start the App, but get a console error, when I open the calendarpage

Code: Select all

ERROR Error: No available FullCalendar view plugins.

zornic
Posts: 71
Joined: 09 Dec 2017, 10:12

02 May 2019, 09:10

I have the same problem, but in this forum you will never receive an answer!

yigitfindikli
Posts: 449
Joined: 08 Aug 2018, 14:09

02 May 2019, 10:02

RickMcDee wrote:
01 May 2019, 21:52
Hey all,
maybe I just messed things up, but I have a problem with the calendar.
I am using PrimeNG 7.1.0 with FullCalendar 4.1.0
Here is what I did:

Code: Select all

console
npm install @fullcalendar/core --save

Code: Select all

app.module.ts
import { FullCalendarModule } from 'primeng/fullcalendar';
[...]
@NgModule({
imports: [ ...
FullCalendarModule,
...]
})

Code: Select all

html
<p-fullCalendar [events]="events"></p-fullCalendar>
Starting the App I revieve the following error:

Code: Select all

Failed to compile.
./node_modules/primeng/components/fullcalendar/fullcalendar.js
Module not found: Error: Can't resolve 'fullcalendar' in '[...]\ClientApp\node_modules\primeng\components\fullcalendar'
So I looked into the fullcalendar.js and changed line 41 from

Code: Select all

var fullcalendar_1 = require("fullcalendar");
to

Code: Select all

var fullcalendar_1 = require("@fullcalendar/core");
Now I can start the App, but get a console error, when I open the calendarpage

Code: Select all

ERROR Error: No available FullCalendar view plugins.
Hi, can i see your component ? Probably you need install the fullcalendar plugins. Example component;

Code: Select all

import dayGridPlugin from '@fullcalendar/daygrid';
import timeGridPlugin from '@fullcalendar/timegrid';
import interactionPlugin from '@fullcalendar/interaction';

export class FullCalendarDemo implements OnInit {

    events: any[];

    options: any;
            
    constructor(private eventService: EventService) { }

    ngOnInit() {
        this.eventService.getEvents().then(events => {this.events = events;});
        
        this.options = {
            plugins: [dayGridPlugin, timeGridPlugin, interactionPlugin],
            defaultDate: '2017-02-01',
            header: {
                left: 'prev,next',
                center: 'title',
                right: 'month,agendaWeek,agendaDay'
            }
        {;
    }

}
You can find more info in https://www.primefaces.org/primeng/#/fullcalendar .

RickMcDee
Posts: 2
Joined: 01 May 2019, 21:27

06 May 2019, 22:41

zornic wrote:
02 May 2019, 09:10
I have the same problem, but in this forum you will never receive an answer!
Maybe this will help you:
You have to import at least the dayGridPlugin.
You have to assign an own options-object.
You have to import at least the "@fullcalendar/core/main.css" to your css-file.
Than it is still not as fancy as on the documentation-page, but you can run it without errors... :?

yigitfindikli
Posts: 449
Joined: 08 Aug 2018, 14:09

07 May 2019, 11:24

RickMcDee wrote:
06 May 2019, 22:41
zornic wrote:
02 May 2019, 09:10
I have the same problem, but in this forum you will never receive an answer!
Maybe this will help you:
You have to import at least the dayGridPlugin.
You have to assign an own options-object.
You have to import at least the "@fullcalendar/core/main.css" to your css-file.
Than it is still not as fancy as on the documentation-page, but you can run it without errors... :?
Hi,
Thanks for the heads up and more detail info can be found at https://fullcalendar.io/docs/initialize-es6 .

zornic
Posts: 71
Joined: 09 Dec 2017, 10:12

08 May 2019, 08:45

Hey guys,

this is my currently erros:

Code: Select all

Failed to load resource: the server responded with a status of 404 (Not Found)
errors.ts:35 ERROR Error: Uncaught (in promise): Error: Fetch error: 404 Not Found
  Instantiating http://localhost/APP/typescript
  Loading typescript
  Unable to load transpiler to transpile http://localhost/APP/node_modules/@fullcalendar/core/main.js
  Instantiating http://localhost/APP/node_modules/@fullcalendar/core/main.js
  Loading http://localhost/APP/node_modules/primeng/components/fullcalendar/fullcalendar.js
  Loading ./ClientApp/app/Views/LoadingScheduling/Calendar/Calendar.module
Error: Fetch error: 404 Not Found
    at scripts?v=_g74x-Alouv854pDIZ7e0gjkTps1a0NDr9icnU6RSE41:1546
    at e.invoke (scripts?v=_g74x-Alouv854pDIZ7e0gjkTps1a0NDr9icnU6RSE41:34)
    at Object.onInvoke (ng_zone.ts:273)
    at e.invoke (scripts?v=_g74x-Alouv854pDIZ7e0gjkTps1a0NDr9icnU6RSE41:34)
    at t.run (scripts?v=_g74x-Alouv854pDIZ7e0gjkTps1a0NDr9icnU6RSE41:34)
    at scripts?v=_g74x-Alouv854pDIZ7e0gjkTps1a0NDr9icnU6RSE41:34
    at e.invokeTask (scripts?v=_g74x-Alouv854pDIZ7e0gjkTps1a0NDr9icnU6RSE41:34)
    at Object.onInvokeTask (ng_zone.ts:262)
    at e.invokeTask (scripts?v=_g74x-Alouv854pDIZ7e0gjkTps1a0NDr9icnU6RSE41:34)
    at t.runTask (scripts?v=_g74x-Alouv854pDIZ7e0gjkTps1a0NDr9icnU6RSE41:34)
    at j (scripts?v=_g74x-Alouv854pDIZ7e0gjkTps1a0NDr9icnU6RSE41:34)
    at j (scripts?v=_g74x-Alouv854pDIZ7e0gjkTps1a0NDr9icnU6RSE41:34)
    at scripts?v=_g74x-Alouv854pDIZ7e0gjkTps1a0NDr9icnU6RSE41:34
    at e.invokeTask (scripts?v=_g74x-Alouv854pDIZ7e0gjkTps1a0NDr9icnU6RSE41:34)
    at Object.onInvokeTask (ng_zone.ts:262)
    at e.invokeTask (scripts?v=_g74x-Alouv854pDIZ7e0gjkTps1a0NDr9icnU6RSE41:34)
    at t.runTask (scripts?v=_g74x-Alouv854pDIZ7e0gjkTps1a0NDr9icnU6RSE41:34)
    at g (scripts?v=_g74x-Alouv854pDIZ7e0gjkTps1a0NDr9icnU6RSE41:34)
And here my code:

system.config.js

Code: Select all

'@fullcalendar/core': 'npm:@fullcalendar/core/main.js',
            '@fullcalendar/daygrid': 'npm:@fullcalendar/daygrid/main.js',
            '@fullcalendar/timegrid': 'npm:@fullcalendar/timegrid/main.js',
            '@fullcalendar/list': 'npm:@fullcalendar/list/main.js',
app.modules.ts

Code: Select all

import { FullCalendarModule } from 'primeng/fullcalendar';
@NgModule({
    imports: [
        routing,

        //Angular
        CommonModule,
        FormsModule,

        //PrimeNG
        .
        .
        .
        FullCalendarModule,
        .
        .
    ],
        .
        .
})
app.component.ts

Code: Select all

import { Calendar } from '@fullcalendar/core';
import dayGridPlugin from '@fullcalendar/daygrid';
import timeGridPlugin from '@fullcalendar/timegrid';
import listPlugin from '@fullcalendar/list';



yigitfindikli
Posts: 449
Joined: 08 Aug 2018, 14:09

08 May 2019, 13:57

zornic wrote:
08 May 2019, 08:45
Hey guys,

this is my currently erros:

Code: Select all

Failed to load resource: the server responded with a status of 404 (Not Found)
errors.ts:35 ERROR Error: Uncaught (in promise): Error: Fetch error: 404 Not Found
  Instantiating http://localhost/APP/typescript
  Loading typescript
  Unable to load transpiler to transpile http://localhost/APP/node_modules/@fullcalendar/core/main.js
  Instantiating http://localhost/APP/node_modules/@fullcalendar/core/main.js
  Loading http://localhost/APP/node_modules/primeng/components/fullcalendar/fullcalendar.js
  Loading ./ClientApp/app/Views/LoadingScheduling/Calendar/Calendar.module
Error: Fetch error: 404 Not Found
    at scripts?v=_g74x-Alouv854pDIZ7e0gjkTps1a0NDr9icnU6RSE41:1546
    at e.invoke (scripts?v=_g74x-Alouv854pDIZ7e0gjkTps1a0NDr9icnU6RSE41:34)
    at Object.onInvoke (ng_zone.ts:273)
    at e.invoke (scripts?v=_g74x-Alouv854pDIZ7e0gjkTps1a0NDr9icnU6RSE41:34)
    at t.run (scripts?v=_g74x-Alouv854pDIZ7e0gjkTps1a0NDr9icnU6RSE41:34)
    at scripts?v=_g74x-Alouv854pDIZ7e0gjkTps1a0NDr9icnU6RSE41:34
    at e.invokeTask (scripts?v=_g74x-Alouv854pDIZ7e0gjkTps1a0NDr9icnU6RSE41:34)
    at Object.onInvokeTask (ng_zone.ts:262)
    at e.invokeTask (scripts?v=_g74x-Alouv854pDIZ7e0gjkTps1a0NDr9icnU6RSE41:34)
    at t.runTask (scripts?v=_g74x-Alouv854pDIZ7e0gjkTps1a0NDr9icnU6RSE41:34)
    at j (scripts?v=_g74x-Alouv854pDIZ7e0gjkTps1a0NDr9icnU6RSE41:34)
    at j (scripts?v=_g74x-Alouv854pDIZ7e0gjkTps1a0NDr9icnU6RSE41:34)
    at scripts?v=_g74x-Alouv854pDIZ7e0gjkTps1a0NDr9icnU6RSE41:34
    at e.invokeTask (scripts?v=_g74x-Alouv854pDIZ7e0gjkTps1a0NDr9icnU6RSE41:34)
    at Object.onInvokeTask (ng_zone.ts:262)
    at e.invokeTask (scripts?v=_g74x-Alouv854pDIZ7e0gjkTps1a0NDr9icnU6RSE41:34)
    at t.runTask (scripts?v=_g74x-Alouv854pDIZ7e0gjkTps1a0NDr9icnU6RSE41:34)
    at g (scripts?v=_g74x-Alouv854pDIZ7e0gjkTps1a0NDr9icnU6RSE41:34)
And here my code:

system.config.js

Code: Select all

'@fullcalendar/core': 'npm:@fullcalendar/core/main.js',
            '@fullcalendar/daygrid': 'npm:@fullcalendar/daygrid/main.js',
            '@fullcalendar/timegrid': 'npm:@fullcalendar/timegrid/main.js',
            '@fullcalendar/list': 'npm:@fullcalendar/list/main.js',
app.modules.ts

Code: Select all

import { FullCalendarModule } from 'primeng/fullcalendar';
@NgModule({
    imports: [
        routing,

        //Angular
        CommonModule,
        FormsModule,

        //PrimeNG
        .
        .
        .
        FullCalendarModule,
        .
        .
    ],
        .
        .
})
app.component.ts

Code: Select all

import { Calendar } from '@fullcalendar/core';
import dayGridPlugin from '@fullcalendar/daygrid';
import timeGridPlugin from '@fullcalendar/timegrid';
import listPlugin from '@fullcalendar/list';


Hi, Can i see your package.json ?

zornic
Posts: 71
Joined: 09 Dec 2017, 10:12

08 May 2019, 15:30

Hi yigitfindikli,

here is my package.json

Code: Select all

{
    "name": "APP",
    "version": "2.3.0",
    "license": "aaa",
    "scripts": {
        "build": "tsc -p src/",
        "build:watch": "tsc -p src/ -w",
        "build:e2e": "tsc -p e2e/",
        "serve": "lite-server -c=bs-config.json",
        "serve:e2e": "lite-server -c=bs-config.e2e.json",
        "prestart": "npm run build",
        "start": "concurrently \"npm run build:watch\" \"npm run serve\"",
        "pree2e": "npm run build:e2e",
        "e2e": "concurrently \"npm run serve:e2e\" \"npm run protractor\" --kill-others --success first",
        "preprotractor": "webdriver-manager update",
        "protractor": "protractor protractor.config.js",
        "pretest": "npm run build",
        "test": "concurrently \"npm run build:watch\" \"karma start karma.conf.js\"",
        "pretest:once": "npm run build",
        "test:once": "karma start karma.conf.js --single-run",
        "lint": "tslint ./src/**/*.ts -t verbose"
    },
    "keywords": [],
    "author": "",
    "dependencies": {
        "@angular/cdk": "7.3.7",
        "@angular/animations": "7.2.14",
        "@angular/common": "7.2.14",
        "@angular/compiler": "7.2.14",
        "@angular/core": "7.2.14",
        "@angular/forms": "7.2.14",
        "@angular/http": "7.2.14",
        "@angular/platform-browser": "7.2.14",
        "@angular/platform-browser-dynamic": "7.2.14",
        "@angular/router": "7.2.14",
        "angular-in-memory-web-api": "0.8.0",
        "chart.js": "2.8.0",
        "core-js": "2.6.5",
        "@fullcalendar/core": "4.1.0",
        "@fullcalendar/interaction": "4.1.0",
        "@fullcalendar/daygrid": "4.1.0",
        "@fullcalendar/timegrid": "4.1.0",
        "@fullcalendar/list": "4.1.0",
        "intl": "1.2.5",
        "jquery": "3.4.1",
        "luxon": "1.12.1",
        "moment": "2.24.0",
        "primeicons": "1.0.0",
        "primeng": "7.1.2",
        "quill": "1.3.6",
        "rxjs": "6.5.1",
        "systemjs": "0.21.6",
        "web-animations-js": "2.3.1",
        "zone.js": "0.9.0",
        //"superagent": "4.1.0"
    },
    "devDependencies": {
        "@angular-devkit/build-angular": "0.13.8",
        "@angular/cli": "7.3.8",
        "@angular/compiler-cli": "7.2.14",
        "@angular/language-service": "7.2.14",
        "@types/jasmine": "3.3.12",
        "@types/jasminewd2": "2.0.6",
        "@types/jquery": "3.3.29",
        "@types/node": "11.13.8",
        "@types/quill": "1.3.10",
        "@types/luxon": "1.12.0",
        "@types/full": "",
        "angular2-router-loader": "0.3.5",
        "canonical-path": "1.0.0",
        "concurrently": "4.1.0",
        "jasmine-core": "3.4.0",
        "karma": "4.1.0",
        "karma-chrome-launcher": "2.2.0",
        "karma-cli": "2.0.0",
        "karma-jasmine": "2.0.1",
        "karma-jasmine-html-reporter": "1.4.2",
        "lite-server": "2.4.0",
        "lodash": "4.17.11",
        "protractor": "6.0.0",
        "rimraf": "2.6.3",
        "tslint": "5.16.0",
        "typescript": "3.4.5"
    },
    "repository": {}
}


yigitfindikli
Posts: 449
Joined: 08 Aug 2018, 14:09

10 May 2019, 07:57

zornic wrote:
08 May 2019, 15:30
Hi yigitfindikli,

here is my package.json

Code: Select all

{
    "name": "APP",
    "version": "2.3.0",
    "license": "aaa",
    "scripts": {
        "build": "tsc -p src/",
        "build:watch": "tsc -p src/ -w",
        "build:e2e": "tsc -p e2e/",
        "serve": "lite-server -c=bs-config.json",
        "serve:e2e": "lite-server -c=bs-config.e2e.json",
        "prestart": "npm run build",
        "start": "concurrently \"npm run build:watch\" \"npm run serve\"",
        "pree2e": "npm run build:e2e",
        "e2e": "concurrently \"npm run serve:e2e\" \"npm run protractor\" --kill-others --success first",
        "preprotractor": "webdriver-manager update",
        "protractor": "protractor protractor.config.js",
        "pretest": "npm run build",
        "test": "concurrently \"npm run build:watch\" \"karma start karma.conf.js\"",
        "pretest:once": "npm run build",
        "test:once": "karma start karma.conf.js --single-run",
        "lint": "tslint ./src/**/*.ts -t verbose"
    },
    "keywords": [],
    "author": "",
    "dependencies": {
        "@angular/cdk": "7.3.7",
        "@angular/animations": "7.2.14",
        "@angular/common": "7.2.14",
        "@angular/compiler": "7.2.14",
        "@angular/core": "7.2.14",
        "@angular/forms": "7.2.14",
        "@angular/http": "7.2.14",
        "@angular/platform-browser": "7.2.14",
        "@angular/platform-browser-dynamic": "7.2.14",
        "@angular/router": "7.2.14",
        "angular-in-memory-web-api": "0.8.0",
        "chart.js": "2.8.0",
        "core-js": "2.6.5",
        "@fullcalendar/core": "4.1.0",
        "@fullcalendar/interaction": "4.1.0",
        "@fullcalendar/daygrid": "4.1.0",
        "@fullcalendar/timegrid": "4.1.0",
        "@fullcalendar/list": "4.1.0",
        "intl": "1.2.5",
        "jquery": "3.4.1",
        "luxon": "1.12.1",
        "moment": "2.24.0",
        "primeicons": "1.0.0",
        "primeng": "7.1.2",
        "quill": "1.3.6",
        "rxjs": "6.5.1",
        "systemjs": "0.21.6",
        "web-animations-js": "2.3.1",
        "zone.js": "0.9.0",
        //"superagent": "4.1.0"
    },
    "devDependencies": {
        "@angular-devkit/build-angular": "0.13.8",
        "@angular/cli": "7.3.8",
        "@angular/compiler-cli": "7.2.14",
        "@angular/language-service": "7.2.14",
        "@types/jasmine": "3.3.12",
        "@types/jasminewd2": "2.0.6",
        "@types/jquery": "3.3.29",
        "@types/node": "11.13.8",
        "@types/quill": "1.3.10",
        "@types/luxon": "1.12.0",
        "@types/full": "",
        "angular2-router-loader": "0.3.5",
        "canonical-path": "1.0.0",
        "concurrently": "4.1.0",
        "jasmine-core": "3.4.0",
        "karma": "4.1.0",
        "karma-chrome-launcher": "2.2.0",
        "karma-cli": "2.0.0",
        "karma-jasmine": "2.0.1",
        "karma-jasmine-html-reporter": "1.4.2",
        "lite-server": "2.4.0",
        "lodash": "4.17.11",
        "protractor": "6.0.0",
        "rimraf": "2.6.3",
        "tslint": "5.16.0",
        "typescript": "3.4.5"
    },
    "repository": {}
}

Hi,

Did you import fullcanders main.js in your angular.json file ? Like this;

Code: Select all

"styles": [
		...
                "node_modules/@fullcalendar/core/main.min.css",
                "node_modules/@fullcalendar/daygrid/main.min.css",
                "node_modules/@fullcalendar/timegrid/main.min.css",
                ...
              ],
              "scripts": [
                ...
                "./node_modules/@fullcalendar/core/main.js",
                "./node_modules/@fullcalendar/daygrid/main.js",
                "./node_modules/@fullcalendar/timegrid/main.js",
                "./node_modules/@fullcalendar/interaction/main.js",
                ...
              ]

zornic
Posts: 71
Joined: 09 Dec 2017, 10:12

10 May 2019, 08:25

Hi yigitfindikli,

yes, i've imported with systemjs

Code: Select all

map: {
            // our app is within the app folder
            'app': 'ClientApp/app',

            // angular bundles
            '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
            '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
            '@angular/common/http': 'npm:@angular/common/bundles/common-http.umd.js',
            '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
            '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
            '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
            '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
            '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
            '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',

            '@angular/animations': 'npm:@angular/animations/bundles/animations.umd.js',
            '@angular/animations/browser': 'npm:@angular/animations/bundles/animations-browser.umd.js',
            '@angular/platform-browser/animations': 'npm:@angular/platform-browser/bundles/platform-browser-animations.umd.js',

            '@angular/cdk': 'npm:@angular/cdk/bundles/cdk.umd.js',
            '@angular/cdk/a11y': 'npm:/@angular/cdk/bundles/cdk-a11y.umd.js',
            '@angular/cdk/bidi': 'npm:/@angular/cdk/bundles/cdk-bidi.umd.js',
            '@angular/cdk/observers': 'npm:/@angular/cdk/bundles/cdk-observers.umd.js',
            '@angular/cdk/overlay': 'npm:/@angular/cdk/bundles/cdk-overlay.umd.js',
            '@angular/cdk/portal': 'npm:/@angular/cdk/bundles/cdk-portal.umd.js',
            '@angular/cdk/scrolling': 'npm:/@angular/cdk/bundles/cdk-scrolling.umd.js',
            '@angular/cdk/platform': 'npm:/@angular/cdk/bundles/cdk-platform.umd.js',
            '@angular/cdk/keycodes': 'npm:/@angular/cdk/bundles/cdk-keycodes.umd.js',
            '@angular/cdk/coercion': 'npm:/@angular/cdk/bundles/cdk-coercion.umd.js',
            '@angular/cdk/collections': 'npm:/@angular/cdk/bundles/cdk-collections.umd.js',
            '@angular/cdk/rxjs': 'npm:/@angular/cdk/bundles/cdk-rxjs.umd.js',
            '@angular/cdk/table': 'npm:/@angular/cdk/bundles/cdk-table.umd.js',

            '@fullcalendar/core': 'npm:@fullcalendar/core/main.js',
            '@fullcalendar/daygrid': 'npm:@fullcalendar/daygrid/main.js',
            '@fullcalendar/timegrid': 'npm:@fullcalendar/timegrid/main.js',
            '@fullcalendar/list': 'npm:@fullcalendar/list/main.js',

            // other libraries
            'rxjs': 'npm:rxjs',
            'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js',
            'primeng': 'npm:primeng',
            'jquery': 'npm:jquery/dist/jquery.js',
            //'fullcalendar': 'npm:fullcalendar/dist/fullcalendar.min.js',
            //'LocalesAll': 'npm:fullcalendar/dist/locales-all.js',
            'LocalesAll': 'npm:@fullcalendar/core/locales-all.js',
            //'fullcalendar': 'npm:@fullcalendar/core',
            //'moment': 'npm:moment/moment.js',
            'moment': 'npm:moment/min/moment-with-locales.min.js',
            'tslib': 'npm:tslib/tslib.js',
            'quill': 'npm:quill/dist/quill.js',
            //'superagent': 'npm:superagent/superagent.js',
        },

Post Reply

Return to “PrimeNG”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 10 guests