我正在使用 Adam Shaw 的 Fullcalendar http://fullcalendar.io/使用 Bootstrap 3。日历显示站点用户创建的事件。我有一个弹出窗口脚本，显示有关每个事件的更多信息。
我想在弹出框内显示创建事件的用户的个人资料图像。这些图像存储在每个用户的目录中，并按其 ID 标记，因此在整个网站中，我一直在使用下面的代码片段来显示用户个人资料图像，但我只是不知道如何在 fullcalendar 中执行此操作。我想我需要在下面的代码中回显 $eventsArray['id']; 但不知道如何做到这一点。我对 JavaScript 知之甚少。
`<img src="memberFiles/<?php echo "$id"; ?>/pic1.jpg" alt="Ad" width="100" class="img-thumbnail">`
这是 json 文件的一部分:
$events = array();
while ($row = mysql_fetch_assoc($res)) {
$id = $row["id"];
$fav = $row["fav_id"];
$eventsArray['id'] = $row['id'];
$eventsArray['title'] = $row['firstname'];
$eventsArray['firstname'] = $row['firstname'];
$eventsArray['lastname'] = $row['lname'];
$eventsArray['id'] = $row['id'];
$eventsArray['fav_id'] = $row['fav_id'];
$eventsArray['start'] = strtotime($row['start']);
$eventsArray['end'] = strtotime($row['end']);
$eventsArray['username'] = $row['username'];
$eventsArray['backgroundColor'] = '#33CC33';
$eventsArray['textColor'] = '#fff';
$eventsArray['url'] = 'profile.php?id='.$row['id'];
$eventsArray['allDay'] = true;
$eventsArray['editable'] = true;
$eventsArray['timeFormat'] = 'h(:mm)';
$events[] = $eventsArray;
}
$jsonData = json_encode($eventsArray);
echo $jsonData;
?>
这是 Fullcalendar 页面的一部分，用于接收并显示 json 文件中的事件。
<style>
#calendar {
width: 80%;
margin: 0 auto;
}
</style>
<script>
var img = '<div><img src="memberFiles/<?php echo "$id"; ?>/pic1.jpg" alt="Ad" width="100" class="img-thumbnail"></div>'
$(document).ready(function() {
var calendar = $('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
eventRender: function (event, element) {
element.popover({
placement:'top',
html:true,
image:true,
trigger : 'hover',
animation : 'true',
title: event.firstname +" "+ event.lastname,
content: img
container:'body'
});
},
defaultView: 'month', // See weekly agenda instead of monthly
firstDay: '1',//Monday
selectable: false, // User can select - click on an event
selectHelper: false,
select: function(start, end, allDay) { // Get the start, end, allday when one event slot is clicked
if (confirm("Some confirm text.")) { // Confirm before action
$('#hiddenStart').val(start); // Set an hidden field with start value (String or Timestamp)
$('#hiddenEnd').val(end); // Set another hidden field with end value (String or Timestamp)
$('#hiddenAllDay').val(allDay); // Set another hidden field with allDay value (true or false)
}
},
events: { // Render the events in the calendar
url: 'json-events-feed.php', // Get the URL of the json feed
type: 'POST', // Send post data
error: function() {
alert('There was an error while fetching events.'); // Error alert
}
}
});
});
</script>
</head>
<body>
<br>
<div class="container">
<br>
<div id='calendar'></div>
<!-- Popover using JavaScript to set content from hidden div -->
<!-- Popover 2 hidden title -->
<div id="popovertitle" style="display: none">
</div>
<!-- Popover 2 hidden content -->
<div id="popovercontent" style="display: none">
</div>
</div>
</div>
</div>
</div>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
</body>
</html>
最佳答案
问题是您正在使用
var img = '<div><img src="memberFiles/<?php echo "$id"; ?>/pic1.jpg"
alt="Ad" width="100" class="img-thumbnail"></div>'
然后你使用img里面eventRender 。即使您有 $id匹配用户 ID，每个事件都会显示相同的图像，无论创建该事件的用户是谁。
您应该添加 user_id到您的 json 文件(如下所示: $eventsArray['user_id'] = $row['user_id']; 。
然后，在你的 eventRender 里面，你会这样做:
eventRender: function (event, element) {
var correctImg = '<div><img src="memberFiles/' + event.user_id + '/pic1.jpg" ' +
'alt="Ad" width="100" class="img-thumbnail"></div>';
element.popover({
placement: 'top',
html: true,
image: true,
trigger : 'hover',
animation : 'true',
title: event.firstname +" "+ event.lastname,
content: correctImg,
container:'body'
});
},
此外，您似乎缺少 ,之后content: img .
关于javascript - Fullcalendar 将个人资料图像添加到弹出窗口，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25832244/