fullcalendar.js - 将for循环插入模态
I am using fullcalendar.js in my project and right now everything works fine except my modal window. I am inserting data from my database into the fullcalendar.js! Those data are displayed correctly in my calendar. If I click on an event a modal opens and there I want those data to be displayed.
I am using a for-loop to achieve this but it is not working as it should. It seems as the for-loop does not know which data it should display inside the modal window therefore all entries are displayed. Here is a screenshot of what it looks right now:
So if I click on an event, a modal opens with all entries, but what I want to achieve is, that only those entries are shown which are from the event that I have clicked. Here is my code:
<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();
";
print "var d = date.getDate();
";
print "var m = date.getMonth()-1;
";
print "var y = date.getFullYear();
";
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: [
";
for ($x=0;$x<count($dates["id"]);$x++) {
print " {
";
print " title: '".$dates["title"][$x]."',
";
print " start: new Date(".date("Y",$dates["start"][$x]).", ".(date("n", $dates["start"][$x]) - 1).", ".date("j",$dates["start"][$x]).", ".date("G",$dates["start"][$x]).", ".date("i",$dates["start"][$x]).",0,0),
";
print " end: new Date(".date("Y",$dates["end"][$x]+1).", ".(date("n", $dates["end"][$x]+1) - 1).", ".date("j",$dates["end"][$x]+1).", ".date("G",$dates["end"][$x]+1).", ".date("i",($dates["end"][$x]+1)).",0,0),
";
print " allDay: false,
";
print "durationEditable : false,
";
print " className: 'label-info',
";
if ($dates["type"][$x]=="PM") {print "backgroundColor: '#000000',
";}
if ($dates["type"][$x]=="AM") {print "backgroundColor: '#D15B47',
";}
if ($dates["type"][$x]=="SM") {print "backgroundColor: '#FFB752',
";}
if ($dates["type"][$x]=="S") {print "backgroundColor: '#87B87F',
";}
if ($dates["type"][$x]=="SS") {print "backgroundColor: '#4F99C6',
";}
if ($dates["type"][$x]=="MJ") {print "backgroundColor: '#A069C3',
";}
if ($dates["type"][$x]=="PR") {print "backgroundColor: '#5A5A5A'
";}
if ($x<(count($dates["id"])-1)) {
print " },
";
} else {
print " }
";
}
}
print "]
";
timeFormat: 'h:mm'
?>
,
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">\
<?php for ($x=0;$x<count($dates["id"]);$x++) { ?>
<button type="button" class="close" data-dismiss="modal" style="margin-top:-10px;">×</button>\
<label> <strong>Topic:</strong> <?php echo $dates["type"][$x] ?></label>\
<label> <strong>Selected Start:</strong> <?php echo $dates["start"][0]?></label>\
<label> <strong>Selected End:</strong> <?php echo $dates["end"][0] ?></label>\
<label> <strong>Title:</strong> <?php echo $dates["title"][0] ?></label>\
<label> <strong>Location:</strong> <?php echo $dates["location"][0] ?></label>\
<label> <strong>Address:</strong> <?php echo $dates["adress"][0] ?></label>\
<label> <strong>Phone:</strong> <?php echo $dates["phone"][0] ?></label>\
<?php } ?>
</div>\
<div class="modal-footer">\
<button type="button" class="btn btn-sm" data-dismiss="modal"><i class="ace-icon fa fa-times"></i> Close Window</button>\
</div>\
</div>\
</div>\
</div>';
var modal = $(modal).appendTo('body');
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>
Can someone tell me what I am doing wrong? What should my code look like so that it is working?
I had exactly the same scenario as this. What I did was use fullcalendar's built in clickHandler JavaScript functions to get the ID of the calendar item.
Then I used an AJAX call to my PHP file to pull the relevant item details from the database and then append them to the modal.
You are on the right path, just the Json created needed to be fix please check the below code used in the events option in fullcalender.js
events:function(start, end, callback){
$.ajax({
type: "POST",
url: SITEROOT+'/controller/mycalendar/events.json.php',
data: {action:'getevents',view:$('#calendar').fullCalendar('getView').name,location:$("#location").val()},
success: function(result){
var events = [];
if(result){
$.each(result,function(i, item){
events.push({
id:result[i].id,
title:result[i].title,
start:result[i].start,
end:result[i].end,
url:result[i].url,
color:result[i].color,
textColor:result[i].textColor,
allDay:result[i].allDay
});
});
}
callback(events);
}
});
}