Laravel 5.8中FullCalendar插件如何获取周视图起止日期并解决startOf报错

你遇到的方法不存在的报错，本质是对FullCalendar v5的API使用认知偏差：

• startOf()、endOf()是FullCalendar封装的日期类的实例方法，不是顶级Calendar实例的方法，你直接把new FullCalendar.Calendar(...)生成的calendar对象拿来调用这两个方法，自然会提示方法不存在
• 你排查时发现拿到的是空值，是因为你在日历完成初始化渲染前就尝试读取视图数据，此时视图还没完成加载，自然没有对应的范围信息。

根本不需要手动解析页面上的标题文本、也不需要手动计算周的起止时间，FullCalendar内置了实时获取当前展示范围的能力，完全适配你的导航切换、视图切换场景：

核心API说明 #

你已经实例化的calendar对象，会在每次完成视图渲染、导航操作（点上一周/下一周/今天）、切换视图类型时，自动触发datesSet回调，回调参数里直接提供了当前视图覆盖的准确起止日期：

• activeStart：当前视图展示的首日，是经过时区、周起始规则校准的原生Date对象
• activeEnd：当前视图展示的最后一天，同样是校准后的原生Date对象

示例代码 #

// 你现有的calendar实例化配置保留不变
var calendar = new FullCalendar.Calendar(document.getElementById('calendar'), {
    headerToolbar: {
        left: 'prev next today',
        center: 'title',
        right: 'dayGridDay dayGridWeek dayGridMonth listMonth'
    },
    locale: config.lang,
    initialView: 'dayGridMonth',
    displayEventTime: true,
    events: dbEvents,

    // 直接在初始化配置里加入datesSet监听，不需要额外给按钮绑事件
    datesSet: function(viewInfo) {
        // 只在切到周视图时才向后端传参查询
        if (viewInfo.view.type !== 'dayGridWeek') return;

        // 把原生Date转成Laravel后端可直接识别的Y-m-d格式
        const formatToDateStr = (date) => {
            const y = date.getFullYear();
            const m = String(date.getMonth() + 1).padStart(2, '0');
            const d = String(date.getDate()).padStart(2, '0');
            return `${y}-${m}-${d}`;
        }

        const start = formatToDateStr(viewInfo.activeStart);
        const end = formatToDateStr(viewInfo.activeEnd);

        // 发请求给后端拿对应日期范围的事件
        fetch(`/你的后端查询接口?start_date=${start}&end_date=${end}`)
            .then(res => res.json())
            .then(eventList => {
                // 清空现有事件，加载新查询到的周范围事件
                calendar.removeAllEvents();
                calendar.addEventSource(eventList);
            })
    }
});

// 最后别忘了调用render完成渲染
calendar.render();

• 不要尝试从视图标题文本里抠日期范围：这种方案非常脆弱，换语言环境（比如切到中文、西班牙语）时，标题的日期格式会变，正则匹配直接失效；遇到跨月、跨年的周范围时，标题的文本结构也容易解析出错。而官方提供的activeStart/activeEnd是和你配置的locale、周起始规则完全对齐的准确值，没有计算偏差。
• 你之前写的calendar.startOf('week')写法，本质是混淆了方法的所属对象：startOf/endOf是FullCalendar封装的独立日期对象的方法，不是顶级Calendar实例的方法，就算手动绕去构造日期实例计算周起止，也是重复造轮子——activeStart已经帮你算好了和当前视图完全匹配的范围。
• 所有视图导航操作（点上一周、下一周、回到今天）都会自动触发datesSet回调，不需要你额外给header的按钮绑定监听，避免重复写导航逻辑。
• 不要在实例化calendar之后立即去读取视图范围：此时日历还没完成初始化渲染，拿到的会是空值，通过datesSet回调拿值，能保证读取的一定是当前渲染完成后的最新范围。

内容的提问来源于stack exchange，提问作者scorpions78