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

编程问答 2022-11-18

问题描述

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

>

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

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

我的代码

<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,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>

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

解决方法

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

模态体

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

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

事件点击

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

代码在此之后完全正常！

fullcalendarfullcalendar-3htmljavascript