「实用场景教程」如何用日程控件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>

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

相关推荐
ggdpzhk39 分钟前
VUE:基于MVVN的前端js框架
前端·javascript·vue.js
小曲曲2 小时前
接口上传视频和oss直传视频到阿里云组件
javascript·阿里云·音视频
学不会•3 小时前
css数据不固定情况下,循环加不同背景颜色
前端·javascript·html
EasyNTS4 小时前
H.264/H.265播放器EasyPlayer.js视频流媒体播放器关于websocket1006的异常断连
javascript·h.265·h.264
活宝小娜5 小时前
vue不刷新浏览器更新页面的方法
前端·javascript·vue.js
程序视点5 小时前
【Vue3新工具】Pinia.js:提升开发效率,更轻量、更高效的状态管理方案!
前端·javascript·vue.js·typescript·vue·ecmascript
coldriversnow5 小时前
在Vue中,vue document.onkeydown 无效
前端·javascript·vue.js
我开心就好o5 小时前
uniapp点左上角返回键, 重复来回跳转的问题 解决方案
前端·javascript·uni-app
刚刚好ā6 小时前
js作用域超全介绍--全局作用域、局部作用、块级作用域
前端·javascript·vue.js·vue
yqcoder8 小时前
reactflow 中 useNodesState 模块作用
开发语言·前端·javascript