dhtmlxScheduler是一個類似于Google日歷的JavaScript日程安排控件，日歷事件通過Ajax動態加載，支持通過拖放功能調整事件日期和時間，事件可以按天，周，月三個種視圖顯示。

在本教程中，我們將使用兩個強大的工具：DHTMLX Scheduler庫和Angular框架來創建一個全面的酒店客房預訂應用程序。在這篇文章中，我們的目標是創建一個看起來像這樣的應用程序：

Angular酒店預訂應用將能夠顯示酒店房間、房間類型、房間狀態、特定日期的預訂和預訂狀態，該應用程序還允許執行CRUD操作。

如果您剛開始配置DHTMLX Scheduler來預訂房間或將其集成到Angular應用程序中，我們還為您提供了專門的教程：

Step 0 – 前提條件

在開始之前，請確保您已經有了和。

Step 1 – 準備應用程序

要創建應用程序，使用如下命令：

ng new room-reservation-angular

操作完成后，我們可以進入app目錄并運行應用程序：

cd room-reservation-angular
ng serve

現在如果打開打開//127.0.0.1:4200，應該看到初始頁面。ng serve命令將監視源文件，并在必要時修改和重建應用程序。

Step 2 – 創建數據模型

讓我們定義Reservation、Room、RoomType、CleaningStatus和BookingStatus模型，執行如下命令：

ng generate interface models/reservation model
ng generate interface models/room model
ng generate interface models/roomType model
ng generate interface models/cleaningStatus model
ng generate interface models/bookingStatus model

在models文件夾中新創建的reservation.model.ts文件中，我們將添加以下代碼：

export interface Reservation {
id: number;
start_date: string;
end_date: string;
text: string;
room: string;
booking_status: string;
is_paid: string;
}

在room.model.ts、room-type.model.ts、cleaning-status.model.ts、booking-status.model.ts文件中，添加下面的代碼行：

export interface Room {
id: number;
value: string;
label: string;
type: string;
cleaning_status: string;
}

export interface RoomType {
id: string;
value: string;
label: string;
}

export interface CleaningStatus {
id: string;
value: string;
label: string;
color: string;
}

export interface BookingStatus {
id: string;
value: string;
label: string;
}

Step 3 – 創建Scheduler組件

下載DHTMLX Scheduler PRO版最新的試用版（直接戳這里>>），將下載的包解壓縮到本地機器的項目根文件夾中。為了能夠將Scheduler嵌入到應用程序中，您應該獲得DHTMLX Scheduler代碼。執行如下命令：

npm install ./scheduler_6.0.5_trial

創建一個新的組件，為此運行以下命令：

ng generate component scheduler --skip-tests

在scheduler文件夾中新創建的scheduler.component.html文件將包含調度器的模版，讓我們添加下一行代碼：

<div #scheduler_here class='dhx_cal_container' style='width:100%; height:100vh'>
<div class='dhx_cal_navline'>
<div style='font-size:16px;padding:4px 20px;'>
Show rooms:
<select id='room_filter' [(ngModel)]='selectedRoomType' (ngModelChange)='filterRoomsByType($event)'></select>
</div>
<div class='dhx_cal_prev_button'>&nbsp;</div>
<div class='dhx_cal_next_button'>&nbsp;</div>
<div class='dhx_cal_today_button'></div>
<div class='dhx_cal_date'></div>
</div>
<div class='dhx_cal_header'></div>
<div class='dhx_cal_data'></div>
</div>

使用ngModel和ngModelChange指令來建立組件中select元素和數據之間的交互，請將FormsModule模塊添加到app.module.ts文件中。

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { SchedulerComponent } from './scheduler/scheduler.component';

import { FormsModule } from '@angular/forms';

@NgModule({
declarations: [
AppComponent,
SchedulerComponent
],
imports: [
BrowserModule,
AppRoutingModule,
FormsModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

將在名為scheduler.component.css的單獨文件中聲明scheduler樣式，央視可以以下面的方式呈現：

@import '~dhtmlx-scheduler/codebase/dhtmlxscheduler_flat.css';
:host {
display: block;
position: relative;
height: 100%;
width: 100%;
}
html, body {
margin: 0;
padding: 0;
height: 100%;
overflow: hidden;
}
.dhx_cal_container #room_filter:focus {
outline: 1px solid #52daff;
}
.timeline-cell-inner {
height: 100%;
width: 100%;
table-layout: fixed;
}
.timeline-cell-inner td {
border-left: 1px solid #cecece;
}
.dhx_section_time select {
display: none;
}
.timeline_weekend {
background-color: #FFF9C4;
}
.timeline_item_cell {
width: 32%;
height: 100% !important;
font-size: 14px;
text-align: center;
line-height: 50px;
}
.cleaning_status {
position: relative;
}
.timeline_item_separator {
background-color: #CECECE;
width: 1px;
height: 100% !important;
}
.dhx_cal_event_line {
background-color: #FFB74D !important;
}
.event_1 {
background-color: #FFB74D !important;
}
.event_2 {
background-color: #9CCC65 !important;
}
.event_3 {
background-color: #40C4FF !important;
}
.event_4 {
background-color: #BDBDBD !important;
}
.booking_status,
.booking_paid {
position: absolute;
right: 5px;
}
.booking_status {
top: 2px;
}
.booking_paid {
bottom: 2px;
}
.dhx_cal_event_line:hover .booking-option {
background: none !important;
}
.dhx_cal_header .dhx_scale_bar {
line-height: 26px;
color: black;
}
.dhx_section_time select {
display: none
}
.dhx_mini_calendar .dhx_year_week,
.dhx_mini_calendar .dhx_scale_bar {
height: 30px !important;
}
.dhx_cal_light_wide .dhx_section_time {
text-align: left;
}
.dhx_cal_light_wide .dhx_section_time > input:first-child {
margin-left: 10px;
}
.dhx_cal_light_wide .dhx_section_time input {
border: 1px solid #aeaeae;
padding-left: 5px;
}
.dhx_cal_light_wide .dhx_readonly {
padding: 3px;
}
.collection_label .timeline_item_cell {
line-height: 60px;
}
.dhx_cal_radio label,
.dhx_cal_radio input {
vertical-align: middle;
}
.dhx_cal_radio input {
margin-left: 10px;
margin-right: 2px;
}
.dhx_cal_radio input:first-child {
margin-left: 5px;
}
.dhx_cal_radio {
line-height: 19px;
}
.dhtmlXTooltip.tooltip {
color: #4d4d4d;
font-size: 15px;
line-height: 140%;
}

要使scheduler容器占據主體的整個空間，您需要在src文件夾下的styles.css文件中添加以下樣式：

body,
html {
width: 100%;
height: 100%;
margin: unset;
}

 要繼續，我們需要導入所需的模塊，并將必要的代碼行添加到scheduler.component.ts文件中：

請在GitHub上查看 的完整代碼。

現在讓我們將新組件添加到頁面中，為此打開app.component.html(位于src/app中)并在其中插入scheduler標簽:

<scheduler></scheduler>

在下文中，我們將為大家繼續介紹如何加載和保存數據，記得持續關注哦~