企业网站建设上市公司,WordPress评论加入ip,整合营销理论主要是指,php免费空间dhtmlxScheduler是一个类似于Google日历的JavaScript日程安排控件#xff0c;日历事件通过Ajax动态加载#xff0c;支持通过拖放功能调整事件日期和时间#xff0c;事件可以按天#xff0c;周#xff0c;月三个种视图显示。 DHTMLX Scheduler正式版下载 在本教程中…dhtmlxScheduler是一个类似于Google日历的JavaScript日程安排控件日历事件通过Ajax动态加载支持通过拖放功能调整事件日期和时间事件可以按天周月三个种视图显示。 DHTMLX Scheduler正式版下载 在本教程中我们将使用两个强大的工具DHTMLX Scheduler库和Angular框架来创建一个全面的酒店客房预订应用程序。在这篇文章中我们的目标是创建一个看起来像这样的应用程序 Angular酒店预订应用将能够显示酒店房间、房间类型、房间状态、特定日期的预订和预订状态该应用程序还允许执行CRUD操作。 如果您刚开始配置DHTMLX Scheduler来预订房间或将其集成到Angular应用程序中我们还为您提供了专门的教程 Configuring DHTMLX Scheduler for Hotel BookingIntegrating DHTMLX Scheduler into an Angular App Step 0 – 前提条件 在开始之前请确保您已经有了Node.js和Angular CLI。 Step 1 – 准备应用程序 要创建应用程序使用如下命令 ng new room-reservation-angular 操作完成后我们可以进入app目录并运行应用程序 cd room-reservation-angularng serve 现在如果打开打开http://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 classdhx_cal_container stylewidth:100%; height:100vh div classdhx_cal_navline div stylefont-size:16px;padding:4px 20px; Show rooms: select idroom_filter [(ngModel)]selectedRoomType (ngModelChange)filterRoomsByType($event)/select /div div classdhx_cal_prev_buttonnbsp;/div div classdhx_cal_next_buttonnbsp;/div div classdhx_cal_today_button/div div classdhx_cal_date/div /div div classdhx_cal_header/div div classdhx_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上查看scheduler.component.ts 的完整代码。 现在让我们将新组件添加到页面中为此打开app.component.html(位于src/app中)并在其中插入scheduler标签: scheduler/scheduler 在下文中我们将为大家继续介绍如何加载和保存数据记得持续关注哦~