全日历 Vuejs（带 Laravel）不显示按钮月份和星期

Question

我尝试使用按钮 dayGridMonth、dayGridWeek 制作完整的日历。看了官方文档fullcalendar.io，找到了解决办法add right:'dayGridMonth,dayGridWeek,timeGridDay'。但这对我不起作用。

Vuejs 代码：

<template>
        <full-calendar ref="fullCalendar"
            :events="calendarEvents"
            :allDaySlot="false"
            :height="1000"
            :header="{
                    left: 'prev, next today',
                    center: 'title',
                    right: 'dayGridMonth,dayGridWeek,timeGridDay'
                }"

        >
        </full-calendar>
</template>
<script>
export default {
    data() {
        return {
            calendarEvents: [{
                events(start, end, timezone, callback) {
                    axios.get('http://localhost:8000/show-events').then(res => {
                        callback(res.data.eventList)
                    })
                },
                color: 'blue',
                textColor: 'white',
            }]
        }
    }
}
</script>

Answer 1

这对我有用。我创建了一个 calenderOptions 对象并将其传递给 full-calender

  <full-calendar ref="fullCalendar" :options="calendarOptions" />

在选项中，我使用了 headerToobar 和对齐顶部按钮，如下所示。

data() {
    return {
        calendarOptions: {
            plugins: [dayGridPlugin],
            initialView: 'dayGridMonth',
            allDaySlot:false,
            height:1000,
            events: [
                { title: 'event 1', date: '2021-06-28' },
                { title: 'event 2', date: '2019-04-02' }
            ],
            headerToolbar: { right: 'dayGridMonth,dayGridWeek,dayGridDay', center: 'title',left: 'prev, next today', },
        },
    }
},

活动还可以更新

 this.calendarOptions.events = [] //new events

全日历 Vuejs（带 Laravel）不显示按钮月份和星期

Full calendar Vuejs (with Laravel) not show button month and week

laravel

vue.js

fullcalendar-5