Update show calendar pop up

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

 <div class="modal-header">
-    <h4 class="modal-title">Hi there!</h4>
+    <h4 class="modal-title">รายละเอียดการจอง</h4>
     <button type="button" class="close" aria-label="Close" (click)="activeModal.dismiss('Cross click')">
         <span aria-hidden="true">&times;</span>
     </button>
 </div>
-<div class="modal-body">
-    <p>Hello, {{name}}!</p>
-</div>
-<div class="modal-footer">
-    <button type="button" class="btn btn-outline-dark" (click)="activeModal.close('Close click')">Close</button>
+<div class=" modal-body">
+    <div class=" row">
+        <div class=" col-md-12">
+            <div class=" form-group">
+                <label> ชื่อผู้จอง </label>
+                <input readonly class=" form-control" placeholder="" type="text" value={{name}} />
+            </div>
+        </div>
+    </div>
+    <div class=" row">
+        <div class=" col-md-12">
+            <div class=" form-group">
+                <label> เบอร์โทร </label>
+                <input readonly class=" form-control" placeholder="" type="text" value={{telephone}} />
+            </div>
+        </div>
+    </div>
+    <div class="row">
+        <div class="col-sm-12 mb-1">
+            <label for="exampleFormControlSelect1">ชื่อห้อง</label>
+            <input readonly class="form-control" type="text" value={{rName}}>
+        </div>
+    </div>
+    <div class="row">
+        <div class="col-6 mb-1">
+            <label for="exampleFormControlSelect1">เวลาที่เริ่มต้น</label>
+            <input readonly class="form-control" type="time" value={{sTime}}>
+        </div>
+        <div class="col-6 mb-1">
+            <label readonly for="exampleFormControlSelect1">เวลาที่สิ้นสุด</label>
+            <input readonly class="form-control" type="time" value={{eTime}}>
+        </div>
+    </div>
 </div>
\ No newline at end of file

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

@@ -10,4 +10,4 @@
 ::ng-deep .fc-direction-ltr .fc-daygrid-event.fc-event-end, .fc-direction-rtl .fc-daygrid-event.fc-event-start {
     margin-right: 2px;
     background-color: blueviolet;
-}
\ No newline at end of file
+}

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

@@ -9,14 +9,19 @@ 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';
+import { FormControl, FormGroup } from '@angular/forms';
 
 @Component({
   selector: 'ngbd-modal-content',
-  templateUrl: './home-page-calendar.component.html'
+  templateUrl: './home-page-calendar.component.html',
 })
 
 export class NgbdModalContent {
   @Input() name;
+  telephone;
+  rName;
+  sTime;
+  eTime;
 
   constructor(public activeModal: NgbActiveModal) { }
 }
@@ -85,6 +90,10 @@ export class HomePageComponent implements OnInit {
 
   closeResult = '';
 
+  myFormRoom: FormGroup;
+  myFormEquir: FormGroup;
+
+
   calendarRoom: CalendarOptions = {
     initialView: 'dayGridMonth',
     dateClick: this.handleDateClick.bind(this), // bind is important!
@@ -239,7 +248,14 @@ export class HomePageComponent implements OnInit {
   eventShow() {
     this.listRoomDetail = this.RoomDetailService.getListRoomDetail();
     const modalRef = this.modalService.open(NgbdModalContent);
-    modalRef.componentInstance.name = '';
-    modalRef.componentInstance.rName = 'World';
+    modalRef.componentInstance.name = this.selectedRoomDetail.userName;
+    modalRef.componentInstance.telephone = this.selectedRoomDetail.rTelephone;
+    modalRef.componentInstance.rName = this.selectedRoomDetail.room.rName;
+    modalRef.componentInstance.sTime = this.selectedRoomDetail.sTime;
+    modalRef.componentInstance.eTime = this.selectedRoomDetail.eTime;
   }
-}
\ No newline at end of file
+}
+
+function content(content: any, arg1: { ariaLabelledBy: string; }) {
+  throw new Error('Function not implemented.');
+}