如何实现点击FullCalendar 5.10.1任意日期跳转至registration.html

你需要给FullCalendar配置dateClick事件回调实现点击跳转，同时可额外补充参数传递逻辑，自动填充表单的日期字段，步骤如下：

1. 修改日历初始化脚本 #

你原有日历代码只需新增dateClick配置项即可，修改后完整代码如下：

<script>
document.addEventListener('DOMContentLoaded', function() {
  var calendarEl = document.getElementById('calendar');
  var calendar = new FullCalendar.Calendar(calendarEl, {
    initialView: 'dayGridMonth',
    // 新增日期点击事件回调
    dateClick: function(info) {
      // info.dateStr就是点击日期的YYYY-MM-DD格式字符串
      // 把日期作为参数带到预约页，方便后续自动填充表单
      window.location.href = `registration.html?date=${info.dateStr}`;
    }
  });
  calendar.render();
});
</script>

2. （可选优化）预约页自动填充选中日期 #

如果你想要点击跳转后，表单里的Datum字段自动填入用户选中的日期，只需要在registration.html里加入以下脚本即可：

<script>
document.addEventListener('DOMContentLoaded', function() {
  // 从url参数里获取选中的日期
  const urlParams = new URLSearchParams(window.location.search);
  const selectedDate = urlParams.get('date');
  if (selectedDate) {
    // 把值赋给日期输入框，选择器和你表单里date字段的name对应
    document.querySelector('input[name="Appointment request"]').value = selectedDate;
  }
});
</script>

补充建议 #

• 表单里的字段名尽量不要用带空格的命名，比如可以把Appointment request改成appointment_date，避免后续提交或者取值出现兼容问题
• 如果registration.html不在当前页面的同级目录，需要自行调整跳转路径为实际可访问的路径

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