calender added

package-lock.json

@@ -1938,6 +1938,52 @@
         "is-negated-glob": "^1.0.0"
       }
     },
+    "@fullcalendar/angular": {
+      "version": "5.4.0",
+      "resolved": "https://registry.npmjs.org/@fullcalendar/angular/-/angular-5.4.0.tgz",
+      "integrity": "sha512-l52WeK8S/TYbbE2DKLQBQEQshUVkSFd4z40rw4Vs2tuKgxHsu8JZ6dCNc+VzBHxY0M2QL6GJzsNp4O+ZQ3IqXw==",
+      "requires": {
+        "@fullcalendar/core": "~5.4.0",
+        "fast-deep-equal": "^3.1.1",
+        "tslib": "^2.0.0"
+      }
+    },
+    "@fullcalendar/common": {
+      "version": "5.4.0",
+      "resolved": "https://registry.npmjs.org/@fullcalendar/common/-/common-5.4.0.tgz",
+      "integrity": "sha512-w6C5VLxZmS8AmbAIiIHy+p+S/G9wtsvFEgyM/Ijd+5/ENKV4bs8ieOsetdl79WUheRKg0oXiiG5fy1X3EFk/Gg==",
+      "requires": {
+        "tslib": "^2.0.3"
+      }
+    },
+    "@fullcalendar/core": {
+      "version": "5.4.0",
+      "resolved": "https://registry.npmjs.org/@fullcalendar/core/-/core-5.4.0.tgz",
+      "integrity": "sha512-brg5TI/ZrCm+gBdKRkDLuenUxAEYa40Esw6yAtLbx0azRinhOZ+koqy4J3VA3dnv2W5HI9agVr9wuQLHWjqDtw==",
+      "requires": {
+        "@fullcalendar/common": "~5.4.0",
+        "preact": "^10.0.5",
+        "tslib": "^2.0.3"
+      }
+    },
+    "@fullcalendar/daygrid": {
+      "version": "5.4.0",
+      "resolved": "https://registry.npmjs.org/@fullcalendar/daygrid/-/daygrid-5.4.0.tgz",
+      "integrity": "sha512-UgBcEWNMFuhnwQNH0NP1qWo3swH3jAqXY7Y43eQakwwFbCuP/gBSmiOgkVnfK2SmPJTDMEnFR5jApcXPlpPXlQ==",
+      "requires": {
+        "@fullcalendar/common": "~5.4.0",
+        "tslib": "^2.0.3"
+      }
+    },
+    "@fullcalendar/interaction": {
+      "version": "5.4.0",
+      "resolved": "https://registry.npmjs.org/@fullcalendar/interaction/-/interaction-5.4.0.tgz",
+      "integrity": "sha512-Ve7i+kZ6ZwL84n2aSE762Pr5Sj9hFNKNVd+0wSGDpwgm4G4AWDfycHx0IyrbzqWCjcaP1aKChNYunkuPVl+rCg==",
+      "requires": {
+        "@fullcalendar/common": "~5.4.0",
+        "tslib": "^2.0.3"
+      }
+    },
     "@istanbuljs/schema": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/@istanbuljs/schema/-/schema-0.1.2.tgz",
@@ -3157,6 +3203,16 @@
       "integrity": "sha512-1Yj8h9Q+QDF5FzhMs/c9+6UntbD5MkRfRwac8DoEm9ZfUBZ7tZ55YcGVAzEe4bXsdQHEk+s9S5wsOKVdZrw0tQ==",
       "dev": true
     },
+    "bindings": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/bindings/-/bindings-1.5.0.tgz",
+      "integrity": "sha512-p2q/t/mhvuOj/UeLlV6566GD/guowlr0hHxClI0W9m7MWYkL1F0hLo+0Aexs9HSPCtR1SXQ0TD3MMKrXZajbiQ==",
+      "dev": true,
+      "optional": true,
+      "requires": {
+        "file-uri-to-path": "1.0.0"
+      }
+    },
     "blob": {
       "version": "0.0.5",
       "resolved": "https://registry.npmjs.org/blob/-/blob-0.0.5.tgz",
@@ -6041,8 +6097,7 @@
     "fast-deep-equal": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
-      "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
-      "dev": true
+      "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q=="
     },
     "fast-glob": {
       "version": "3.2.4",
@@ -6144,6 +6199,13 @@
         }
       }
     },
+    "file-uri-to-path": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/file-uri-to-path/-/file-uri-to-path-1.0.0.tgz",
+      "integrity": "sha512-0Zt+s3L7Vf1biwWZ29aARiVYLx7iMGnEUl9x33fbB/j3jR81u/O2LbqK+Bm1CDSNDKVtJ/YjwY7TUd5SkeLQLw==",
+      "dev": true,
+      "optional": true
+    },
     "fill-range": {
       "version": "7.0.1",
       "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
@@ -8610,7 +8672,11 @@
           "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-1.2.13.tgz",
           "integrity": "sha512-oWb1Z6mkHIskLzEJ/XWX0srkpkTQ7vaopMQkyaEIoq0fmtFVxOthb8cCxeT+p3ynTdkk/RZwbgG4brR5BeWECw==",
           "dev": true,
-          "optional": true
+          "optional": true,
+          "requires": {
+            "bindings": "^1.5.0",
+            "nan": "^2.12.1"
+          }
         },
         "glob-parent": {
           "version": "3.1.0",
@@ -9410,6 +9476,13 @@
       "integrity": "sha512-nnbWWOkoWyUsTjKrhgD0dcz22mdkSnpYqbEjIm2nhwhuxlSkpywJmBo8h0ZqJdkp73mb90SssHkN4rsRaBAfAA==",
       "dev": true
     },
+    "nan": {
+      "version": "2.14.2",
+      "resolved": "https://registry.npmjs.org/nan/-/nan-2.14.2.tgz",
+      "integrity": "sha512-M2ufzIiINKCuDfBSAUr1vWQ+vuVcA9kqx8JJUsbQi6yf1uGRyb7HfpdfUr5qLXf3B/t8dPvcjhKMmlfnP47EzQ==",
+      "dev": true,
+      "optional": true
+    },
     "nanoid": {
       "version": "3.1.16",
       "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.1.16.tgz",
@@ -11267,6 +11340,11 @@
       "integrity": "sha512-97DXOFbQJhk71ne5/Mt6cOu6yxsSfM0QGQyl0L25Gca4yGWEGJaig7l7gbCX623VqTBNGLRLaVUCnNkcedlRSQ==",
       "dev": true
     },
+    "preact": {
+      "version": "10.5.7",
+      "resolved": "https://registry.npmjs.org/preact/-/preact-10.5.7.tgz",
+      "integrity": "sha512-4oEpz75t/0UNcwmcsjk+BIcDdk68oao+7kxcpc1hQPNs2Oo3ZL9xFz8UBf350mxk/VEdD41L5b4l2dE3Ug3RYg=="
+    },
     "prelude-ls": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.1.2.tgz",
@@ -15087,7 +15165,11 @@
           "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-1.2.13.tgz",
           "integrity": "sha512-oWb1Z6mkHIskLzEJ/XWX0srkpkTQ7vaopMQkyaEIoq0fmtFVxOthb8cCxeT+p3ynTdkk/RZwbgG4brR5BeWECw==",
           "dev": true,
-          "optional": true
+          "optional": true,
+          "requires": {
+            "bindings": "^1.5.0",
+            "nan": "^2.12.1"
+          }
         },
         "glob-parent": {
           "version": "3.1.0",
@@ -15711,7 +15793,11 @@
           "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-1.2.13.tgz",
           "integrity": "sha512-oWb1Z6mkHIskLzEJ/XWX0srkpkTQ7vaopMQkyaEIoq0fmtFVxOthb8cCxeT+p3ynTdkk/RZwbgG4brR5BeWECw==",
           "dev": true,
-          "optional": true
+          "optional": true,
+          "requires": {
+            "bindings": "^1.5.0",
+            "nan": "^2.12.1"
+          }
         },
         "glob-parent": {
           "version": "3.1.0",

package.json

@@ -23,6 +23,9 @@
     "@angular/platform-browser": "~10.0.5",
     "@angular/platform-browser-dynamic": "~10.0.5",
     "@angular/router": "~10.0.5",
+    "@fullcalendar/angular": "^5.4.0",
+    "@fullcalendar/daygrid": "^5.4.0",
+    "@fullcalendar/interaction": "^5.4.0",
     "@ng-bootstrap/ng-bootstrap": "^8.0.0",
     "@ngx-translate/core": "^13.0.0",
     "@ngx-translate/http-loader": "^6.0.0",

src/app/app.module.ts

@@ -34,10 +34,16 @@ import { MatIconModule } from '@angular/material/icon';
 import { AdminComponent } from './admin/admin.component';
 import { JwtGuard } from './jwt.guard';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import {MatInputModule} from '@angular/material/input';
-import {MatCardModule} from '@angular/material/card';
-import {MatDialogModule } from '@angular/material/dialog';
-
+import { MatInputModule } from '@angular/material/input';
+import { MatCardModule } from '@angular/material/card';
+import { MatDialogModule } from '@angular/material/dialog';
+import { FullCalendarModule } from '@fullcalendar/angular';
+import dayGridPlugin from '@fullcalendar/daygrid'; 
+import interactionPlugin from '@fullcalendar/interaction'; 
+FullCalendarModule.registerPlugins([ 
+  dayGridPlugin,
+  interactionPlugin
+]);
 
 
 @NgModule({
@@ -51,7 +57,7 @@ import {MatDialogModule } from '@angular/material/dialog';
     ThabellaComponent,
     SelectLanguageComponent,
     AdminComponent,
-    LoginComponent
+    LoginComponent, 
   ],
   imports: [
     BrowserModule,
@@ -71,6 +77,8 @@ import {MatDialogModule } from '@angular/material/dialog';
     BrowserAnimationsModule,
     MatExpansionModule,
     I18nModule,
+    BrowserModule,
+    FullCalendarModule,
     MatFormFieldModule,
     MatSelectModule,
     FormsModule,

src/app/events/event.component.ts

-import { Component, OnInit } from '@angular/core';
+import { Component } from '@angular/core';
+import { CalendarOptions } from '@fullcalendar/angular';
 
 @Component({
-  selector: 'app-events',
+  selector: 'app-login',
   templateUrl: './events.component.html',
   styleUrls: ['./events.component.css']
 })
-export class EventComponent implements OnInit {
 
-  constructor() { }
-
-  ngOnInit(): void {
+export class EventComponent {
+  calendarOptions: CalendarOptions = {
+    initialView: 'dayGridMonth',
+    dateClick: this.handleDateClick.bind(this), // bind is important!
+    events: [
+      { title: 'event 1', date: '2020-06-27' },
+      { title: 'event 2', date: '2020-06-30' }
+    ]
+  };
+  handleDateClick(arg) {
+    alert('date click! ' + arg.dateStr)
   }
-
 }
\ No newline at end of file

src/app/events/events.component.html

-<p>events works!</p>
+<full-calendar [options]="calendarOptions"></full-calendar>
\ No newline at end of file

src/app/events/events.component.spec.ts

-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { EventComponent } from './event.component';
-
-describe('EventComponent', () => {
-  let component: EventComponent;
-  let fixture: ComponentFixture<EventComponent>;
-
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
-      declarations: [ EventComponent ]
-    })
-    .compileComponents();
-  }));
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(EventComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});
-