2

I am trying to implement FullCalendar Scheduler in Angular 2, and I have followed the below specified steps -

Installed the required dependancy as below -

"dependencies": {
   "fullcalendar": "^3.8.0",
    "fullcalendar-scheduler": "^1.9.1",
    "jquery": "^3.2.1",
    "moment": "^2.20.1"
  },
  "devDependencies": {
    "@types/jquery": "^2.0.47"
  }

Updated the angular-cli.json as below -

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

I have imported the dependancies in main.ts and module.ts -

main.ts - 

import * as jQuery from "jquery";
(window as any).$ = (window as any).jQuery = jQuery;

app.component.html -

<div id='calendar'></div>

app.component.ts

import { Component } from '@angular/core';
import 'fullcalendar';
import 'fullcalendar-scheduler';
declare let $: any;

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  ngOnInit() {
    $('#calendar').fullCalendar({});
  }
}

I have solved the @type/jquery issue as specified in jQuery error anymore, however I am not able to compile the code it give below mentioned error -

ERROR in /Users/jeet/Documents/Development/frontend/node_modules/fullcalendar/dist/fullcalendar.d.ts (347,6): Type 'string' is not assignable to type 'EmitterInterface[]'.
ERROR in /Users/jeet/Documents/Development/frontend/node_modules/fullcalendar/dist/fullcalendar.d.ts (124,27): ']' expected.
ERROR in /Users/jeet/Documents/Development/frontend/node_modules/fullcalendar/dist/fullcalendar.d.ts (125,28): ']' expected.
ERROR in /Users/jeet/Documents/Development/frontend/node_modules/fullcalendar/dist/fullcalendar.d.ts (125,33): ';' expected.
ERROR in /Users/jeet/Documents/Development/frontend/node_modules/fullcalendar/dist/fullcalendar.d.ts (126,28): ']' expected.
ERROR in /Users/jeet/Documents/Development/frontend/node_modules/fullcalendar/dist/fullcalendar.d.ts (126,33): ';' expected.

Please find the full error here. I have already looked at below threads and resources and these doesn't seems to address the issue -

https://github.com/fullcalendar/fullcalendar/issues/3991 fullcalendar & Angular 5

I request your help regarding same.

Jeet
  • 5,569
  • 8
  • 43
  • 75
  • From your angular-cli.json remove the primeng related imports, I assume that is causing this problem. – Manzurul Mar 02 '18 at 15:12
  • Thanks for the response, however after removing ` "../node_modules/primeng/resources/primeng.min.css",` `"../node_modules/primeng/resources/themes/omega/theme.css",`` these doesn't help at all. The error remains same. – Jeet Mar 02 '18 at 15:30
  • According to the fullcalendar docs you should use this way let containerEl: JQuery = $('#calendar'); containerEl.fullCalendar({ // options here }); Try this and if this does not work I will look at it more after my office. – Manzurul Mar 02 '18 at 15:36
  • Thank you very much for taking time to look into it, can you please let me know where exactly I should put above mentioned code snippet? It would also help if you have some kind of sample code. – Jeet Mar 02 '18 at 15:43
  • inside ngOnit, instead of this line $('#calendar').fullCalendar({}); put the above one and see if it works. – Manzurul Mar 02 '18 at 16:07
  • I did put this in ngOnit but it did not work, I don't think that should be there because `jQuery` is not a declared variable neither `containerEl` is. – Jeet Mar 02 '18 at 16:21
  • See below I have posted an answer for you and also included the working repo link. – Manzurul Mar 05 '18 at 13:49

1 Answers1

1

This should work for you. Also you can have a look at the git repo too here https://gitlab.com/haque.mdmanzurul/ng-fullcalendar

app.component.ts

import * as jQuery from 'jquery';
(window as any).jQuery = (window as any).$ = jQuery; // This is needed to resolve issue.
import { Component, OnInit } from '@angular/core';
import 'fullcalendar';

 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
 })
 export class AppComponent implements OnInit {
 title = 'My Calendar';

 ngOnInit() {
   $('#calendar').fullCalendar({});
 }
}

angular-cli.json:

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

package.json

{
  "name": "mycalendar",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
  "ng": "ng",
  "start": "ng serve",
  "build": "ng build",
  "test": "ng test",
  "lint": "ng lint",
  "e2e": "ng e2e"
},
"private": true,
"dependencies": {
 "@angular/animations": "^4.2.4",
 "@angular/common": "^4.2.4",
 "@angular/compiler": "^4.2.4",
 "@angular/core": "^4.2.4",
 "@angular/forms": "^4.2.4",
 "@angular/http": "^4.2.4",
 "@angular/platform-browser": "^4.2.4",
 "@angular/platform-browser-dynamic": "^4.2.4",
 "@angular/router": "^4.2.4",
 "core-js": "^2.4.1",
 "rxjs": "^5.4.2",
 "zone.js": "^0.8.14",
 "fullcalendar": "^3.4.0",
 "jquery": "^3.2.1",
 "moment": "^2.19.1"
 },
"devDependencies": {
 "@angular/cli": "1.4.9",
 "@angular/compiler-cli": "^4.2.4",
 "@angular/language-service": "^4.2.4",
 "@types/jasmine": "~2.5.53",
 "@types/jasminewd2": "~2.0.2",
 "@types/jquery": "^3.2.7",
 "@types/node": "~6.0.60",
 "codelyzer": "~3.2.0",
 "jasmine-core": "~2.6.2",
 "jasmine-spec-reporter": "~4.1.0",
 "karma": "~1.7.0",
 "karma-chrome-launcher": "~2.1.1",
 "karma-cli": "~1.0.1",
 "karma-coverage-istanbul-reporter": "^1.2.1",
 "karma-jasmine": "~1.1.0",
 "karma-jasmine-html-reporter": "^0.2.2",
 "protractor": "~5.1.2",
 "ts-node": "~3.2.0",
 "tslint": "~5.7.0",
 "typescript": "~2.3.3"
 }
}
Manzurul
  • 633
  • 6
  • 11
  • Thank you very much for taking time to help me out. But you see this is not much about full calendar but more about full calendar scheduler, when you include full calendar scheduler it doesn't work and gives you the error posted in original post. – Jeet Mar 05 '18 at 15:06
  • I just have updated the git repo that I provided at above and also included the scheduler too and its working fine. You can download the updates and try to run again. Hopefully it will work. – Manzurul Mar 05 '18 at 15:37
  • Thank you very much, though my problem still persist but at least I have one working example for the `fullcalendar-scheduler` thanks a lot. I think this has got some conflict with `primeng` and I have no idea to make it work with `primeng`. But nevertheless it is an accepted answer. Thanks again. – Jeet Mar 05 '18 at 16:52
  • You are welcome. And till now I have worked with the primeng one which is called schedule which is completely different component using fullcalender at back, if you use primeng one then you have to go with different type code not calling jquery stuff and primeng has pretty good docs on that. I made the jqeury one because I thought you were using usual jquery type call. – Manzurul Mar 05 '18 at 19:42