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

您的开始日期和结束日期字段包含日期和时间，还是仅包含日期？

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

并且由于（按照docs）的结束日期是专有的，因此，这意味着如果您将3rd指定为结束日期，而没有任何时间，则结束日期变为午夜3点。由于这是一个排他性的日期（即不被视为您活动的一部分），因此您的活动被认为在第二天23:59:59结束。这就是为什么它没有出现在3号上的原因。

或者，如果您的结束日期包含一个时间，并且该时间在一天中早于nextDayThreshold选项的值，那么在非时间范围内，认识到“月”之类的观点，这是您的活动不会延续到第三天的原因。如果要更改此设置，请在日历中为nextDayThreshold设置一个不同的值。

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

jQuery事件日历“截止”结束日期

1 个答案: