[英]Showing Image in FullCalendar Event PopUp Modal
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.最近,我正在研究一个 fullCalendar,它由事件的弹出模式组成,当我单击其中一个事件时,会弹出一个模式并向用户显示特定事件的详细信息。
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.我查看了 stackoverflow 上可用的几个示例,但我似乎没有找到与我的代码类似的解决方案。
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 ?我可以在图像中添加任何相关示例吗?
So the correction that i did to my code after some guidance from @ADyson,所以我在@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.我已将此 img 标签添加到我的模态正文中,并将以下代码添加到我的事件点击中。
Event Click事件点击
$("#successModal .modal-body #image").attr("src",event.imageurl);
The code works totally fine after that !之后代码完全正常!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.