在 FullCalendar 事件弹出模式中显示图像

Question

最近，我正在开发一个 fullCalendar，它包含事件的弹出模式，当我单击其中一个事件时，将弹出一个模式并向用户显示特定事件的详细信息。

我想添加一个函数，其中模式将由一张图像组成。

我查看了 Whosebug 上可用的几个示例，但我似乎没有找到与我的代码类似的解决方案。

我的代码

<script>
      jQuery(document).ready(function($) { 
         
        $('#calendar').fullCalendar({
                      
      header: {
      left:   'prevYear,nextYear',
      center: 'title',
      right:  'prev,next today'
      },
        defaultView: 'month',
        showNonCurrentDates:false,
        fixedWeekCount:false,
        contentHeight:"auto",
        handleWindowResize:true,

      events: [
        <?php 
            include 'connect.php';

      function getColor($date) {
        $currentDate = date('Y-m-d');
        $oneweekDate = date('Y-m-d',strtotime('+1 week'));
        $eventColor = '';

        if($date < $currentDate){
            $eventColor = '#FF0000';
        } else if($date >= $currentDate && $date < $oneweekDate){
            $eventColor = '#FFA500';
        } else{
            $eventColor = '#008000';
        }
        return $eventColor;
    }

            $sql="SELECT * FROM masterlist1 WHERE Tool_Status = 'Active'";
            $result=odbc_exec($conn,$sql);
            while($row=odbc_fetch_array($result)){
        $newEnd = date("Y-m-d", strtotime($row['Calibration_Due_Date']));
        $color = getColor($newEnd);
        $id = $row['Form_Tracking_ID'];
        $ownerID = $row['Owner_I_Employee_ID'];
        $ownerName = $row['Owner_I_Name'];
        $calibrator = $row['Calibrator'];
        $status = $row['Status1'];
        if($status == 'Pass'){
          $statusImage = 'calendarStatusImage/pass.jpg';
        }
                $description = $row['Description1'];
        $prevDate = date("F j, Y", strtotime($row['Date2']));
        $dueDate = date("F j, Y", strtotime($row['Calibration_Due_Date']));
        $depart = $row['Department1'];
        ?>
      {  
        title: '<?php echo $id?>',
        start: '<?php echo $newEnd?>', 
        end: '<?php echo $newEnd?>', 
        imageurl : '<image src='<?php echo $statusImage?>'>',
        calibrator: '<?php echo $calibrator?>',
        description : '<?php echo $description?>',
        extendedProps : {
          ownerid : '<?php echo $ownerID?>',
          ownername : '<?php echo $ownerName?>',
          department : '<?php echo $depart?>',
          prevdate : '<?php echo $prevDate?>',
          duedate : '<?php echo $dueDate?>',
          status : '<?php echo $status?>'
        },
        color : '<?php echo $color?>'
      }, 
      <?php } ?>
      ],

      eventRender: function eventRender( event, element, view ) {
        return ['Both', event.calibrator].indexOf($('#calibrator').val()) >= 0
      },

      eventClick: function(event) {
      $("#successModal").modal("show");
      $("#successModal .modal-body #para").text(event.title);
      $("#successModal .modal-body #para1").text(event.extendedProps.ownerid);
      $("#successModal .modal-body #para2").text(event.extendedProps.ownername);
      $("#successModal .modal-body #para3").text(event.extendedProps.department);
      $("#successModal .modal-body #para4").text(event.description);
      $("#successModal .modal-body #para5").text(event.extendedProps.prevdate);
      $("#successModal .modal-body #para6").text(event.extendedProps.duedate);
      $("#successModal .modal-body #para7").text(event.extendedProps.status);
      }
      });

      $('#calibrator').on('change',function(){
        $('#calendar').fullCalendar('rerenderEvents');
      });
});
      </script>

我可以在图片中添加任何相关示例吗？

Answer 1

所以我在@ADyson 的一些指导下对我的代码进行了更正，

模态正文

 <img id="image" alt="ToolStatusImage">

我已将此 img 标签添加到我的模态主体中，并将以下代码添加到我的事件点击中。

事件点击

$("#successModal .modal-body #image").attr("src",event.imageurl);

此后代码完全可以正常工作！

在 FullCalendar 事件弹出模式中显示图像

Showing Image in FullCalendar Event PopUp Modal

html

javascript

php

fullcalendar

fullcalendar-3