我已经成功地将任务添加到数据库中,但是由于某种原因它没有显示在完整日历上,如果可以通知该任务已添加到数据库中,也很好,它在代码中,但是保存后不显示任务
查看源代码时,数据会从数据库中提取并显示以下内容,但不会显示在日历上
更新:我已经在日历上显示了任务,但是问题是由于某种原因它们每天都在重复,但是输出仅显示任务一次,所以想知道这是否是SELECT语句上的sql查询问题,更新代码在下面
$sql = "SELECT id, title, start, startTime, end, endTime FROM tasksappointments";
$result = mysqli_query($conn,$sql);
$myArray = array();
if ($result->num_rows > 0) {
// output data of each row
while($row = $result->fetch_assoc()) {
$myArray[] = $row;
}
}
else
{
echo "0 results";
}
更新后的全日历代码如下
<script>
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
plugins: [ 'interaction', 'dayGrid' ],
defaultDate: new Date(),
editable: true,
timezone: 'Europe/London',
eventLimit: true, // allow "more" link when too many events
displayEventTime: false,
locale: "en-gb",
firstDay: 1,
dateClick: function(info) {
console.log("dayclick");
$("#success-modal").modal("show");
$("#start").val(info.dateStr);
$("#startTime").text(info.dateStr);
$("#end").val(info.dateStr);
$("#endTime").text(info.dateStr);
},
events: <?php echo json_encode($myArray); ?>,
eventClick: function(info) {
var dateSettings = { "year": "numeric", "month": "2-digit", "day": "2-digit" };
var timeSettings = { "hour": "2-digit", "minute": "2-digit", "hour12": false };
var start = calendar.formatDate(info.event.start, dateSettings);
var startTime = calendar.formatDate(info.event.start, timeSettings);
var end;
var endTime;
if (info.event.end != null) {
end = calendar.formatDate(info.event.end, dateSettings);
endTime = calendar.formatDate(info.event.end, timeSettings);
}
else {
end = start;
endTime = startTime;
}
$('#id').html(info.event.id);
$('#title').html(info.event.title);
$("#start").html(start + " at " + startTime);
$("#end").html(end + " at " + endTime);
$("#info-modal").modal();
},
});
eventTextColor: '#FFFFFF',
calendar.render();
});
</script>
JSON的输出如下
events: [{"id":"3","title":"Test","start":"2019-06-19","startTime":"10:24:00","end":"2019-06-19","endTime":"11:24:00"},
{"id":"4","title":"Test Two","start":"2019-06-20","startTime":"12:25:00","end":"2019-06-20","endTime":"01:25:00"}],
更新:最后一个问题是当我创建一个日期不同的任务(例如20/06/2019)并将其保存时,该任务将保存在今天的日期(19/06/2019)。
if(isset($_POST["submit"]) == "submit" && isset($_POST["title"]) != "")
{
$sql = "INSERT INTO tasksappointments (title, start, end)
VALUES ('".$_POST['title']."',
'".date('Y-m-d H:i:s',strtotime($_POST['start']))."',
'".date('Y-m-d H:i:s',strtotime($_POST['end']))."')";
if (mysqli_query($conn,$sql)) {
echo "New task/appointment added successfully";
} else {
echo "Error: " . $sql . "<br>" . $conn->error;
}
}
用于创建任务的HTML代码
<label for="start">Start Date:</label>
<input type="date" name="start" class="form-control" id="start">
<label for="end">End Date:</label>
<input type="date" name="end" class="form-control" id="end">
<div class='input-group date' id='datetimepicker3' data-target-input="nearest">
<input type="text" name="start" class="form-control datetimepicker-input" id="startTime" data-target="#datetimepicker3">
<span class="input-group-addon" data-target="#datetimepicker3" data-toggle="datetimepicker"><i class="fa fa-clock-o"></i></span>
<script type="text/javascript">
$(function () {
$('#datetimepicker3').datetimepicker({
format: 'LT',
use24hours: true,
format: 'HH:mm'
});
});
</script>
</div>
<div class='input-group date' id='datetimepicker4' data-target-input="nearest">
<input type="text" name="end" class="form-control datetimepicker-input" id="endTime" data-target="#datetimepicker4">
<span class="input-group-addon" data-target="#datetimepicker4" data-toggle="datetimepicker"><i class="fa fa-clock-o"></i></span>
<script type="text/javascript">
$(function () {
$('#datetimepicker4').datetimepicker({
format: 'LT',
use24hours: true,
format: 'HH:mm'
});
});
</script>
</div>