<template> <FullCalendar ref="fullCalendar" scheduler-license-key="GPL-My-Project-Is-Open-Source" :plugins="calendarPlugins" default-view="resourceTimelineDay" :header="{ left: 'today prev,next', center: 'title', right: 'resourceTimelineDay,resourceTimelineWeek' }" :button-text="buttonText" :resource-columns="resourceColumns" :resources="resources" :selectable="selectable" :slot-event-overlap="slotEventOverlap" :overlap="selectOverlap" :select-mirror="selectMirror" :events="calendarEvents" :event-color="'black'" :event-background-color="'#378006'" @select="selectEvent" /> </template> <script> import FullCalendar from '@fullcalendar/vue' import resourceTimelinePlugin from '@fullcalendar/resource-timeline' import interractionPlugin from '@fullcalendar/interaction' import timePlugin from '@fullcalendar/timeline' export default { components: { FullCalendar }, data() { return { calendarPlugins: [resourceTimelinePlugin, interractionPlugin, timePlugin], editable: true, slotEventOverlap: false, buttonText: { today: '今天', month: '月', week: '周', day: '天' }, selectMirror: true, calendarEvents: [ // initial event data { title: 'Event Now', start: new Date(), end: new Date() } ], calendarApi: null, selectable: true, selectOverlap: false, aspectRatio: 1.35, resourceColumns: [ { group: true, labelText: '楼号', field: 'building' }, { labelText: '会议室名称', field: 'title' }, { labelText: '容量', field: 'occupancy' }, { labelText: '媒体播放', field: 'media' } ], resources: [ { id: 'a', building: '勤园1号楼', title: '勤1会议室 A', occupancy: 40, media: 'yes' }, { id: 'b', building: '勤园1号楼', title: '勤1会议室 B', occupancy: 100, media: 'yes' }, { id: 'c', building: '勤园1号楼', title: '勤1会议室 C', occupancy: 20, media: 'yes' }, { id: 'd', building: '勤园1号楼', title: '勤1会议室 D', occupancy: 50, media: 'no' }, { id: 'e', building: '勤园1号楼', title: '勤1会议室 E', occupancy: 4, media: 'no' }, { id: 'f', building: '勤园1号楼', title: '勤1会议室 F', occupancy: 40, media: 'no' }, { id: 'g', building: '勤园2号楼', title: '勤2会议室 G', occupancy: 400, media: 'yes' }, { id: 'h', building: '勤园2号楼', title: '勤2会议室 H', occupancy: 40, media: 'yes' }, { id: 'i', building: '勤园2号楼', title: '勤2会议室 I', occupancy: 40, media: 'yes' }, { id: 'j', building: '勤园2号楼', title: '勤2会议室 J', occupancy: 40, media: 'yes' }, { id: 'k', building: '勤园2号楼', title: '勤2会议室 K', occupancy: 40, media: 'no' }, { id: 'l', building: '勤园2号楼', title: '勤2会议室 L', occupancy: 40, media: 'no' } ] } }, mounted() { this.calendarApi = this.$refs.fullCalendar.getApi() }, methods: { // selects(arg) { // alert('您已选择从 ' + info.startStr + ' 到 ' + info.endStr + '在' + info.resource.title + '进行会议的预约') // var title1 = prompt('请输入会议名称或者预约者的名字') // const calendarApi = this.$refs.fullCalendar.getApi() // if (title1) { // calendarApi.addEvent({ // title: title1, // start: info.start, // end: info.end // }) // } selectEvent(info) { var title = prompt('input') if (title) { console.log(title) this.calendarApi.addEvent({ title: title, start: info.start, end: info.end }) } console.log(info) this.calendarApi.render() } } } </script> <style lang='scss'> @import '~@fullcalendar/core/main.css'; @import '~@fullcalendar/timeline/main.css'; @import '~@fullcalendar/resource-timeline/main.css'; </style>
待解决
悬赏分:60
- 离问题结束还有 85天9小时34分3秒
点赞 0反对 0举报 0
收藏 0
分享 0
