#php #jquery #ajax #fullcalendar
#php #jquery #ajax #полный календарь
Вопрос:
Я использую 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>
Мне просто нужна эта синяя строка с картинки, чтобы указать дату окончания, в данном случае 3 января.
С уважением
Комментарии:
1. Привет, Рики. Возможно, вы можете А) показать нам пример того, что
load.phpвозвращает, и б) уменьшить свой код, чтобы это был минимальный пример. Значительная часть этого кажется посторонней в отношении вашего вопроса.
Ответ №1:
Ваши поля start_date и end_date содержат даты и время или только даты?
Если, как я подозреваю, они содержат только даты, то FullCalendar будет считать их событиями «всего дня». Это означает, что он автоматически установит временную составляющую значений start и end события на полночь в указанную дату.
И поскольку (согласно документам) конечная дата является эксклюзивной, это означает, что если вы укажете 3-е число в качестве конечной даты без какого-либо времени, то ваша конечная дата станет 3-м в полночь. И поскольку это эксклюзивная дата (т. Е. Она Не Считается частью вашего события), считается, что ваше событие заканчивается 2-го числа в 23:59:59. И именно поэтому он не отображается 3-го числа.
В качестве альтернативы, если ваш end_date действительно содержит время, и это время раньше в течение дня, чем значение параметра nextDayThreshold , то это, в представлении без учета времени, таком как «месяц», будет причиной, по которой ваше событие не будет распространяться на 3-е число. Если вы хотите это изменить, установите другое значение для nextDayThreshold в своем календаре.
Я предложил обе эти возможности, поскольку вы не предоставили нам фактические значения данных, которые создают вывод на вашем скриншоте. Пожалуйста, следуйте тому, который применим к вашей ситуации.
Комментарии:
1. Здравствуйте, спасибо за ваше объяснение. Начальная и конечная даты используют только даты, а не время. Я понимаю, что вы написали о полуночи. Есть ли способ это исправить? Мне не нужно время, но мне нужно было бы указать эту конечную дату. Еще раз спасибо за объяснение!
2. Вот один из вариантов: jsfiddle.net/d905yja4 . Вот еще один: jsfiddle.net/d905yja4/1 . Или другой: jsfiddle.net/5ys72n93 . Вы должны убедиться, что вы также довольны появлением события в представлении «неделя», прежде чем принимать решение. Очевидно, что во всех этих случаях вам потребуется использовать PHP для обработки данных, поступающих из базы данных, прежде чем вы предоставите их в FullCalendar.
3. Спасибо за решения. Я видел, что вы сделали со временем, и в одном вы использовали конечную дату как 4-ю. Я использую PHP scrip для загрузки, как вы знаете, поскольку событий много. Я думал о добавлении 1 к конечному дню в БД (в этом примере 4-й), но я не могу этого сделать, поскольку мне нужны эти данные как есть. Поля начальной и конечной даты содержат только дату без времени, и я не хотел бы это менять, поскольку это значительно усложнило бы процесс ввода. Мне было интересно, можно ли изменить сценарий загрузки PHP, не затрагивая данные в БД, а также не влияя на тип данных для даты начала и окончания.
4. Это мой загрузочный PHP-скрипт
<?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); ?>5. » было интересно, можно ли изменить скрипт загрузки PHP, не затрагивая данные в БД»… конечно, это так. Вместо того, чтобы просто
$row["end_date"]сразу указывать свойство «end», сначала вы должны проанализировать его как DateTime, добавить к нему один день, а затем снова отформатировать результат в строку, которую затем помещаете в свой массив как «конец». php.net/manual/en/class.datetime.php это должно тебе помочь. Вы также можете найти в Google много информации о синтаксическом анализе, манипулировании и форматировании PHP datetimes.