Update eventClick showRoom

.npmrc

+@mobiscroll:registry=https://npm.mobiscroll.com
+//npm.mobiscroll.com/:_authToken=uFtjBa4niqAV2wzzmtKNzc4xcGGu/954vqZr6Kt3hao=

src/app/app.module.ts

@@ -25,6 +25,7 @@ import { AdminEquirmentComponent } from './pages/admin-equirment/admin-equirment
 import { ContactAdminComponent } from './pages/contact-admin/contact-admin.component'
 
 
+
 FullCalendarModule.registerPlugins([ // register FullCalendar plugins
   dayGridPlugin,
   interactionPlugin
@@ -41,7 +42,8 @@ FullCalendarModule.registerPlugins([ // register FullCalendar plugins
     AppRoutingModule,
     ToastrModule.forRoot(),
     FullCalendarModule,
-    ReactiveFormsModule
+    ReactiveFormsModule,
+    
   ],
   declarations: [AppComponent, AdminLayoutComponent, AuthLayoutComponent, HomePageComponent, EquipmentComponent, CalenRoomComponent, AdminPendingComponent, PendingComponent, AdminEquirmentComponent, ContactAdminComponent],
   providers: [],

src/app/pages/calen-room/calen-room.component.ts

 import { Component, OnInit } from '@angular/core';
 
+
 @Component({
   selector: 'app-calen-room',
   templateUrl: './calen-room.component.html',

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

@@ -72,7 +72,7 @@
                             <a ngbNavLink>ปฏิทินการจองห้อง</a>
                             <ng-template ngbNavContent>
                                 <full-calendar #calendarBook [options]="calendarRoom" style="
-                                margin-top: 20px;"></full-calendar>
+                                margin-top: 20px;" (click)="eventClick(showRoom)"></full-calendar>
                             </ng-template>
                         </li>
                         <li [ngbNavItem]="2">
@@ -88,5 +88,34 @@
             </div>
         </div>
     </div>
-
 </div>
+
+<ng-template #showRoom let-modal>
+    <div class=" col-md-12" style="padding: 0; ">
+        <div class="card" style="margin: 0; ">
+            <div class=" card-header">
+                <h5 class=" title">รายละเอียดการจอง</h5>
+            </div>
+            <div class=" card-body">
+                <div class="row">
+                    <div class="col-md-12">
+                        <label> ชื่อผู้จอง </label>
+                        <input readonly class="form-control" placeholder="" type="text" />
+                    </div>
+                </div>
+                <div class=" row">
+                    <div class="col-md-12">
+                        <label> เบอร์โทร </label>
+                        <input readonly class="form-control" placeholder="" type="text" />
+                    </div>
+                </div>
+                <div class="row">
+                    <div class="col-sm-12">
+                        <label for="exampleFormControlSelect1">ชื่อห้อง</label>
+                        <input readonly class="form-control" placeholder="" type="text" />
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</ng-template>
\ 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';
+import { NgbDate, NgbCalendar, NgbDateParserFormatter, NgbNavChangeEvent, NgbModal, ModalDismissReasons } from '@ng-bootstrap/ng-bootstrap';
 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';
@@ -56,6 +56,7 @@ export class HomePageComponent implements OnInit {
   modelRoom = new MyRoom();
   modelItemDetail = new ItemDetail();
   modelRoomDetail = new RoomDetail();
+  selectedRoomDetail = new RoomDetail();
 
   hoveredDate: NgbDate | null = null;
 
@@ -66,6 +67,12 @@ export class HomePageComponent implements OnInit {
   eventRoom = [];
   eventEquirment = [];
 
+  showModal: boolean;
+  title = 'ngularfullcalendarbootstrap';
+  name:string;
+  date:string;
+
+  closeResult = '';
  
   calendarRoom: CalendarOptions = {
     initialView: 'dayGridMonth',
@@ -93,12 +100,21 @@ export class HomePageComponent implements OnInit {
     this.calendarRoom.weekends = !this.calendarRoom.weekends // toggle the boolean!
   }
 
-  constructor(private calendar: NgbCalendar, public formatter: NgbDateParserFormatter, private ItemDetailService: ItemDetailService, private RoomDetailService: RoomDetailService, private equirmentService: EquirmentService, private roomService: RoomService) {
+  constructor(private calendar: NgbCalendar, public formatter: NgbDateParserFormatter, private ItemDetailService: ItemDetailService, private RoomDetailService: RoomDetailService, private equirmentService: EquirmentService, private roomService: RoomService,
+    private modalService: NgbModal) {
     this.fromDate = calendar.getToday();
     this.toDate = calendar.getNext(calendar.getToday(), 'd', 10);
-
   }
 
+  private getDismissReason(reason: any): string {
+    if (reason === ModalDismissReasons.ESC) {
+      return 'by pressing ESC';
+    } else if (reason === ModalDismissReasons.BACKDROP_CLICK) {
+      return 'by clicking on a backdrop';
+    } else {
+      return `with: ${reason}`;
+    }
+  }
 
   onDateSelection(date: NgbDate) {
     if (!this.fromDate && !this.toDate) {
@@ -171,16 +187,26 @@ export class HomePageComponent implements OnInit {
       initialView: 'dayGridMonth',
       themeSystem: 'bootstrap',
       dayMaxEventRows: true, 
-      dateClick: this.handleDateClick.bind(this), // bind is important!
       locale: "th",
-      events: this.eventRoom
+      events: this.eventRoom,
+      eventClick: function(info) {
+      
+        this.selectedRoomDetail = info.event.extendedProps ;
+        console.log(this.selectedRoomDetail)
+        // alert('Event: ' + info.event.title);
+        // alert('Coordinates: ' + info.jsEvent.pageX + ',' + info.jsEvent.pageY);
+        // alert('View: ' + info.view.type);
+    
+        // // change the border color just for fun
+        // info.el.style.borderColor = 'red';
+
+      }
     };
 
     this.calendarEquirment = {
       initialView: 'dayGridMonth',
       themeSystem: 'bootstrap',
       dayMaxEventRows: true, 
-      dateClick: this.handleDateClick.bind(this), // bind is important!
       locale: "th",
       events: this.eventEquirment
     };
@@ -194,6 +220,13 @@ export class HomePageComponent implements OnInit {
 
   }
 
+  eventClick(showRoom) {
 
+    this.modalService.open(showRoom, { ariaLabelledBy: 'modal-basic-title' }).result.then((result) => {
+      this.closeResult = `Closed with: ${result}`;
+    }, (reason) => {
+      this.closeResult = `Dismissed ${this.getDismissReason(reason)}`;
+    });
+  }
 
 }