|
<template>
|
<div class="demo-app">
|
<div class="demo-app-sidebar">
|
<div class="demo-app-sidebar-section">
|
<h2>说明</h2>
|
<ul>
|
<li>选择日期后，系统会提示您创建一个新事件</li>
|
<li>拖放和调整事件大小</li>
|
<li>单击某个事件，可以删除该事件</li>
|
</ul>
|
</div>
|
<div class="demo-app-sidebar-section">
|
<label>
|
<input
|
type="checkbox"
|
:checked="calendarOptions.weekends"
|
@change="handleWeekendsToggle"
|
/>
|
切换周末
|
</label>
|
</div>
|
<div class="demo-app-sidebar-section">
|
<h2>All Events ({{ currentEvents.length }})</h2>
|
<ul>
|
<li v-for="event in currentEvents" :key="event.id">
|
<b>{{ event.startStr }}</b>
|
<i>{{ event.title }}</i>
|
</li>
|
</ul>
|
</div>
|
</div>
|
<div class="demo-app-main">
|
<FullCalendar class="demo-app-calendar" :options="calendarOptions">
|
<template v-slot:eventContent="arg">
|
<b>{{ arg.timeText }}</b>
|
<i>{{ arg.event.title }}</i>
|
</template>
|
</FullCalendar>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import FullCalendar from '@fullcalendar/vue'
|
import dayGridPlugin from '@fullcalendar/daygrid'
|
import timeGridPlugin from '@fullcalendar/timegrid'
|
import interactionPlugin from '@fullcalendar/interaction'
|
import { INITIAL_EVENTS, createEventId } from './event-utils'
|
export default {
|
components: {
|
FullCalendar // make the <FullCalendar> tag available
|
},
|
data: function () {
|
return {
|
calendarOptions: {
|
plugins: [
|
dayGridPlugin,
|
timeGridPlugin,
|
interactionPlugin // needed for dateClick
|
],
|
headerToolbar: {
|
left: 'prev,next today',
|
center: 'title',
|
right: 'dayGridMonth,timeGridWeek,timeGridDay'
|
},
|
initialView: 'dayGridMonth',
|
initialEvents: INITIAL_EVENTS, // alternatively, use the `events` setting to fetch from a feed
|
editable: true,
|
selectable: true,
|
selectMirror: true,
|
dayMaxEvents: true,
|
weekends: true,
|
select: this.handleDateSelect,
|
eventClick: this.handleEventClick,
|
eventsSet: this.handleEvents
|
/* you can update a remote database when these fire:
|
eventAdd:
|
eventChange:
|
eventRemove:
|
*/
|
},
|
currentEvents: []
|
}
|
},
|
methods: {
|
handleWeekendsToggle () {
|
this.calendarOptions.weekends = !this.calendarOptions.weekends // update a property
|
},
|
handleDateSelect (selectInfo) {
|
const title = prompt('Please enter a new title for your event')
|
const calendarApi = selectInfo.view.calendar
|
calendarApi.unselect() // clear date selection
|
if (title) {
|
calendarApi.addEvent({
|
id: createEventId(),
|
title,
|
start: selectInfo.startStr,
|
end: selectInfo.endStr,
|
allDay: selectInfo.allDay
|
})
|
}
|
},
|
handleEventClick (clickInfo) {
|
if (confirm(`Are you sure you want to delete the event '${clickInfo.event.title}'`)) {
|
clickInfo.event.remove()
|
}
|
},
|
handleEvents (events) {
|
this.currentEvents = events
|
}
|
}
|
}
|
</script>
|
|
<style lang='scss'>
|
h2 {
|
margin: 0;
|
font-size: 16px;
|
}
|
ul {
|
margin: 0;
|
padding: 0 0 0 1.5em;
|
}
|
li {
|
margin: 1.5em 0;
|
padding: 0;
|
}
|
b {
|
/* used for event dates/times */
|
margin-right: 3px;
|
}
|
.demo-app {
|
position: fixed;
|
top: 60px;
|
left: 0;
|
bottom: 0;
|
right: 0;
|
z-index: 999;
|
width: 100%;
|
height: 80%;
|
display: flex;
|
font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
|
font-size: 14px;
|
background: #fff;
|
}
|
.demo-app-sidebar {
|
width: 300px;
|
line-height: 1.5;
|
background: #eaf9ff;
|
border-right: 1px solid #d3e2e8;
|
}
|
.demo-app-sidebar-section {
|
padding: 2em;
|
}
|
.demo-app-main {
|
flex-grow: 1;
|
padding: 3em;
|
}
|
.fc {
|
/* the calendar root */
|
max-width: 1100px;
|
margin: 0 auto;
|
}
|
</style>
|
