doucheng2053
2019-04-09 13:46
浏览 144

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

I am using fullCalendar to display events from a mySQL database. The problem is when events are loaded the end date of each event gets "cut off". In the example shown on the picture event should be from 1st to 3rd, but it shows 1st to 2nd.

enter image description here

I have tried searching but I could not find anyone with similar problem and I checked database to see how it is stated there and it works correctly at that side (It is from 1st to 3rd)

<?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>

I just need that blue line from picture to include an end date, in this case 3rd January. Kind Regards

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

1条回答 默认 最新

  • dounai6613 2019-04-09 14:01
    已采纳

    Do your start_date and end_date fields contain dates and times, or just dates only?

    If, as I suspect, they contain only dates, then fullCalendar will consider them "all-day" events. This means it will automatically set the time component of the start and end values of the event to midnight on the date given.

    And since (as per the docs) the end date is exclusive, this means that if you specify the 3rd as the end date, without any time, then your end date becomes the 3rd at midnight. And since that's an exclusive date (i.e. it's not considered part of the span of your event), your event is then considered to end on the 2nd at 23:59:59. And that's why it doesn't shown up on the 3rd.


    Alternatively, if your end_date does contain a time, and that time is earlier in the day than the value of the nextDayThreshold option, then that would, in a non-time-aware view such as "month", be a reason why your event would not extend into the 3rd. If you want to change that, then set a different value for nextDayThreshold in your calendar.


    I've suggested both of these possibilities as you didn't provide us with the actual data values which are creating the output in your screenshot. Please follow whichever one is applicable to your situation.

    点赞 评论

相关推荐 更多相似问题