网站开发微信授权登录,ftp 如何 更新 wordpress,制作网站建设的,怎么下载四川人社app文章目录 前言一、关于vue-full-calendar二、使用步骤1. 引入库2. 使用库3. 开始编码4. 实际效果图展示5. 点击弹窗展示6. 弹窗展示效果图 总结 前言
近些天有位做酒店业务朋友问到我#xff0c;有没有前端比较好用的预定日历查看插件#xff0c;实际上我也没有研究过#… 文章目录 前言一、关于vue-full-calendar二、使用步骤1. 引入库2. 使用库3. 开始编码4. 实际效果图展示5. 点击弹窗展示6. 弹窗展示效果图 总结 前言
近些天有位做酒店业务朋友问到我有没有前端比较好用的预定日历查看插件实际上我也没有研究过毕竟我的专长还是后端不过迫与多年好友关系帮他研究了一把现在前端发展的真的是非常快今天分享一款比较好用的预定日历展示插件vue-full-calendar并给出主要的使用演示。 大概实现的思路是展示完整的月预定日历并且实现点击每一个预定弹窗展示一下具体的预定信息。 一、关于vue-full-calendar
vue-full-calendar是一个非常强大的日历工具官方的介绍请 点击这里。
二、使用步骤
1. 引入库
npm install --save vue-full-calendar2. 使用库
在需要引入的vue文件中script标签头部放入如下代码。
import { FullCalendar } from vue-full-calendar
import fullcalendar/dist/fullcalendar.css;引入组件将FullCalendar放入components里面。
components: {...FullCalendar
},3. 开始编码
配置Calendar组件到网页
div classfullCalendarContfull-calendar:configconfig:eventseventsrefcalendar/full-calendar
/div配置config将如下代码放置到data()里面。其中events这里是写死的数据实际过程中应该由api接口返回的数据组装而成。
events: [{id: 1,title: 2位成人,1位儿童,start: 2022-05-13,end: 2022-05-14,},{id: 2,title: 2位成人,1位儿童,start: 2022-05-15,end: 2022-05-16,},
],
calendarData: [],
config: {header: {left:title,center: ,right: today prev,next month},// 自定义按钮文字buttonText: {month: 月,today:今天},//日历切换时间范围validRange: { start: 2020-03-01,end: 2028-07-01},locale: zh-cn, //中文allDaySlot: false, // 是否显示allDaydefaultView: month, // 显示默认视图showNonCurrentDates: false, //是否在本月中显示其他月//事件eventMouseover: this.eventMouseover, // 事件悬停eventClick: this.eventClick, // 事件点击dayClick: this.dayClick // 天点击
}4. 实际效果图展示 5. 点击弹窗展示
这里主要利用到config里面的配置eventClick: this.eventClick。要实现eventClick这方法。先放一个弹窗组件到页面。
el-dialogtitle预定信息:visible.syncorderDialogVisiblewidth30%span v-htmlcalendarOrderInfo styleline-height: 25px;/spanspan slotfooter classdialog-footerel-button clickorderDialogVisible false确 认/el-button/span
/el-dialog接下来实现eventClick方法。其中event.id就是预定的id和events数据中的id对应通过数据匹配拿到这个id对应的订单信息就可以展示在dialog里面了。
eventClick (event, jsEvent, pos) {let item {};this.calendarData.forEach(element {if(element.id event.id) {item element}})let payStatus item.ps bg-success ? 成功 : 未清this.calendarOrderInfo this.calendarOrderInfo 入住时间 ${item.startsAt}br/退房时间${item.ea}br/预定平台${item.pf}br/订单编号${item.os}br/客人姓名${item.un}br/入住人数${item.gt}br/订单金额${item.amount}br/邮箱${item.ue}br/联系电话${item.um}br/收款状态${ps}br/收款方式${item.pm}br/订单备注${item.r}br/this.orderDialogVisible true
},6. 弹窗展示效果图 总结
以上就是今天要讲的内容用vue-full-calendar实现酒店预定管理展示。您也可以通过链接 https://www.npmjs.com/package/vue-full-calendar获取最新的插件版本哟。如有疑问欢迎评论区留言讨论。
