Showing Image in FullCalendar Event PopUp Modal

Question

Recently, im working on a fullCalendar which consist of a pop up modal on the events, when i click on one of the events, there will be a modal popping out and showing the user the details of the specific event.

I wanted to add in a function where the modal will consists of one image.

Ive looked into several examples available on stackoverflow, but i just doesnt seem to find out the solution which is similar to my code.

My Code

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

Is there any relevant examples that i can add in the images ?

If you want to put a picture of something in HTML then you use an ` — ADyson, Jul 19 '21 at 09:53
Also, as a more general point - seriously, don't build JSON by hand or mix your JS and PHP together in such a complicated way (like you're doing with the event data). It's very error-prone, hard to read, and hard to debug. Instead build an array of objects (or associative arrays) using PHP and then just `json_encode()` the array at the end, to pass it to your JS. — ADyson, Jul 19 '21 at 09:55
I am not familiar with full calendar codes Sir, thats why i mix and match. But im glad you pointed out the correct way to do it. — Steve Kush, Jul 20 '21 at 04:45
You would put it somewhere in the html of your modal, wherever you want it to show up — ADyson, Jul 20 '21 at 06:33
sorry but i still dont get it Sir . as in is my in the correct place ? and should i use the text tag for the modal too ? or @ADyson — Steve Kush, Jul 20 '21 at 08:23
`is my in the correct place ?`...no it's not - I explained this already. Just make it say `imageurl : ''` then it returns just the URL, without muddying the pure data with HTML. — ADyson, Jul 20 '21 at 20:34

score 1 · Accepted Answer · answered Jul 21 '21 at 00:13

So the correction that i did to my code after some guidance from @ADyson,

Modal body

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

Ive added this img tag into my modal body and added the below code into my event click.

Event Click

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

The code works totally fine after that !

Showing Image in FullCalendar Event PopUp Modal

1 Answers1