$ npm i @fullcalendar/core @fullcalendar/daygrid @fullcalendar/interaction @fullcalendar/vue
Calendar.vue
<template>
<div class="toolbar-boxer">
<el-date-picker
v-model="selectMonth"
type="month"
:clearable="false"
placeholder="选择月"
value-format="yyyy-MM"
@change="handleDatePick">
</el-date-picker>
<el-button class="margin-left" v-if="btnReturnCurrenMonthVisiable" @click="handleReturnCurrentMonth">返回今日</el-button>
</div>
<div class="toolbar-right">
<el-button type="primary" @click="handleAddEvent">添加课程</el-button>
</div>
</div>
<full-calendar
ref="fullCalendar"
class="calendar"
:options="calendarOptions" />
</div>
</template>
<script>
import FullCalendar from '@fullcalendar/vue'
import dayGridPlugin from '@fullcalendar/daygrid'
import interactionPlugin from '@fullcalendar/interaction'
import dayjs from 'dayjs'
export default {
props: {
events: {
type: Array,
default: () => []
watch: {
events (newVal, oldVal) {
this.calendarOptions.events = newVal
data () {
return {
btnReturnCurrenMonthVisiable: false,
currentDate: null,
selectMonth: null,
calendarApi: null,
calendarOptions: {
plugins: [ dayGridPlugin, interactionPlugin ],
initialView: 'dayGridMonth',
locale: 'zh-cn',
headerToolbar: false,
events: this.events,
eventTimeFormat: {
hour: 'numeric',
minute: '2-digit',
hour12: false
displayEventEnd: true,
eventClick: this.handleEventClick
mounted () {
this.calendarApi = this.$refs.fullCalendar.getApi()
this.currentDate = dayjs(this.calendarApi.getDate()).format('YYYY-MM')
this.selectMonth = this.currentDate
methods: {
* 点击事件
handleEventClick (eventClickInfo) {
this.$emit('onEventClick', eventClickInfo)
* 添加事件
handleAddEvent () {
this.$emit('onAddEvent')
* 下拉选择日期并跳转至相应月份
handleDatePick (month) {
this.btnReturnCurrenMonthVisiable = month !== this.currentDate
this.calendarApi.gotoDate(month)
* 返回当前月份
handleReturnCurrentMonth () {
this.calendarApi.gotoDate(this.currentDate)
this.btnReturnCurrenMonthVisiable = false
this.selectMonth = this.currentDate
components: {
FullCalendar
</script>
<style scoped>
.toolbar-boxer {
display: flex;
flex-direction: row;
justify-content: space-between;
.toolbar-right {
text-align: right;
.calendar {
margin-top: 1rem;
.margin-left {
margin-left: 1rem;
</style>
在页面中使用 Calendar.vue 组件
xxx.vue
<template>
<calendar
:events="dataEventList"
@onAddEvent="onAddEvent"
@onEventClick="onEventClick"
</template>
<script>
import Calendar from '@/components/Calendar'
export default {
data () {
return {
dataEventList [],
methods: {
* 添加事件 Demo
onAddEvent () {
this.dataEventList.push({
title: '事件名称',
start: '0000-00-00 00:00:00',
end: '0000-00-00 00:00:00',
customAttribute: 'hello world'，
* 点击事件，查看事件详情
onEventClick (eventInfo) {
const _event = eventInfo.event
const _props = _event._def.extendedProps
components: {
Calendar
</script>
复制代码
- 2144
-
zzjyr
Vue.js
React.js
- 2257
-
sunhuihuibuhui
Vue.js
