jQuery 活动日历 "cuts off" 结束日期

jQuery event calendar "cuts off" end date

我正在使用 fullCalendar 显示来自 mySQL 数据库的事件。问题是当加载事件时,每个事件的结束日期变为 "cut off"。在图片上显示的示例中,事件应该是从 1 到 3,但它显示的是 1 到 2。

我试过搜索,但我找不到任何有类似问题的人,我检查了数据库,看看它是如何说明的,它在那一边工作正常(从 1 到 3)

<?php

//load.php
$connect = new PDO('mysql:host=localhost;dbname=booker', 'root', '');

$data = array();
$query = "SELECT * FROM events ORDER BY id";
$statement = $connect->prepare($query);
$statement->execute();
$result = $statement->fetchAll();

foreach($result as $row)
{
 $data[] = array(
  'id'   => $row["ID"],
  'title'   => $row["username"],
  'start'   => $row["start_date"],
  'end'   => $row["end_date"]
 );
}

echo json_encode($data);
?>






<?php
//index.php
?>

<!DOCTYPE html>
<html>
 <head>
  <title>Book</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.4.0/fullcalendar.css" />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.css" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.4.0/fullcalendar.min.js"></script>
  <script>

  $(document).ready(function() {
   var calendar = $('#calendar').fullCalendar({
    editable:true,
    header:{
     left:'prev,next today',
     center:'title',
     right:'month,agendaWeek,agendaDay'
    },
    events: 'load.php',
    selectable:true,
    selectHelper:true,
    select: function(start, end, allDay)
    {
     var title = prompt("Enter Event Title");
     if(title)
     {
      var start = $.fullCalendar.formatDate(start, "Y-MM-DD HH:mm:ss");
      var end = $.fullCalendar.formatDate(end, "Y-MM-DD HH:mm:ss");
      $.ajax({
       url:"insert.php",
       type:"POST",
       data:{title:title, start:start, end:end},
       success:function()
       {
        calendar.fullCalendar('refetchEvents');
        alert("Added Successfully");
       }
      })
     }
    },
    editable:true,
    eventResize:function(event)
    {
     var start = $.fullCalendar.formatDate(event.start, "Y-MM-DD HH:mm:ss");
     var end = $.fullCalendar.formatDate(event.end, "Y-MM-DD HH:mm:ss");
     var title = event.title;
     var id = event.id;
     $.ajax({
      url:"update.php",
      type:"POST",
      data:{title:title, start:start, end:end, id:id},
      success:function(){
       calendar.fullCalendar('refetchEvents');
       alert('Event Update');
      }
     })
    },

    eventDrop:function(event)
    {
     var start = $.fullCalendar.formatDate(event.start, "Y-MM-DD HH:mm:ss");
     var end = $.fullCalendar.formatDate(event.end, "Y-MM-DD HH:mm:ss");
     var title = event.title;
     var id = event.id;
     $.ajax({
      url:"update.php",
      type:"POST",
      data:{title:title, start:start, end:end, id:id},
      success:function()
      {
       calendar.fullCalendar('refetchEvents');
       alert("Event Updated");
      }
     });
    },

    eventClick:function(event)
    {
     if(confirm("Are you sure you want to remove it?"))
     {
      var id = event.id;
      $.ajax({
       url:"delete.php",
       type:"POST",
       data:{id:id},
       success:function()
       {
        calendar.fullCalendar('refetchEvents');
        alert("Event Removed");
       }
      })
     }
    },

   });
  });

  </script>
 </head>
 <body>
  <br />

  <br />
  <div class="container">
   <div id="calendar"></div>
  </div>
 </body>
</html>

我只需要图片中的蓝线包含结束日期,在本例中为 1 月 3 日。 亲切的问候

您的 start_date 和 end_date 字段包含日期和时间,还是只包含日期?

如果我怀疑它们只包含日期,那么 fullCalendar 将考虑它们 "all-day" 事件。这意味着它会自动将事件的 startend 值的时间部分设置为给定日期的午夜。

并且因为(根据 docs)结束日期是 独占,这意味着如果您指定第 3 日作为结束日期,没有任何时间,那么您的结束日期将成为午夜的第三天。由于这是一个排他性日期(即它不被视为您活动范围的一部分),因此您的活动将被视为在 2 号 23:59:59 结束。这就是它没有出现在 3 日的原因。


或者,如果您的 end_date 确实 包含一个时间,并且该时间在当天早于 nextDayThreshold 选项的值,那么在 "month" 等非时间感知视图中,这将成为您的事件不会延伸到第 3 天的原因。如果您想更改它,请在您的日历中为 nextDayThreshold 设置不同的值。


我已经提出了这两种可能性,因为您没有向我们提供在屏幕截图中创建输出的实际数据值。请按照适用于您的情况的一项进行操作。