fixed primefaces#7450 FullCalendar 4.1.0 Support

Author: yigitfindikli

angular.json

@@ -24,7 +24,9 @@
                 "src/upload.php"
               ],
               "styles": [
-                "node_modules/fullcalendar/dist/fullcalendar.min.css",
+                "node_modules/@fullcalendar/core/main.min.css",
+                "node_modules/@fullcalendar/daygrid/main.min.css",
+                "node_modules/@fullcalendar/timegrid/main.min.css",
                 "node_modules/quill/dist/quill.snow.css",
                 "node_modules/primeicons/primeicons.css",
                 "node_modules/primeflex/primeflex.css",
@@ -34,7 +36,10 @@
               "scripts": [
                 "./node_modules/moment/moment.js",
                 "./node_modules/chart.js/dist/Chart.js",
-                "./node_modules/fullcalendar/dist/fullcalendar.js",
+                "./node_modules/@fullcalendar/core/main.js",
+                "./node_modules/@fullcalendar/daygrid/main.js",
+                "./node_modules/@fullcalendar/timegrid/main.js",
+                "./node_modules/@fullcalendar/interaction/main.js",
                 "./node_modules/quill/dist/quill.js",
                 "./node_modules/prismjs/prism.js",
                 "./node_modules/prismjs/components/prism-typescript.js"

package.json

@@ -1,6 +1,6 @@
 {
   "name": "primeng",
-  "version": "7.1.0",
+  "version": "7.1.1-SNAPSHOT",
   "license": "MIT",
   "scripts": {
     "ng": "ng",
@@ -15,43 +15,32 @@
     "url": "https://github.com/primefaces/primeng.git"
   },
   "devDependencies": {
+    "@angular-devkit/build-angular": "^0.13.7",
     "@angular/animations": "~7.1.0",
     "@angular/cdk": "~7.1.0",
+    "@angular/cli": "~7.1.0",
     "@angular/common": "~7.1.0",
     "@angular/compiler": "~7.1.0",
+    "@angular/compiler-cli": "^7.2.11",
     "@angular/core": "~7.1.0",
     "@angular/forms": "~7.1.0",
     "@angular/http": "~7.1.0",
+    "@angular/language-service": "~7.1.0",
     "@angular/platform-browser": "~7.1.0",
     "@angular/platform-browser-dynamic": "~7.1.0",
     "@angular/router": "~7.1.0",
-    "core-js": "^2.5.4",
-    "rxjs": "~6.3.3",
-    "tslib": "^1.9.0",
-    "zone.js": "~0.8.26",
-    "@angular-devkit/build-angular": "~0.11.0",
-    "@angular/cli": "~7.1.0",
-    "@angular/compiler-cli": "~7.1.0",
-    "@angular/language-service": "~7.1.0",
-    "@types/node": "~8.9.4",
+    "@fullcalendar/core": "4.0.1",
+    "@fullcalendar/daygrid": "4.0.1",
+    "@fullcalendar/interaction": "4.0.1",
+    "@fullcalendar/timegrid": "4.0.1",
     "@types/jasmine": "~2.8.8",
     "@types/jasminewd2": "~2.0.3",
-    "codelyzer": "~4.5.0",
-    "jasmine-core": "~2.99.1",
-    "jasmine-spec-reporter": "~4.2.1",
-    "karma": "~3.1.1",
-    "karma-chrome-launcher": "~2.2.0",
-    "karma-coverage-istanbul-reporter": "~2.0.1",
-    "karma-jasmine": "~1.1.2",
-    "karma-jasmine-html-reporter": "^0.2.2",
-    "protractor": "~5.4.0",
-    "ts-node": "~7.0.0",
-    "tslint": "~5.11.0",
-    "typescript": "~3.1.6",
+    "@types/node": "~8.9.4",
     "chart.js": "2.7.3",
+    "codelyzer": "~4.5.0",
+    "core-js": "^2.5.4",
     "del": "3.0.0",
     "font-awesome": "4.7.0",
-    "fullcalendar": "4.0.0-alpha.2",
     "gulp": "^3.9.1",
     "gulp-concat": "2.6.1",
     "gulp-flatten": "^0.4.0",
@@ -60,10 +49,24 @@
     "gulp-uglifycss": "1.1.0",
     "install": "0.12.2",
     "intl": "1.2.5",
+    "jasmine-core": "~2.99.1",
+    "jasmine-spec-reporter": "~4.2.1",
+    "karma": "~3.1.1",
+    "karma-chrome-launcher": "~2.2.0",
+    "karma-coverage-istanbul-reporter": "~2.0.1",
+    "karma-jasmine": "~1.1.2",
+    "karma-jasmine-html-reporter": "^0.2.2",
+    "primeflex": "1.0.0-rc.1",
+    "primeicons": "1.0.0",
     "prismjs": "1.15.0",
+    "protractor": "~5.4.0",
     "quill": "1.3.6",
+    "rxjs": "~6.3.3",
+    "ts-node": "~7.0.0",
+    "tslib": "^1.9.0",
+    "tslint": "~5.11.0",
+    "typescript": "~3.1.6",
     "web-animations-js": "2.3.1",
-    "primeicons": "1.0.0",
-    "primeflex": "1.0.0-rc.1"
+    "zone.js": "~0.8.26"
   }
 }

src/app/components/fullcalendar/fullcalendar.ts

@@ -1,6 +1,6 @@
 import {NgModule,Component,ElementRef,OnDestroy,Input,OnInit,AfterViewChecked} from '@angular/core';
 import {CommonModule} from '@angular/common';
-import {Calendar} from 'fullcalendar';
+import {Calendar} from '@fullcalendar/core';
 
 @Component({
     selector: 'p-fullCalendar',

src/app/showcase/components/fullcalendar/fullcalendardemo.html

@@ -20,13 +20,22 @@ <h3>Import</h3>
 </pre>
 
             <h3>Getting Started</h3>
-            <p>FullCalendar is a wrapper around on <a href="https://fullcalendar.io/docs/v4">FullCalendar 4.0.0.alpha.2+</a> so fullcalendar needs to be included in your project. For a complete documentation and samples please refer to the fullcalendar website.
+            <p>FullCalendar is a wrapper around on <a href="https://fullcalendar.io/docs/v4">FullCalendar 4.0.1+</a> so fullcalendar core needs to be included in your project. For a complete documentation and samples please refer to the <a href="https://fullcalendar.io/">fullcalendar website</a>.</p>
 <pre>
 <code class="language-markup" pCode ngNonBindable>
-npm install [email protected] --save
+npm install @fullcalendar/core --save
 </code>
 </pre>
-            
+
+            <p>FullCalendar is plugin based so install the plugins you require and define them with the options property.</p>
+<pre>
+<code class="language-markup" pCode ngNonBindable>
+npm install @fullcalendar/daygrid --save
+npm install @fullcalendar/timegrid --save
+npm install @fullcalendar/interaction --save
+</code>
+</pre>
+
             <p>Events should be an array and defined using the events property.</p>
 <pre>
 <code class="language-markup" pCode ngNonBindable>
@@ -118,6 +127,7 @@ <h3>Options</h3>
         this.eventService.getEvents().then(events => &#123;this.events = events;&#125;);
 
         this.options = &#123;
+            plugins: [dayGridPlugin, timeGridPlugin, interactionPlugin],
             defaultDate: '2017-02-01',
             header: &#123;
                 left: 'prev,next',
@@ -172,6 +182,7 @@ <h3>Events</h3>
 <pre>
 <code class="language-typescript" pCode ngNonBindable>
 this.options = &#123;
+    plugins: [dayGridPlugin, timeGridPlugin, interactionPlugin],
     header: &#123;
         left: 'prev,next',
         center: 'title',
@@ -244,6 +255,10 @@ <h3>Dependencies</h3>
 
 <pre>
 <code class="language-typescript" pCode ngNonBindable>
+import dayGridPlugin from '@fullcalendar/daygrid';
+import timeGridPlugin from '@fullcalendar/timegrid';
+import interactionPlugin from '@fullcalendar/interaction';
+
 export class FullCalendarDemo implements OnInit &#123;
 
     events: any[];
@@ -256,6 +271,7 @@ <h3>Dependencies</h3>
         this.eventService.getEvents().then(events => &#123;this.events = events;&#125;);
 
         this.options = &#123;
+            plugins: [dayGridPlugin, timeGridPlugin, interactionPlugin],
             defaultDate: '2017-02-01',
             header: &#123;
                 left: 'prev,next',

src/app/showcase/components/fullcalendar/fullcalendardemo.ts

@@ -1,5 +1,8 @@
 import {Component,OnInit} from '@angular/core';
 import {EventService} from '../../service/eventservice';
+import dayGridPlugin from '@fullcalendar/daygrid';
+import timeGridPlugin from '@fullcalendar/timegrid';
+import interactionPlugin from '@fullcalendar/interaction';
 
 @Component({
     templateUrl: './fullcalendardemo.html'
@@ -18,11 +21,12 @@ export class FullCalendarDemo implements OnInit {
         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'
+                right: 'dayGridMonth,timeGridWeek,timeGridDay'
             },
             editable: true
         };

src/karma.conf.js

@@ -22,7 +22,7 @@ module.exports = function (config) {
       },
       files: [
         '../node_modules/moment/moment.js',
-        '../node_modules/fullcalendar/dist/fullcalendar.js',
+        '../node_modules/@fullcalendar/core/main.js',
         '../node_modules/chart.js/dist/Chart.js',
         '../node_modules/quill/dist/quill.js'
       ],
@@ -34,4 +34,4 @@ module.exports = function (config) {
       browsers: ['Chrome'],
       singleRun: false
     });
-  };
+};