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" 事件。这意味着它会自动将事件的 start
和 end
值的时间部分设置为给定日期的午夜。
并且因为(根据 docs)结束日期是 独占,这意味着如果您指定第 3 日作为结束日期,没有任何时间,那么您的结束日期将成为午夜的第三天。由于这是一个排他性日期(即它不被视为您活动范围的一部分),因此您的活动将被视为在 2 号 23:59:59 结束。这就是它没有出现在 3 日的原因。
或者,如果您的 end_date 确实 包含一个时间,并且该时间在当天早于 nextDayThreshold 选项的值,那么在 "month" 等非时间感知视图中,这将成为您的事件不会延伸到第 3 天的原因。如果您想更改它,请在您的日历中为 nextDayThreshold
设置不同的值。
我已经提出了这两种可能性,因为您没有向我们提供在屏幕截图中创建输出的实际数据值。请按照适用于您的情况的一项进行操作。
我正在使用 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" 事件。这意味着它会自动将事件的 start
和 end
值的时间部分设置为给定日期的午夜。
并且因为(根据 docs)结束日期是 独占,这意味着如果您指定第 3 日作为结束日期,没有任何时间,那么您的结束日期将成为午夜的第三天。由于这是一个排他性日期(即它不被视为您活动范围的一部分),因此您的活动将被视为在 2 号 23:59:59 结束。这就是它没有出现在 3 日的原因。
或者,如果您的 end_date 确实 包含一个时间,并且该时间在当天早于 nextDayThreshold 选项的值,那么在 "month" 等非时间感知视图中,这将成为您的事件不会延伸到第 3 天的原因。如果您想更改它,请在您的日历中为 nextDayThreshold
设置不同的值。
我已经提出了这两种可能性,因为您没有向我们提供在屏幕截图中创建输出的实际数据值。请按照适用于您的情况的一项进行操作。