<div class=" content"> <div class="row"> <div class="col-sm-8"> <div class="card"> <div class="card-body"> <form class="form-inline"> <div class="form-group hidden"> <div class="input-group"> <input name="datepicker" class="form-control" ngbDatepicker #datepicker="ngbDatepicker" [autoClose]="'outside'" (dateSelect)="onDateSelection($event)" [displayMonths]="2" [dayTemplate]="t" outsideDays="hidden" [startDate]="fromDate!" tabindex="-1"> <ng-template #t let-date let-focused="focused"> <span class="custom-day" [class.focused]="focused" [class.range]="isRange(date)" [class.faded]="isHovered(date) || isInside(date)" (mouseenter)="hoveredDate = date" (mouseleave)="hoveredDate = null"> {{ date.day }} </span> </ng-template> </div> </div> <div class="form-group"> <div class="input-group"> <input #dpFromDate class="form-control" placeholder="yyyy-mm-dd" name="dpFromDate" [value]="formatter.format(fromDate)" (input)="fromDate = validateInput(fromDate, dpFromDate.value)"> <div class="input-group-append"> <button class="btn btn-outline-secondary calendar" (click)="datepicker.toggle()" type="button"></button> </div> </div> </div> <div class="form-group ml-2"> <div class="input-group"> <input #dpToDate class="form-control" placeholder="yyyy-mm-dd" name="dpToDate" [value]="formatter.format(toDate)" (input)="toDate = validateInput(toDate, dpToDate.value)"> <div class="input-group-append"> <button class="btn btn-outline-secondary calendar" (click)="datepicker.toggle()" type="button"></button> </div> </div> </div> </form> </div> </div> </div> <div class="col-4"> <div class="card"> <div class="card-body"> <div ngbDropdown class="d-inline-block"> <button class="btn btn-sm btn-outline-primary" id="dropdownBasic1" ngbDropdownToggle>ประเภทการค้นหา</button> <div ngbDropdownMenu aria-labelledby="dropdownBasic1"> <button ngbDropdownItem>รอดำเนินการ</button> <button ngbDropdownItem>อนุมัติ</button> <button ngbDropdownItem>ยกเลิก</button> <button ngbDropdownItem>สำเร็จแล้ว</button> </div> <button class="btn btn-sm btn-outline-success" type="submit">Search</button> </div> </div> </div> </div> </div> <div class="row"> <div class="col-sm-12"> <div class="card"> <div class="card-body"> <ul ngbNav #nav="ngbNav" [(activeId)]="active" (navChange)="onNavChange($event)" class="nav-tabs"> <li [ngbNavItem]="1"> <a ngbNavLink>ปฏิทินการจองห้อง</a> <ng-template ngbNavContent> <full-calendar #calendarBook [options]="calendarRoom" style=" margin-top: 20px;" (eventClick)="eventShow(showRoom)"></full-calendar> </ng-template> </li> <li [ngbNavItem]="2"> <a ngbNavLink>ปฏิทินการยืมรถ</a> <ng-template ngbNavContent> <full-calendar #calendar [options]="calendarEquirment" style=" margin-top: 20px;"></full-calendar> </ng-template> </li> </ul> <div [ngbNavOutlet]="nav"></div> </div> </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>