Update calendar

src/app/app.component.ts

@@ -7,4 +7,5 @@ import { Component } from "@angular/core";
 })
 export class AppComponent {
   title = "BookingManagement";
+  
 }
\ No newline at end of file

src/app/pages/home-page/home-page.component.ts

 import { Component, OnInit, ViewChild } from '@angular/core';
 import { FullCalendarComponent, CalendarOptions } from '@fullcalendar/angular';
 import { NgbDate, NgbCalendar, NgbDateParserFormatter, NgbNavChangeEvent } from '@ng-bootstrap/ng-bootstrap';
-
-interface Country {
-  id?: number;
-  catagory: string;
-  type: string;
-  detail: string;
-  name: string;
-  sdate: string;
-  edate: string;
-  status: string;
-}
+import { Equirment } from 'src/app/models/equirment.model';
+import { ItemDetail } from 'src/app/models/itemDetail.model';
+import { RoomDetailService } from 'src/app/service/room-detail.service';
+import { ItemDetailService } from 'src/app/service/item-detail.service';
+import { MyRoom } from 'src/app/models/rooms.model';
+import { EquirmentService } from 'src/app/service/equirment.service';
+import { RoomService } from 'src/app/service/room.service';
+import { RoomDetail } from 'src/app/models/RoomDetail.model';
 
 @Component({
   selector: 'app-home-page',
@@ -52,51 +49,79 @@ export class HomePageComponent implements OnInit {
   pageSize = 10;
   @ViewChild('calendarBook') calendarBook: FullCalendarComponent
 
+  listItemDetail: ItemDetail[] = [];
+  listRoomDetail: RoomDetail[] = [];
+
+  modelEquirment = new Equirment();
+  modelRoom = new MyRoom();
+  modelItemDetail = new ItemDetail();
+  modelRoomDetail = new RoomDetail();
+
   hoveredDate: NgbDate | null = null;
 
   fromDate: NgbDate | null;
   toDate: NgbDate | null;
 
-  countries: Country[] = [
-    {
-      catagory: 'string',
-      type: 'string',
-      detail: 'Moniter',
-      name: 'a',
-      sdate: '2021-11-25',
-      edate: '2021-11-25',
-      status: 'waiting',
-    },
-    {
-      catagory: 'string',
-      type: 'string',
-      detail: 'Mouse',
-      name: 'b',
-      sdate: '2021-11-25',
-      edate: '2021-11-25',
-      status: 'waiting',
-    }
-  ];
-
-  calendarOptions: CalendarOptions;
   showBook = false;
 
+
+
+  calendarOptions: CalendarOptions = {
+    initialView: 'dayGridMonth',
+    dateClick: this.handleDateClick.bind(this), // bind is important!
+    locale: "th",
+    events: [ 
+      {
+        id : '1',
+        title: 'ห้องเดียว',
+        start: '2021-12-16T10:30:00',
+        end: '2021-12-16T11:30:00',
+        extendedProps: {
+          Id: 1,
+          room: {
+            rId: 1,
+            rName: "ห้องเดียว",
+            rType: "ห้อง",
+            rPic: "assets/img/room.jpg",
+            roomLimit: 25,
+            rDesc: "จำนวนคน 25 คน",
+          },
+          userName: 'เกม',
+          sDate: '2021/12/15',
+          eDate: '2021/12/15',
+          sTime: '22:30',
+          eTime: '22:30',
+          rStatus: 0,
+          rTelephone: '0123456789',
+          email: 'qwerty@qwerty',
+          Remark: 'test',
+        },
+        description: 'เกมส์ (0123456789)',
+        color : 'rgb(900,0,0)',
+        
+      }
+    ]
+  };
+  
   handleDateClick(arg) {
     alert('date click! ' + arg.dateStr)
   }
 
-  constructor(private calendar: NgbCalendar, public formatter: NgbDateParserFormatter) {
+  dateKub() {
+    return this.listRoomDetail.length
+  }
+
+  toggleWeekends() {
+    this.calendarOptions.weekends = !this.calendarOptions.weekends // toggle the boolean!
+  }
+
+  constructor(private calendar: NgbCalendar, public formatter: NgbDateParserFormatter, private ItemDetailService: ItemDetailService, private RoomDetailService: RoomDetailService, private equirmentService: EquirmentService, private roomService: RoomService) {
     this.fromDate = calendar.getToday();
     this.toDate = calendar.getNext(calendar.getToday(), 'd', 10);
-    this.refreshCountries();
-  }
 
-  refreshCountries() {
-    this.countries = this.countries
-      .map((country, i) => ({ id: i + 1, ...country }))
-      .slice((this.page - 1) * this.pageSize, (this.page - 1) * this.pageSize + this.pageSize);
   }
 
+
   onDateSelection(date: NgbDate) {
     if (!this.fromDate && !this.toDate) {
       this.fromDate = date;
@@ -129,16 +154,20 @@ export class HomePageComponent implements OnInit {
     setTimeout(function () {
       window.dispatchEvent(new Event('resize'))
     }, 1)
+    this.listItemDetail = this.ItemDetailService.getListItemDetail();
+    this.listRoomDetail = this.RoomDetailService.getListRoomDetail();
   }
 
 
   onNavChange(changeEvent: NgbNavChangeEvent) {
     setTimeout(function () {
       window.dispatchEvent(new Event('resize'))
-    },250);
+    }, 250);
 
   }
 
+
+
 }
 
 export class NgbdDropdownBasic {