FullCalendar+Flask点击日期跳转失败：日期参数未传递致404

问题描述 #

在Flask项目中集成FullCalendar，期望点击日历上的日期时跳转到对应日期的day页面，但跳转后URL仅为localhost:5000/day/（触发404错误），而非预期的localhost:5000/day/2023-03-09。经测试：

• 点击日期时控制台能正常打印出日期字符串
• 手动访问带日期参数的URL可正常显示页面
  确定问题为日期参数未正确传递到跳转URL中。

问题原因 #

核心错误出在前端模板的JavaScript代码中：url_for是Flask的后端模板渲染函数，在页面加载时就会执行，而date是前端点击事件触发后才生成的JavaScript变量，后端渲染模板时根本无法识别这个前端变量，因此生成的URL缺失日期参数，仅为/day/。

解决方案 #

修改前端cal.html中的跳转逻辑，将后端生成的基础URL与前端获取的日期参数拼接，具体代码如下：

修改后的cal.html #

<!DOCTYPE html>
<html lang='en'>
  <head>
    <meta charset='utf-8' />
    <script src='https://cdn.jsdelivr.net/npm/fullcalendar@6.1.4/index.global.js'></script>
    <script>
      document.addEventListener('DOMContentLoaded', function() {
        var calendarEl = document.getElementById('calendar');
        // 先通过模板渲染获取day路由的基础路径（末尾已预留拼接位置）
        const dayBaseUrl = "{{ url_for('cal.day', date='') }}";
        var calendar = new FullCalendar.Calendar(calendarEl, {
          initialView: 'dayGridMonth',
          dateClick: function(info) {
            const selectedDate = info.dateStr;
            // 将日期参数拼接到基础URL后
            window.location.href = dayBaseUrl + selectedDate;
          },
        });
        calendar.render();
      });
    </script>
  </head>
  <body>
    <div id='calendar'></div>
  </body>
</html>

另一种简化写法（直接构造URL） #

如果你的路由规则固定，也可以直接在JavaScript中构造完整URL：

dateClick: function(info) {
  const selectedDate = info.dateStr;
  window.location.href = `/day/${selectedDate}`;
}

验证 #

修改后点击日历日期，URL会正确带上日期参数（如localhost:5000/day/2023-03-09），页面可正常加载显示对应日期。

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