Javascript 完整日历事件计时显示为全天,即使时间保存在数据库中
我正试图让事件显示在正确的地点根据他们的时段选择。因此,一旦创建了事件,它确实会以正确的时间段保存在数据库中,但在显示它们时,它们都会以全天事件的形式显示在顶部,而不是以常规事件的形式显示在数据库中 下面是events.php中的var_转储Javascript 完整日历事件计时显示为全天,即使时间保存在数据库中,javascript,php,jquery,calendar,Javascript,Php,Jquery,Calendar,我正试图让事件显示在正确的地点根据他们的时段选择。因此,一旦创建了事件,它确实会以正确的时间段保存在数据库中,但在显示它们时,它们都会以全天事件的形式显示在顶部,而不是以常规事件的形式显示在数据库中 下面是events.php中的var_转储 [{"id":"1","title":"Umar","start":"2016-03-15 00:00:00","end":"2016-03-18 00:00:00","url":"www.ua.com","allDay":"false"},{"id"
[{"id":"1","title":"Umar","start":"2016-03-15 00:00:00","end":"2016-03-18 00:00:00","url":"www.ua.com","allDay":"false"},{"id":"2","title":"Abdullah","start":"2016-04-04 00:00:00","end":"2016-04-04 00:00:00","url":"www.abdullah.com","allDay":"false"},{"id":"7","title":"Abou AbdurRahman","start":"2016-05-09 00:00:00","end":"2016-05-13 00:00:00","url":null,"allDay":"false"},{"id":"12","title":"Abdullah","start":"2016-05-17 03:00:00","end":"2016-05-17 11:30:00","url":null,"allDay":"false"},{"id":"13","title":"Ahmad","start":"2016-05-18 01:00:00","end":"2016-05-18 06:00:00","url":null,"allDay":"false"},{"id":"14","title":"Abdullah Break","start":"2016-05-19 10:00:00","end":"2016-05-19 16:00:00","url":null,"allDay":"false"},{"id":"15","title":"asd","start":"2016-05-20 07:00:00","end":"2016-05-20 12:30:00","url":null,"allDay":"false"}]
下面是日历的事件渲染:
var calendar = $('#calendar').fullCalendar({
editable: true,
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
defaultView:'agendaWeek',
events: "events.php",
timeFormat: 'h:mm',
displayEventEnd :true,
// Convert the allDay from string to boolean
eventRender: function(event, element, view) {
event.allDay = false;
},
selectable: true,
selectHelper: true,
select: function(start, end, allDay) {
var title = prompt('Event Title:');
if (title) {
var start = $.fullCalendar.moment(start).format('YYYY-MM-DD, h:mm:ss a');
var end = $.fullCalendar.moment(end).format('YYYY-MM-DD, h:mm:ss a');
console.log("Event Triggered");
$.ajax({
url: "add_events.php",
data: 'title='+ encodeURIComponent(title)+
'&start='+encodeURIComponent(start)+
'&end='+encodeURIComponent(end),
// + '&url='+ encodeURIComponent(url),
type: 'POST',
dataType:'text',
success: function(json) {
alert('Added Successfully');
},
error: function(xhr, textStatus, errorThrown) {
alert(xhr.responseText);
}
});
calendar.fullCalendar('renderEvent',
{
title: title,
start: start,
end: end,
// url:url,
allDay: allDay
},
true // make the event "stick"
);
}
calendar.fullCalendar('unselect');
}
如果您能帮助我们弄清这个问题,我们将不胜感激
问候,,
Umar$('txtStartDate')。日期选择器({
变化月:对,
变化年:是的,
日期格式:“MM yy”,
showButtonPanel:是的,
年份范围:“-3:+1”,
onClose:function(){
var iMonth=$(“#ui datepicker div.ui datepicker month:selected”).val();
var iYear=$(“#ui datepicker div.ui datepicker year:selected”).val();
$('hdnStartMonth').val(parseInt(iMonth)+1);
$('hdnStartYear').val(iYear);
$(this.datepicker('setDate',新日期(iYear,iMonth,1));
if(parseInt($('#hdnEndYear').val())0){
iYear=selDate.substring(selDate.length-4,selDate.length);
iMonth=jQuery.inArray(selDate.substring(0,selDate.length-5),
$(this.datepicker('option','monthNames');
$(this.datepicker('option','defaultDate',新日期(iYear,iMonth,1));
$(this.datepicker('setDate',新日期(iYear,iMonth,1));
}
}
});
$(“#txtEndDate”).datepicker({
变化月:对,
变化年:是的,
日期格式:“MM yy”,
showButtonPanel:是的,
年份范围:“-3:+1”,
onClose:function(){
var iMonth=$(“#ui datepicker div.ui datepicker month:selected”).val();
var iYear=$(“#ui datepicker div.ui datepicker year:selected”).val();
$('hdnEndMonth').val(parseInt(iMonth)+1);
$('hdnEndYear').val(iYear);
$(this.datepicker('setDate',新日期(iYear,iMonth,1));
if(parseInt($('#hdnEndYear').val())0){
iYear=selDate.substring(selDate.length-4,selDate.length);
iMonth=jQuery.inArray(selDate.substring(0,selDate.length-5),
$(this.datepicker('option','monthNames');
$(this.datepicker('option','defaultDate',新日期(iYear,iMonth,1));
$(this.datepicker('setDate',新日期(iYear,iMonth,1));
}
}
});
请定义“正确位置”。不清楚你想做什么。您可以提供示例输入和预期输出的详细描述。此外,您是否遇到了特定的错误,或者您是否缺少了不知道如何实现的功能?@HenryTK,正如您在var dump中看到的,存在带有时隙的事件。所以他们没有出现在正确的时间段,而是出现在全天时间段。你能解释一下这里发生了什么,让我明白该怎么做。这是所有日历选项。您可以在日历显示之前执行操作,也可以在日历关闭时执行操作。。。
$('#txtStartDate').datepicker({
changeMonth: true,
changeYear: true,
dateFormat: 'MM yy',
showButtonPanel: true,
yearRange: "-3:+1",
onClose: function () {
var iMonth = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
var iYear = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
$('#hdnStartMonth').val(parseInt(iMonth) + 1);
$('#hdnStartYear').val(iYear);
$(this).datepicker('setDate', new Date(iYear, iMonth, 1));
if (parseInt($('#hdnEndYear').val()) < parseInt($('#hdnStartYear').val())) {
$('#txtStartDate').val('');
} else if (parseInt($('#hdnEndYear').val()) == parseInt($('#hdnStartYear').val())) {
if (parseInt($('#hdnEndMonth').val()) < parseInt($('#hdnStartMonth').val())) {
$('#txtStartDate').val('');
}
}
},
beforeShow: function () {
if ((selDate = $(this).val()).length > 0) {
iYear = selDate.substring(selDate.length - 4, selDate.length);
iMonth = jQuery.inArray(selDate.substring(0, selDate.length - 5),
$(this).datepicker('option', 'monthNames'));
$(this).datepicker('option', 'defaultDate', new Date(iYear, iMonth, 1));
$(this).datepicker('setDate', new Date(iYear, iMonth, 1));
}
}
});
$('#txtEndDate').datepicker({
changeMonth: true,
changeYear: true,
dateFormat: 'MM yy',
showButtonPanel: true,
yearRange: "-3:+1",
onClose: function () {
var iMonth = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
var iYear = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
$('#hdnEndMonth').val(parseInt(iMonth) + 1);
$('#hdnEndYear').val(iYear);
$(this).datepicker('setDate', new Date(iYear, iMonth, 1));
if (parseInt($('#hdnEndYear').val()) < parseInt($('#hdnStartYear').val())) {
$('#txtEndDate').val('');
} else if (parseInt($('#hdnEndYear').val()) == parseInt($('#hdnStartYear').val())) {
if (parseInt($('#hdnEndMonth').val()) < parseInt($('#hdnStartMonth').val())) {
$('#txtEndDate').val('');
}
}
},
beforeShow: function () {
if ((selDate = $(this).val()).length > 0) {
iYear = selDate.substring(selDate.length - 4, selDate.length);
iMonth = jQuery.inArray(selDate.substring(0, selDate.length - 5),
$(this).datepicker('option', 'monthNames'));
$(this).datepicker('option', 'defaultDate', new Date(iYear, iMonth, 1));
$(this).datepicker('setDate', new Date(iYear, iMonth, 1));
}
}
});