首页 > 解决方案 > FullCalendar v5 的年视图

问题描述

我正在使用带有反应的 FullCalendar v5。我需要显示一个年份视图,就像 GoogleCalendar 那样:https ://prnt.sc/vljfwj 。我已经看到 FullCalendar 没有插件或smth。我想要做的是创建一个自定义视图,但我似乎没有很好地管理它。有人可以帮助我了解它是如何完成的吗?

<FullCalendar
    plugins={[dayGridPlugin, timeGridPlugin, interactionPlugin]}
    headerToolbar={false}
    initialView='timeGridWeek'
    views={{
        dayGridMonth: {
            type: 'month',
            duration: { months: 12 },
            monthMode: true,
            fixedWeekCount: true,
        }
    }}
    dayHeaderFormat={{ weekday: 'long', day: 'numeric', omitCommas: true }}
/>

我正在更改按钮的视图,该按钮调用此代码

changeSelectedGrid = selectedViewGrid => {
    if (this.fullCalendarRef.current) {
        const calendarApi = this.fullCalendarRef.current.getApi();
        calendarApi.changeView(selectedViewGrid, moment(this.state.selectedDate).startOf('year'), moment(this.state.selectedDate).endOf('year'));
    }
};

标签: htmlreactjsfullcalendarfullcalendar-5

解决方案


推荐阅读