使用FullCalendar开发日历遇start未定义错误，模态框日期显示异常

错误原因 #

• start是FullCalendar select回调函数的局部参数，你在回调函数外部定义var tgl=moment(start).format('DD-MM-YYYY')，此时start未被定义，直接访问就会抛出ReferenceError。
• 当前代码没有把选中的日期赋值给Bootstrap模态框的标题，所以模态框标题会显示undefined。
• 额外问题：script标签的type和src属性被错误写在了script内容内部，应该单独作为一个script标签引入外部JS文件。

修正后的代码 #

<script>
document.addEventListener('DOMContentLoaded', function() {
  var calendarEl = document.getElementById('calendar');
  var calendar = new FullCalendar.Calendar(calendarEl, {          
    selectable: true,
    selectHelper: true,
    // FullCalendar v5+的select回调参数是一个info对象，包含start、end等属性
    select: function(info) {
      // 格式化选中的开始日期
      var tgl = moment(info.start).format('DD-MM-YYYY');
      // 将日期设置到模态框标题中（假设模态框标题的id是BookingModalLabel）
      document.getElementById('BookingModalLabel').textContent = '添加笔记 - ' + tgl;
      // 弹出模态框
      $("#BookingModal").modal('toggle');
    }
  });
  
  calendar.render();
});
</script>
<!-- 单独引入外部JS文件 -->
<script type="text/javascript" src="{{ url_for('static', filename='index.js') }}"></script>

关键说明 #

• 把日期格式化和模态框标题赋值的逻辑放到select回调函数内部，这样才能正确获取用户选中的日期参数info.start。
• 注意FullCalendar版本差异：如果是v5及以上版本，select回调的参数是一个包含start、end等属性的对象；如果是v4及以下旧版本，可保留select: function(start, end, alldays)写法，但同样要把日期处理逻辑放到该函数内部。
• 确保模态框有对应的标题元素（比如Bootstrap默认的#BookingModalLabel），如果你的模态框标题id不同，需修改为对应id。

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