我使用fullcalendar.js在我的项目中包含了一个日历。我的数据库条目正在显示，但它们提前了一个月。
如果我输入16.octobre.2015，它将在数据库中保存为16.octobre.2015，但将显示为16.novembre.2015。这发生在我的每一个条目。
我在Stack Overflow上搜索了很多，发现了一些类似的话题。在一篇文章中，有人解释说这与月份的索引方式有关。
- PHP从1到12计数。
- JavaScript计数从0到11
谁能告诉我我需要改变什么，这样我的条目显示正确?下面是我的代码:
<!-- inline scripts related to this page -->
<script type="text/javascript">
jQuery(function($) {
/* initialize the external events
-----------------------------------------------------------------*/
$('#external-events div.external-event').each(function() {
// create an Event Object (http://arshaw.com/fullcalendar/docs/event_data/Event_Object/)
// it doesn't need to have a start or end
var eventObject = {
title: $.trim($(this).text()) // use the element's text as the event title
};
// store the Event Object in the DOM element so we can get to it later
$(this).data('eventObject', eventObject);
// make the event draggable using jQuery UI
$(this).draggable({
zIndex: 999,
revert: true, // will cause the event to go back to its
revertDuration: 0 // original position after the drag
});
});
/* initialize the calendar
-----------------------------------------------------------------*/
<?php
print "var date = new Date();n";
print "var d = date.getDate();n";
print "var m = date.getMonth();n";
print "var y = date.getFullYear();n";
print "var unixTimestamp = Date.now(); // in milliseconds;"
?>
var calendar = $('#calendar').fullCalendar({
//isRTL: true,
buttonHtml: {
prev: '<i class="ace-icon fa fa-chevron-left"></i>',
next: '<i class="ace-icon fa fa-chevron-right"></i>'
},
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
<?php
$dates=getPcalInfoOfHour($gl_userid,0,0);
print "events: [n";
for ($x=0;$x<count($dates["id"]);$x++) {
print " {n";
print " title: '".$dates["title"][$x]."',n";
print " start: new Date(".date("Y",$dates["start"][$x]).", ".date("n",$dates["start"][$x]).", ".date("j",$dates["start"][$x]).", ".date("G",$dates["start"][$x]).", ".date("i",$dates["start"][$x]).",0,0),n";
print " end: new Date(".date("Y",$dates["end"][$x]+1).", ".date("n",$dates["end"][$x]+1).", ".date("j",$dates["end"][$x]+1).", ".date("G",$dates["end"][$x]+1).", ".date("i",($dates["end"][$x]+1)).",0,0),n";
print " allDay: false,n";
print " className: 'label-info'n";
if ($x<(count($dates["id"])-1)) {
print " },n";
} else {
print " }n";
}
}
print "]n";
?>
,
editable: true,
droppable: true, // this allows things to be dropped onto the calendar !!!
drop: function(date, allDay) { // this function is called when something is dropped
// retrieve the dropped element's stored Event Object
var originalEventObject = $(this).data('eventObject');
var $extraEventClass = $(this).attr('data-class');
// we need to copy it, so that multiple events don't have a reference to the same object
var copiedEventObject = $.extend({}, originalEventObject);
// assign it the date that was reported
copiedEventObject.start = date;
copiedEventObject.allDay = allDay;
if($extraEventClass) copiedEventObject['className'] = [$extraEventClass];
// render the event on the calendar
// the last `true` argument determines if the event "sticks" (http://arshaw.com/fullcalendar/docs/event_rendering/renderEvent/)
$('#calendar').fullCalendar('renderEvent', copiedEventObject, true);
// is the "remove after drop" checkbox checked?
if ($('#drop-remove').is(':checked')) {
// if so, remove the element from the "Draggable Events" list
$(this).remove();
}
}
,
selectable: true,
selectHelper: true,
select: function(start, end, allDay) {
calendar.fullCalendar('unselect');
}
,
eventClick: function(calEvent, jsEvent, view) {
//display a modal
var modal =
'<div class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<button type="button" class="close" data-dismiss="modal" style="margin-top:-10px;">×</button>
<form class="no-margin">
<label>Title </label>
<label>$dates["title"][0]</label>
<button type="submit" class="btn btn-sm btn-success"><i class="ace-icon fa fa-check"></i> Save</button>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-sm btn-danger" data-action="delete"><i class="ace-icon fa fa-trash-o"></i> Delete Event</button>
<button type="button" class="btn btn-sm" data-dismiss="modal"><i class="ace-icon fa fa-times"></i> Cancel</button>
</div>
</div>
</div>
</div>';
var modal = $(modal).appendTo('body');
modal.find('form').on('submit', function(ev){
ev.preventDefault();
calEvent.title = $(this).find("input[type=text]").val();
calendar.fullCalendar('updateEvent', calEvent);
modal.modal("hide");
});
modal.find('button[data-action=delete]').on('click', function() {
calendar.fullCalendar('removeEvents' , function(ev){
return (ev._id == calEvent._id);
})
modal.modal("hide");
});
modal.modal('show').on('hidden', function(){
modal.remove();
});
console.log(calEvent.id);
console.log(jsEvent);
console.log(view);
// change the border color just for fun
//$(this).css('border-color', 'red');
}
});
})
</script>
答案就在问题中。我只引用你的话:
我在Stack Overflow上搜索了很多，发现了一些类似的话题。在一篇文章中，有人解释说这与月份的索引方式有关。
PHP从1到12计数。
我想这可能是我的问题。- JavaScript计数从0到11
是的。如果您需要有人指出正确的方向，让我们看看这部分代码:
print " start: new Date(".date("Y",$dates["start"][$x]).", ".date("n",$dates["start"][$x]).", ".date("j",$dates["start"][$x]).", ".date("G",$dates["start"][$x]).", ".date("i",$dates["start"][$x]).",0,0),n";
print " end: new Date(".date("Y",$dates["end"][$x]+1).", ".date("n",$dates["end"][$x]+1).", ".date("j",$dates["end"][$x]+1).", ".date("G",$dates["end"][$x]+1).", ".date("i",($dates["end"][$x]+1)).",0,0),n";
更准确地说:
date("n", $dates["start"][$x])
date("n", $dates["end"][$x]+1)
只需从月份值中减去1:
(date("n", $dates["start"][$x]) - 1)
(date("n", $dates["end"][$x]+1) - 1)
每次在JavaScript源代码中输出PHP月份值时都要执行此操作。
更好的是，您可以直接使用时间戳(记住JavaScript使用毫秒):
print " start: new Date(".($dates["start"][$x] * 1000)."),n";
print " end: new Date(".(($dates["end"][$x]+1) * 1000)."),n";