Fullcalendar将个人资料图像添加到popover

我正在使用Adam Shaw的Fullcalendarhttp://fullcalendar.io/使用Bootstrap 3。日历显示网站用户创建的事件。我有一个popover脚本，它显示了有关每个事件的更多信息。

我想在弹出框中显示创建事件的用户的配置文件图像。这些图像存储在每个用户的目录中，每个用户都有自己的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>'

然后在CCD_ 2中使用CCD_ 1。即使您有一个与用户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之后缺少了一个,。

相关内容

最新更新

热门标签：