Fullcalendar добавляет изображение профиля в popover

Я использую Fullcalendar Адама Шоу http://fullcalendar.io/ с Bootstrap 3. Календарь отображает события, созданные пользователями сайта. У меня есть popover скрипт, который показывает больше информации о каждом событии.Fullcalendar добавляет изображение профиля в popover

Я хочу показать изображение профиля для пользователя, создавшего событие внутри поля. Изображения хранятся в каталогах для каждого пользователя, помеченного их идентификатором, и поэтому на протяжении всего сайта я использовал часть кода ниже для отображения изображения профиля пользователя, но я просто не могу понять, как это сделать в полнокалендарном режиме. Я думаю, мне нужно эха $ 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>

источник

2014-09-14 JulianJ

Вопрос заключается в том, что вы используете

var img = '<div><img src="memberFiles/<?php echo "$id"; ?>/pic1.jpg" 
      alt="Ad" width="100" class="img-thumbnail"></div>'

, а затем использовать img внутри eventRender. Даже если у вас есть $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' 
    }); 
},

Кроме того, вы, кажется, не хватает a , после content: img.

источник

2014-09-14 18:39:33

Отлично, я вижу, как это будет работать. Проблема только в том, что календар не загружается. Есть ли ошибка в синтаксисе для var correctImg? – JulianJ

Все работает отлично. Я думаю, что alt = "ad" в синтаксисе вызывало некоторую проблему. Большое спасибо. – JulianJ

Возможно, это был разрыв строки, который я добавил перед атрибутом 'alt'. Я добавил разрыв строки, чтобы сразу увидеть полную строку (вместо горизонтальной полосы прокрутки). Вы должны удалить разрыв строки в своем JS. –

Fullcalendar добавляет изображение профиля в popover

ответ

Смежные вопросы