首页 > 解决方案 > FullCalendar VueJS - 更新日期范围

问题描述

我使用官方的FullCalendar VueJS 组件,我想更新视图中显示的当前范围(此处为DayGridMonth):1 个月、2 个月、3 个月、自定义期间

根据“文档”,visibleRange可以通过该功能setOption()https://fullcalendar.io/docs/visibleRange)更新属性,但它对我不起作用:该属性在组件中得到了很好的更新,但是视图没有更新。

我也尝试手动更新状态,但没有结果。

这是我的草稿功能

    updateCurrentDate: function () {
        const calendarApi = this.$refs.fullCalendar.getApi();
        const date = new Date(calendarApi.getDate());
        let endRange;

        this.currentPeriodRange = calendarApi.state.dateProfile.activeRange;
        this.currentPeriodLabel = moment(date).format('MMMM YYYY');

        if (this.currentView === 'month') {
            endRange = moment(this.currentPeriodRange.start).add(2, 'month');
            this.currentPeriodRange.end = endRange.toDate();

          // Not working
          calendarApi.setOption('visibleRange', this.currentPeriodRange);

          // No one of these test work
          calendarApi.state.dateProfile.activeRange = this.currentPeriodRange; // 
          calendarApi.state.dateProfile.currentRange = this.currentPeriodRange;
          calendarApi.state.dateProfile.renderRange = this.currentPeriodRange;

        }

        if (this.currentPeriodRange.start !== this.currentPeriodRange.end) {
            this.currentPeriodLabel = this.currentPeriodLabel + ' - ' + endRange.format('MMMM YYYY');
        }

        return;
    },

感谢阅读和回答

标签: vue.jsfullcalendar

解决方案


推荐阅读