PHP版FullCalendar默认结束日期为次日，如何设置为选中日期？

别担心，这个问题是FullCalendar的默认配置导致的，咱们从前端JS和后端PHP两步调整就能搞定，非常适合新手操作：

第一步：修改前端JS的日期点击逻辑 #

你需要找到页面中初始化FullCalendar的JS代码，定位到dateClick回调函数（就是点击日历日期时触发的逻辑）。原来的代码里肯定有一段自动给结束日期设置为次日的代码，咱们把它改成和选中日期一致即可。

原来的默认代码（类似这样）：

document.addEventListener('DOMContentLoaded', function() {
  var calendarEl = document.getElementById('calendar');
  var calendar = new FullCalendar.Calendar(calendarEl, {
    // 其他日历配置...
    dateClick: function(info) {
      // 设置开始日期为选中日期
      document.getElementById('start').value = info.dateStr;
      // 默认把结束日期设为次日
      var nextDay = new Date(info.date);
      nextDay.setDate(nextDay.getDate() + 1);
      document.getElementById('end').value = nextDay.toISOString().split('T')[0];
      // 打开创建事件的弹窗
      $('#modalAdd').modal('show');
    }
  });
  calendar.render();
});

修改后的代码：

document.addEventListener('DOMContentLoaded', function() {
  var calendarEl = document.getElementById('calendar');
  var calendar = new FullCalendar.Calendar(calendarEl, {
    // 其他日历配置...
    dateClick: function(info) {
      // 获取选中的日期（格式为YYYY-MM-DD）
      const selectedDate = info.dateStr;
      // 开始日期和结束日期都设为选中的这天
      document.getElementById('start').value = selectedDate;
      document.getElementById('end').value = selectedDate;
      // 打开创建事件的弹窗
      $('#modalAdd').modal('show');
    }
  });
  calendar.render();
});

第二步：检查后端PHP的存储逻辑 #

接下来要确认你的PHP代码在存储事件时，有没有额外给结束日期加一天的操作。比如插入事件的代码里，如果存在类似$end = date('Y-m-d', strtotime($_POST['end'] . ' +1 day'))的逻辑，一定要删掉，直接使用前端传过来的结束日期值。

正确的PHP插入示例：

<?php
require_once('bdd.php');

// 接收前端传递的参数
$title = $_POST['title'];
$start = $_POST['start'];
$end = $_POST['end']; // 直接使用前端传的结束日期，不要额外修改
$color = $_POST['color'];

// 准备插入SQL
$sql = "INSERT INTO events (title, start, end, color) VALUES (:title, :start, :end, :color)";
$req = $bdd->prepare($sql);
// 执行插入
$req->execute([
  ':title' => $title,
  ':start' => $start,
  ':end' => $end,
  ':color' => $color
]);
?>

最后测试验证 #

改完后刷新页面，点击任意日历日期，打开创建事件的弹窗就能看到结束日期和选中日期一致了，提交事件后数据库里存储的也是同一天，日历上会正常显示当天的事件。

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