fullcalendar.js - 将for循环插入模态
我在我的项目中使用fullcalendar.js，现在一切正常，除了我的模态窗口。我将数据库中的数据插入fullcalendar.js！这些数据在我的日历中正确显示。如果我点击一个事件，模式就会打开，我想要显示那些数据。
我正在使用for循环来实现这一点，但它不能正常工作。似乎for-loop不知道它应该在模态窗口中显示哪些数据，因此显示所有条目。以下是它现在看起来的截图：
因此，如果我点击某个事件，会打开一个包含所有条目的模态，但我想要实现的是，只显示那些来自我点击的事件的条目。这是我的代码：
<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()-1;\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]) - 1).", ".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) - 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 "durationEditable : false,\n";
print " className: 'label-info',\n";
if ($dates["type"][$x]=="PM") {print "backgroundColor: '#000000',\n";}
if ($dates["type"][$x]=="AM") {print "backgroundColor: '#D15B47',\n";}
if ($dates["type"][$x]=="SM") {print "backgroundColor: '#FFB752',\n";}
if ($dates["type"][$x]=="S") {print "backgroundColor: '#87B87F',\n";}
if ($dates["type"][$x]=="SS") {print "backgroundColor: '#4F99C6',\n";}
if ($dates["type"][$x]=="MJ") {print "backgroundColor: '#A069C3',\n";}
if ($dates["type"][$x]=="PR") {print "backgroundColor: '#5A5A5A'\n";}
if ($x<(count($dates["id"])-1)) {
print " },\n";
} else {
print " }\n";
}
}
print "]\n";
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>
有人能告诉我我做错了什么吗？我的代码应该是什么样子才能正常工作？
2 个答案:
答案 0 :(得分：0)
我的情况与此完全相同。我所做的是使用在clickHandler JavaScript函数中内置的fullcalendar来获取日历项的ID。
然后我使用对我的PHP文件的AJAX调用从数据库中提取相关的项目详细信息，然后将它们附加到模态。
答案 1 :(得分：0)
你是在正确的道路上，只需要修复需要修复的Json，请检查fullcalender.js中的events选项中使用的以下代码
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);
}
});
}
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？