jQuery事件日历“中断”结束日期

Question

我正在使用fullCalendar显示来自mySQL数据库的事件。问题是当事件被加载时，每个事件的结束日期被“切断”。在图片中显示的示例中，事件应该是从第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日。亲切的问候

Answer 1

您的start_date和end_date字段是否包含日期和时间，或仅包含日期？

如果我怀疑它们只包含日期，那么fullCalendar会将它们视为“全天”事件。这意味着它会自动将事件的start和end值的时间分量设置为给定日期的午夜。

由于（根据docs）结束日期是独占的，这意味着如果您指定第3个作为结束日期，没有任何时间，那么您的结束日期将成为午夜的第3个日期。由于这是一个独家日期（即它不被视为您活动范围的一部分），您的活动将被视为在2月23:59:59结束。这就是为什么它没有在3日出现。

或者，如果你的end_date确实包含一个时间，并且该时间早于nextDayThreshold选项的值，则在非时间感知视图（例如“月”）中，这将是您的事件的原因不会延伸到第3。如果要更改它，请在日历中为nextDayThreshold设置不同的值。

我已经提出了这两种可能性，因为您没有向我们提供在屏幕截图中创建输出的实际数据值。请遵循适合您情况的任何一项。

jQuery事件日历“中断”结束日期

问题描述投票：0回答：1

1个回答

最新问题

jQuery事件日历“中断”结束日期

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1