如何循环渲染MySQL日期到FullCalendar并解决仅显示最后一条问题

这个问题和后端使用Bottle/Flask框架无关，是前端FullCalendar的初始化逻辑错误：

• 你在遍历日期数据的forEach循环内反复创建新的FullCalendar实例、重复执行渲染，每次创建实例时events数组仅传入当前遍历到的单条日期，前一次渲染的内容会被后一次创建的实例完全覆盖，循环结束后自然只剩最后一条2022-06-30的事件。
• FullCalendar只需要初始化1次，不要在循环内重复创建实例、重复渲染。

<script>
    const calendarElement = document.querySelector("#calendar");
    fetch('/api-fetch-booking_data')
        .then(res => res.json())
        .then(data => {
            // 提前把所有日期整理为FullCalendar要求的events格式
            const eventList = data.booking_dates.map(item => ({
                start: item.avalable_dates
            }));
            // 单次初始化日历，传入全部事件
            const calendar = new FullCalendar.Calendar(calendarElement, {
                events: eventList
                // 其余日历配置（如initialView、顶部工具栏配置等）可补充在此处
            });
            calendar.render();
        })
</script>

• 后端框架不影响前端逻辑，只要接口返回的JSON结构正确，Bottle和Flask的对接方式完全一致。
• 如果后续需要动态新增事件，不需要重新初始化日历，调用已创建日历实例的addEvent()方法追加即可，避免重复渲染覆盖已有内容。
• 建议检查日期字段拼写：你代码中使用的字段名是avalable_dates，常规正确拼写为available_dates，如果后端返回字段确实为前者可保留，否则修正字段名避免取值失败。

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