Update eventClick

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;" (eventClick)="eventShow(showRoom)"></full-calendar>
+                                margin-top: 20px;"></full-calendar>
                             </ng-template>
                         </li>
                         <li [ngbNavItem]="2">
@@ -90,7 +90,7 @@
     </div>
 </div>
 
-<ng-template #showRoom let-modal>
+<!-- <ng-template #showRoom let-modal>
     <div class=" col-md-12" style="padding: 0; ">
         <div class="card" style="margin: 0; ">
             <div class=" card-header">
@@ -118,4 +118,4 @@
             </div>
         </div>
     </div>
-</ng-template>
\ No newline at end of file
+</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 { Component, Input, OnInit, ViewChild } from '@angular/core';
 import { FullCalendarComponent, CalendarOptions } from '@fullcalendar/angular';
-import { NgbDate, NgbCalendar, NgbDateParserFormatter, NgbNavChangeEvent, NgbModal, ModalDismissReasons } from '@ng-bootstrap/ng-bootstrap';
+import { NgbDate, NgbCalendar, NgbDateParserFormatter, NgbNavChangeEvent, NgbModal, ModalDismissReasons, NgbActiveModal } 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';
@@ -11,6 +11,45 @@ import { RoomService } from 'src/app/service/room.service';
 import { RoomDetail } from 'src/app/models/RoomDetail.model';
 
 @Component({
+  selector: 'ngbd-modal-content',
+  template: ` 
+  <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" value="listRoomDetail.userName" />
+                    </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>
+`
+})
+
+export class NgbdModalContent {
+  @Input() name;
+
+  constructor(public activeModal: NgbActiveModal) { }
+}
+
+@Component({
   selector: 'app-home-page',
   templateUrl: './home-page.component.html',
   styleUrls: ['./home-page.component.scss'],
@@ -38,7 +77,7 @@ import { RoomDetail } from 'src/app/models/RoomDetail.model';
   .custom-day.faded {
     background-color: rgba(2, 117, 216, 0.5);
   }
-`]
+`],
 })
 
 
@@ -69,11 +108,11 @@ export class HomePageComponent implements OnInit {
 
   showModal: boolean;
   title = 'ngularfullcalendarbootstrap';
-  name:string;
-  date:string;
+  name: string;
+  date: string;
 
   closeResult = '';
- 
+
   calendarRoom: CalendarOptions = {
     initialView: 'dayGridMonth',
     dateClick: this.handleDateClick.bind(this), // bind is important!
@@ -89,7 +128,10 @@ export class HomePageComponent implements OnInit {
   };
 
   handleDateClick(arg) {
-    alert('date click! ' + arg.dateStr)
+    // alert('date click! ' + arg.dateStr)
+    this.selectedRoomDetail = arg.event.extendedProps;
+    console.log(this.selectedRoomDetail)
+    this.eventShow();
   }
 
   dateKub() {
@@ -159,7 +201,7 @@ export class HomePageComponent implements OnInit {
           end: '2021-12-16T11:30:00',
           extendedProps: this.listRoomDetail[i],
           description: this.listRoomDetail[i].remark,
-          allDay : this.listRoomDetail[i].allDay
+          allDay: this.listRoomDetail[i].allDay
         }
         )
       }
@@ -186,32 +228,34 @@ export class HomePageComponent implements OnInit {
     this.calendarRoom = {
       initialView: 'dayGridMonth',
       themeSystem: 'bootstrap',
-      dayMaxEventRows: true, 
+      dayMaxEventRows: true,
       locale: "th",
       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';
+      eventClick: this.handleDateClick.bind(this),
+//         this.selectedRoomDetail = info.event.extendedProps;
+//         console.log(this.selectedRoomDetail)
+// this.test();
+//         // 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, 
+      dayMaxEventRows: true,
       locale: "th",
       events: this.eventEquirment
     };
   }
 
+  test(){
+    alert("sssssssss");
+  }
 
   onNavChange(changeEvent: NgbNavChangeEvent) {
     setTimeout(function () {
@@ -220,13 +264,9 @@ export class HomePageComponent implements OnInit {
 
   }
 
-  eventShow(showRoom) {
+  eventShow() {
+    const modalRef = this.modalService.open(NgbdModalContent);
+    modalRef.componentInstance.name = 'World';
 
-    this.modalService.open(showRoom, { ariaLabelledBy: 'modal-basic-title' }).result.then((result) => {
-      this.closeResult = `Closed with: ${result}`;
-    }, (reason) => {
-      this.closeResult = `Dismissed ${this.getDismissReason(reason)}`;
-    });
   }
-
-}
+}
\ No newline at end of file