使用模态框向Fullcalendar添加事件故障排查

看起来你遇到的「选中2月23日8:00-18:00时段后，显示8.00 tt to...」这种异常，大概率是日期时间格式化的配置错误，尤其是本地化/时间格式的处理环节出了问题。我来帮你梳理几个常见排查方向和解决方案：

1. 检查FullCalendar本地化配置是否正确 #

你看到的tt通常是AM/PM的占位符，但如果没有正确加载对应语言的本地化包，FullCalendar就无法把这个占位符替换成正确的时段标识（比如土耳其语的ÖÖ/ÖS，中文的上午/下午）。

解决步骤： #

• 如果你是土耳其语环境，需要在FullCalendar核心脚本之后引入对应的本地化文件：

<script src='fullcalendar/locales/tr.js'></script>

• 初始化日历时指定locale参数：

const calendar = new FullCalendar.Calendar(document.getElementById('calendar'), {
  schedulerLicenseKey: 'GPL-My-Project-Is-Open-Source',
  locale: 'tr', // 匹配你的语言环境
  selectable: true, // 确保开启了时间段选中功能
  // 其他日历配置...
});

2. 用FullCalendar内置方法格式化时间，避免手动拼接 #

很多时候问题出在直接处理原生Date对象（比如用toString()）或者手动拼接时间字符串，这很容易出现格式错误。正确的做法是用FullCalendar提供的formatDate方法来格式化选中的起止时间。

示例代码（在select事件中处理模态框显示）： #

calendar.on('select', function(info) {
  // 用FullCalendar内置方法格式化起止时间，自定义格式符合你的需求
  const formattedStart = calendar.formatDate(info.start, {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit',
    hour12: false // 如果不需要12小时制，设置为false，避免出现AM/PM占位符
  });
  
  const formattedEnd = calendar.formatDate(info.end, {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit',
    hour12: false
  });

  // 将格式化后的时间插入模态框的对应元素中
  document.getElementById('modal-start').textContent = formattedStart;
  document.getElementById('modal-end').textContent = formattedEnd;
});

3. 检查日历版本与API的兼容性 #

如果你使用的是FullCalendar v5+，formatDate是日历实例的方法；如果是更早的版本，可能需要用全局的FullCalendar.formatDate方法，确保代码和你的版本匹配。

4. 排查模态框的模板/渲染逻辑 #

如果上述配置都没问题，检查模态框的HTML模板或渲染代码，有没有硬编码错误的时间格式占位符，或者用了第三方日期格式化工具（比如moment.js）但配置错误。

如果按照这些步骤还没解决，建议你把模态框相关的完整代码贴出来，我可以帮你更精准地定位问题~

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