我有一个MySQL表，其中包含一些要呈现的事件，并且有几个PHP页面被配置为根据传递给它的日期将这些事件作为JSON对象返回。当您单击或拖动事件或日历日期时，我会弹出一个引导模式，预先填充事件中存储的信息（如果它是您单击或拖动的事件，否则它只是一个空白表单等待添加新事件），当我提交表单时，它运行AJAX查询以在MySQL表中添加/更新/删除事件。一旦AJAX成功返回，我就会调用＆＃39; removeEvent＆＃39;并传递事件ID（如果删除），请调用＆＃39; renderEvent＆＃39;并传递用于提交AJAX查询的对象（如果是添加），或两者都传递（如果是更新）。
无论出于何种原因，事件永远不会使用此方法正确呈现。 removeEvent工作，并抓取正确的事件，但添加和更新不会使用日期/时间呈现新事件。我尝试以一系列不同的方式格式化开头和结尾，但事件仍然呈现错误。基本上，渲染事件的问题是它在正确的日期呈现它，并包括我添加的额外数据，可以通过单击事件并打开模态来验证，但开始时间默认为那天的午夜，结束时间要么不存在，要么默认为第二天的午夜。当我重新加载页面并从PHP获取数据时，将使用正确的日期时间值呈现事件。
我已尝试在呈现事件对象之前将事件对象记录到控制台，我无法找到任何看起来不合适的内容，即控制台中事件的输出与输出相同其中一个JSON对象来自我的PHP页面。
任何人都可以对此发光吗？
实际呈现事件的代码在sendrequest（）函数中，但我将包含我的大部分.js页面，以便您可以看到我尝试做的事情（I＆＃ 39;已经删除了一些东西来缩短它，但它主要是那里的所有东西）
window.onload = initializepage;
//Calendar documentation: http://fullcalendar.io/docs/
function initializepage()
{
//Build The jQuery Calendar
$('#calendar').fullCalendar({
schedulerLicenseKey: 'CC-Attribution-NonCommercial-NoDerivatives'
defaultView: 'month',
editable: true,
// When you click on an event, it will call the manageevent function and pass the event object to it
eventClick: function($event)
{
manageevent($event);
},
// When you drag an event, it will move it back to where you dragged it
// after this method executed, the eventClick method above is executed
eventResize: function($event, $delta, revertfunc)
{
manageevent($event);
revertfunc();
},
eventDrop: function($event, $delta, revertfunc)
{
manageevent($event);
revertfunc();
},
eventSources:
[
{
url: 'opscalendar_ajax.php',
},
{
url: 'oncall_ajax.php',
data: {
groupname: 'Ops'
}
}
],
fixedWeekCount: false,
header:
{
left: 'prev,next today',
center: 'title',
right: 'timelineDay,agendaWeek,month,basicYear',
},
height: 600,
resourceGroupField: 'Shifts',
resourceGroupText: 'Shifts',
resources:
[
<!-- deleted for brevity -->
],
selectable: true,
selectHelper: true,
// When you click on a date, or drag across dates, call the addevent function
select: function($start, $end)
{
addevent($start, $end);
$('#calendar').fullCalendar('unselect');
},
views: {
<!-- deleted for brevity -->
},
});
// End of JQuery Calendar
//Some jQuery to make it so that the date picked for end time cannot be before the
//date picked for the start time
$(function () {
$('#starttimepicker').datetimepicker();
$('#endtimepicker').datetimepicker({
useCurrent: false //Important! See issue #1075
});
$("#starttimepicker").on("dp.change", function (e) {
$('#endtimepicker').data("DateTimePicker").minDate(e.date);
});
});
// Now we assign some buttons to execute functions instead of submitting a form
document.getElementById('addEventBtn').onclick = executemanageevent;
document.getElementById('updateEventBtn').onclick = executemanageevent;
document.getElementById('deleteEventBtn').onclick = executemanageevent;
// Some JQuery to clear out and fields that are populated in the modal.
$("#manageevent").on('hidden.bs.modal', function()
{
// Reset form values
document.getElementById('hiddenid').value = '';
document.getElementById('shiftdropdown').value = '';
document.getElementById('starttime').value = '';
document.getElementById('endtime').value = '';
document.getElementById('name').value = '';
document.getElementById('alldayradio2').checked = 'checked';
document.getElementById('manageeventalert').innerHTML = '';
});
} // End initializepage function
/* function addevent($start, $end)
*
* Populates modal with the dates from user click or drag
* Enables the add and cancel buttons
* Opens the modal so user can see it
*/
function addevent($start, $end)
{
// Populate dates
$('#starttimepicker').data("DateTimePicker").date($start);
$('#endtimepicker').data("DateTimePicker").minDate($start);
$('#endtimepicker').data("DateTimePicker").date($end);
document.getElementById('alldayradio2').checked = 'checked';
// Show Buttons
$('#addEventBtn').prop("disabled", false);
$('#cancel').prop("disabled", false);
// Show Modal
$('#manageevent').modal({backdrop: 'static'});
return false;
}
/* function closemodal()
*
* Called after a successful request - just closes the modal
*/
function closemodal()
{
$('#manageevent').modal('hide')
}
/* function executemanageevent()
*
* When you click any of the buttons (except cancel) this is executed
* First: it creates an object (like an array, just different)
* Second: disable all the buttons so people can't keep clicking
* Third: take all the values from the modal and put them into the object
* Fourth: put an alert in the modal header (there's a div for it) and let them know we're trying their request
* Fifth: send the object to the sendRequest function
*/
function executemanageevent()
{
// First
var $datatopass = {};
$datatopass.mode = this.getAttribute('mode');
// Second
$('#addEventBtn').prop("disabled", true);
$('#updateEventBtn').prop("disabled", true);
$('#deleteEventBtn').prop("disabled", true);
$('#cancel').prop("disabled", true);
// Third
$titleindex = document.getElementById('name').selectedIndex;
$datatopass.title = document.getElementById('name').options[$titleindex].text;
$datatopass.login = document.getElementById('name').value;
$datatopass.start = document.getElementById('starttime').value;
$datatopass.end = document.getElementById('endtime').value;
$datatopass.resourceId = document.getElementById('shiftdropdown').value;
$datatopass.id = document.getElementById('hiddenid').value;
var $allday = document.getElementsByName('alldayradio');
for($i = 0; $i < $allday.length; $i++)
{
if($allday[$i].checked == true)
{
$datatopass.allDay = $allday[$i].value;
}
}
// Fourth
var $infoalert = "<div class='alert alert-info'><strong>Info: </strong>Attempting to submit your request</div>";
document.getElementById('manageeventalert').innerHTML = $infoalert;
// Fifth
$theresults = sendrequest($datatopass);
console.log($datatopass);
return false;
}
/* function manageevent($event)
*
* Manage event is called when you click on an event, or drag an event
* We assume you're going to update, delete, or copy an event and enable all buttons
* once we've set everything up, show the modal.
*/
function manageevent($event)
{
// Get data from event
$title = $event.title;
$login = $event.login;
$start = $event.start;
$end = $event.end;
$allday = $event.allDay;
$resourceId = $event.resourceId;
$id = $event.id;
// Populate modal fields
document.getElementById('hiddenid').value = $id;
document.getElementById('shiftdropdown').value = $resourceId;
$('#starttimepicker').data("DateTimePicker").date($start);
$('#endtimepicker').data("DateTimePicker").minDate($start);
$('#endtimepicker').data("DateTimePicker").date($end);
document.getElementById('name').value = $login;
if($allday == true)
{
document.getElementById('alldayradio1').checked = 'checked';
}
else
{
document.getElementById('alldayradio2').checked = 'checked';
}
// Enable all buttons
$('#addEventBtn').prop("disabled", false);
$('#updateEventBtn').prop("disabled", false);
$('#deleteEventBtn').prop("disabled", false);
$('#cancel').prop("disabled", false);
// Show the Modal
$('#manageevent').modal({backdrop: 'static'});
return false;
}
/* function sendrequest($thedata)
*
*/
function sendrequest($thedata)
{
var $formdata = "JSON=" + JSON.stringify($thedata);
var $xhttp;
$xhttp = new XMLHttpRequest();
$xhttp.onreadystatechange = function()
{
if($xhttp.readyState == 4 && $xhttp.status == 200)
{
$theresults = JSON.parse($xhttp.responseText);
if($theresults.status == 'failure')
{
var $warnalert = '<div id="warningAlert" class="alert alert-danger"><strong>' +
$theresults.status + '</strong> ' + $theresults.message + '</div>';
document.getElementById('manageeventalert').innerHTML = $warnalert;
if($thedata.mode == 'add')
{
$('#addEventBtn').prop("disabled", false);
$('#cancel').prop("disabled", false);
}
else if($thedata.mode == 'update')
{
$('#addEventBtn').prop("disabled", false);
$('#updateEventBtn').prop("disabled", false);
$('#cancel').prop("disabled", false);
}
else if($thedata.mode == 'delete')
{
$('#deleteEventBtn').prop("disabled", false);
$('#cancel').prop("disabled", false);
}
var $followup = document.createElement('DIV');
$followup.setAttribute('class','alert alert-info');
var $followuptext = document.createTextNode('You may retry your request');
$followup.appendChild($followuptext);
document.getElementById('manageeventalert').appendChild($followup);
}
else if($theresults.status == 'success')
{
var $okayalert = '<div id="warningalert" class="alert alert-success"><strong>' +
$theresults.status + '</strong> ' + $theresults.message + '</div>';
document.getElementById('manageeventalert').innerHTML = $okayalert;
$thedata.start = moment($thedata.start, 'MM/DD/YYYY hh:mm a');
$thedata.end = moment($thedata.end, 'MM/DD/YYYY hh:mm a');
if($thedata.mode == 'add')
{
$thedata.id = $theresults.dbkey;
console.log($thedata);
$('#calendar').fullCalendar('renderEvent', $thedata);
}
else if($thedata.mode == 'update')
{
$('#calendar').fullCalendar('removeEvents', $thedata.id);
console.log($thedata);
$('#calendar').fullCalendar('renderEvent', $thedata);
}
else if($thedata.mode == 'delete')
{
$('#calendar').fullCalendar('removeEvents', $thedata.id);
}
setTimeout(closemodal, 1500);
}
}
};
$xhttp.open("POST", "opscalendar_post.php", true);
$xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
$xhttp.send($formdata);
return false;
}