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

在本教程中，我們將使用兩個強大的工具：DHTMLX Scheduler庫和Angular框架來創建一個全面的酒店客房預訂應用程序。在上文中（點擊這里回顧>>）我們為大家介紹了一些基礎的準備工作及如何創建Scheduler組件，本文將繼續介紹數據相關的問題、服務器配置等。

Step 4 – 提供和保存數據

數據加載

要在Angular Scheduler中添加數據加載，您需要添加reservation和collections服務。但在此之前，讓我們為項目創建并配置一個環境文件，執行如下命令：

ng generate environments

在src/environments文件夾下新創建的environment.development.ts文件中，我們將添加以下代碼：

export const environment = {
production: false,
apiBaseUrl: '//localhost:3000/data'
};

我們還將為錯誤創建一個助手，當出現錯誤時，它將通過向控制臺發送錯誤消息來通知用戶。為此，用以下代碼在app/services.ts文件夾中創建service- helpers文件：

export function HandleError(error: any): Promise<any>{
console.log(error);
return Promise.reject(error);
}

現在讓我們創建預訂和收集服務，執行如下命令：

ng generate service services/reservation --flat --skip-tests
ng generate service services/collections --flat --skip-tests

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

import { Injectable } from '@angular/core';
import { Reservation } from "../models/reservation";
import { HttpClient } from "@angular/common/http";
import { HandleError } from "./service-helper";
import { firstValueFrom } from 'rxjs';
import { environment } from '../../environments/environment.development';

@Injectable()
export class ReservationService {
private reservationUrl = `${environment.apiBaseUrl}/reservations`;

constructor(private http: HttpClient) { }

get(): Promise<Reservation[]>{
return firstValueFrom(this.http.get(this.reservationUrl))
.catch(HandleError);
}

insert(reservation: Reservation): Promise<Reservation> {
return firstValueFrom(this.http.post(this.reservationUrl, reservation))
.catch(HandleError);
}

update(reservation: Reservation): Promise<void> {
return firstValueFrom(this.http.put(`${this.reservationUrl}/${reservation.id}`, reservation))
.catch(HandleError);
}

remove(id: number): Promise<void> {
return firstValueFrom(this.http.delete(`${this.reservationUrl}/${id}`))
.catch(HandleError);
}
}

在新創建的collections.service.ts文件中，添加以下代碼行：

import { Injectable } from '@angular/core';
import { Room } from "../models/room.model";
import { RoomType } from "../models/room-type.model";
import { CleaningStatus } from "../models/cleaning-status.model";
import { BookingStatus } from "../models/booking-status.model";
import { HttpClient } from "@angular/common/http";
import { HandleError } from "./service-helper";
import { firstValueFrom } from 'rxjs';
import { environment } from '../../environments/environment.development';

@Injectable()
export class CollectionsService {
private collectionsUrl = `${environment.apiBaseUrl}/collections`;

constructor(private http: HttpClient) { }

getRooms(): Promise<Room[]>{
return firstValueFrom(this.http.get(`${this.collectionsUrl}/rooms`))
.catch(HandleError);
}

updateRoom(room: Room): Promise<void> {
return firstValueFrom(this.http.put(`${this.collectionsUrl}/rooms/${room.id}`, room))
.catch(HandleError);
}

getRoomTypes(): Promise<RoomType[]>{
return firstValueFrom(this.http.get(`${this.collectionsUrl}/roomTypes`))
.catch(HandleError);
}

getCleaningStatuses(): Promise<CleaningStatus[]>{
return firstValueFrom(this.http.get(`${this.collectionsUrl}/cleaningStatuses`))
.catch(HandleError);
}

getBookingStatuses(): Promise<BookingStatus[]>{
return firstValueFrom(this.http.get(`${this.collectionsUrl}/bookingStatuses`))
.catch(HandleError);
}
}

get()、getRooms()、getRoomTypes()、getCleaningStatuses()和getBookingStatuses()方法從服務器檢索數據。

reservationUrl和collectionurl是服務的私有元素，它們包含REST API的URL。為了發送HTTP請求，一個HTTP類被注入到服務中。

要插入新項，需要向URL發送POST請求，請求體中包含新項。

要更新項，需要向url/item_id發送一個PUT請求。此請求還在其主體中包含更新后的項。

要刪除項，需要向url/item_id發送刪除請求。

CRUD操作

服務應該處理調度器中的CRUD操作，通過在reservations.service.ts和collections.service.ts文件中添加HttpClient模塊，HTTP通信已經啟用：

import { HttpClient } from "@angular/common/http";

這一步允許我們在Angular應用中無縫地獲取數據。

要利用HttpClient模塊，還需要從@angular/common/http包中包含必需的HttpClientModule。在app.module.ts文件中，您應該像下面這樣更新imports數組：

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';
import { HttpClientModule } from '@angular/common/http';

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

HTMLX Scheduler組件應該使用ReservationService和CollectionsService來獲取/插入/更新/刪除預訂和集合，為了啟用這些選項，向組件添加ReservationService和CollectionsService。首先在scheduler.component.ts中導入服務所需的模塊：

import { ReservationService } from '../services/reservation.service';
import { CollectionsService } from '../services/collections.service';

您還應該將@Component裝飾器中指定EventService作為提供商：

providers: [ ReservationService, CollectionsService ]

現在每次初始化一個新的SchedulerComponent時，都會創建一個新的服務實例。

服務應該準備好被注入到組件中。為此，將以下構造函數添加到SchedulerComponent類中：

constructor(
private reservationService: ReservationService,
private collectionsService: CollectionsService
) { }

接下來，我們將添加updateRoom()方法來在數據庫中保存room清潔狀態的更改：

handleCleaningStatusChange(target: HTMLSelectElement) {
...
this.collectionsService.updateRoom(roomToUpdate);
}

您需要修改ngOnInit函數來調用服務獲取該函數，然后等待響應來將數據放入調度器。

scheduler.init(this.schedulerContainer.nativeElement, new Date(), 'timeline');

const dp = scheduler.createDataProcessor({
event: {
create: (data: Reservation) => this.reservationService.insert(data),
update: (data: Reservation) => this.reservationService.update(data),
delete: (id: number) => this.reservationService.remove(id),
}
});

forkJoin({
reservations: this.reservationService.get(),
rooms: this.collectionsService.getRooms(),
roomTypes: this.collectionsService.getRoomTypes(),
cleaningStatuses: this.collectionsService.getCleaningStatuses(),
bookingStatuses: this.collectionsService.getBookingStatuses()
}).subscribe({
next: ({ reservations, rooms, roomTypes, cleaningStatuses, bookingStatuses }) => {
const data = {
events: reservations,
collections: {
rooms,
roomTypes,
cleaningStatuses,
bookingStatuses,
}
};

scheduler.parse(data);
},
error: error => {
console.error('An error occurred:', error);
}
});

scheduler.parse接受JSON格式的數據對象，為了有效地等待多個異步請求的完成并將它們的數據(保留和集合)加載到調度器中，可以利用RxJS庫中的forkJoin操作符。請包括導入：

import { forkJoin } from 'rxjs';

你可以在的完整代碼。