「实用场景教程」如何用日程控件DHTMLX Scheduler制作酒店预订日历?(一)

dhtmlxScheduler是一个类似于Google日历的JavaScript日程安排控件,日历事件通过Ajax动态加载,支持通过拖放功能调整事件日期和时间,事件可以按天,周,月三个种视图显示。

DHTMLX Scheduler正式版下载

在本教程中,我们将使用两个强大的工具:DHTMLX Scheduler库和Angular框架来创建一个全面的酒店客房预订应用程序。在这篇文章中,我们的目标是创建一个看起来像这样的应用程序:

Angular酒店预订应用将能够显示酒店房间、房间类型、房间状态、特定日期的预订和预订状态,该应用程序还允许执行CRUD操作。

如果您刚开始配置DHTMLX Scheduler来预订房间或将其集成到Angular应用程序中,我们还为您提供了专门的教程:

Step 0 -- 前提条件

在开始之前,请确保您已经有了Node.jsAngular CLI

Step 1 -- 准备应用程序

要创建应用程序,使用如下命令:

ng new room-reservation-angular

操作完成后,我们可以进入app目录并运行应用程序:

cd room-reservation-angular
ng serve

现在如果打开打开http://127.0.0.1:4200,应该看到初始页面。ng serve命令将监视源文件,并在必要时修改和重建应用程序。

Step 2 -- 创建数据模型

让我们定义Reservation、Room、RoomType、CleaningStatus和BookingStatus模型,执行如下命令:

javascript 复制代码
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文件中,我们将添加以下代码:

javascript 复制代码
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文件中,添加下面的代码行:

javascript 复制代码
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文件将包含调度器的模版,让我们添加下一行代码:

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文件中。

javascript 复制代码
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样式,央视可以以下面的方式呈现:

css 复制代码
@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文件中添加以下样式

css 复制代码
body,
html {
width: 100%;
height: 100%;
margin: unset;
}

要继续,我们需要导入所需的模块,并将必要的代码行添加到scheduler.component.ts文件中:

请在GitHub上查看scheduler.component.ts 的完整代码。

现在让我们将新组件添加到页面中,为此打开app.component.html(位于src/app中)并在其中插入scheduler标签:

html 复制代码
<scheduler></scheduler>

在下文中,我们将为大家继续介绍如何加载和保存数据,记得持续关注哦~

相关推荐
quitv16 分钟前
react脚手架配置别名
前端·javascript·react.js
Gazer_S2 小时前
【现代前端框架中本地图片资源的处理方案】
前端·javascript·chrome·缓存·前端框架
贺今宵4 小时前
通过$attrs传递的未指定名称的modelValue值在子组件中修改
前端·javascript
lifire_H8 小时前
Canvas在视频应用中的技术解析
前端·javascript·音视频
cwtlw9 小时前
PhotoShop学习01
笔记·学习·ui·photoshop
十八朵郁金香10 小时前
深入理解 JavaScript 中的 this 指向
开发语言·前端·javascript
贵州晓智信息科技10 小时前
使用 Three.js 转换 GLSL 粒子效果着色器
开发语言·javascript·着色器
linkcoco11 小时前
记录h5使用navigator.mediaDevices.getUserMedia录制音视频
前端·javascript·vue·音视频·js
Mh11 小时前
代码提交校验及提交规范的实践方案
前端·javascript·架构
昨日余光11 小时前
仅需三分钟,使用Vue3.x版本组件式风格实现一个消息提示组件!
前端·javascript·css·vue.js·typescript·html