Issue 78: Images in events
Status:  WontFix
Owner: ----
Closed:  Apr 2010
Reported by greasedo...@gmail.com, Aug 13, 2009
Hi,

I would like to know if it's possible to add images to events, and if so,
how would it be done?  Would you suggest passing HTML code to the event title?

Sincerely,
Eric

Aug 14, 2009
#1 rmalk...@gmail.com
Hi Eric,
It depends of the use of the image and if the image concern a event type or it's for
events.

If you want a background image in your event, the best way is to assign a class that
will do it, and to add a 'className' as an item in your data source. As saw in the
documentation ;)

If you want to add a icon near the title, you must use the option : 'eventRender' to
pass a function that will do it.

I'm just work on it, and you can see an image attached of the actual render ;o)
If you want I can send you my work.

Heirem
http://heirem.fr
admincal.jpg
146 KB   View   Download
Aug 20, 2009
#2 greasedo...@gmail.com
Thank you Heirem,

This is exactly what I had in mind.

If you don't mind I would be please to see how you did it!

Best regards,
Eric
Aug 30, 2009
Project Member #3 adamrs...@gmail.com
hi greasedonkey,
as heirem suggests, its probably best to assign a className, and do the rest in css. 
heres a quick outline of what you could do:

1. assign a 'className' of 'myClass' to an event
2. in fullcalendar.css, add something like this:

   .full-calendar-month .myClass td.c {
       padding-left: 20px;
       background-image: url(http://asdf.com/myimage.gif);
       background-repeat: no-repeat;
       background-position: 2px 50%;
       }

hope this helps,
adam
Summary: Images in events
Nov 10, 2009
#4 brism...@gmail.com
Hi Eric and Adam,

I just started using the plug-in yesterday (what a fantastic tool!) after spending
days/weeks trying to get Telerik to work with all the rad wrapping, what a challenge
that was. I consider myself a very casual coder, but what I did was simply pass in an
extra field in the json result called imageurl. Then in the eventRender appended it
like so:

eventRender: function(event, eventElement) {
  if (event.imageurl) {
      if (eventElement.find('span.fc-event-time').length) {
        eventElement.find('span.fc-event-time').before($(event.imageurl));
      } else {
        eventElement.find('span.fc-event-title').before($(event.imageurl));
      }
}

I should also check for the title and if not there insert a default or perhaps modify
the js to do so properly - but I am not at that point yet.

I am currently passing in the full image tag, however, I may just pass in the image
name and have the img src foundation in the js depending on other actions I might
want to add like tips etc.
$("<img src = 'http://localhost:3067/Images/default_thumbnail.jpg'
style='width:24px;height:24px'/>"));

May not be the right way, but seemed logical and straightforward. I can not wait to
see what else I can do. Perhaps add an event on the date number in the month view to
take me to the day view.

Thanks for a great tool. 

Brian

Apr 26, 2010
Project Member #5 adamrs...@gmail.com
i am closing this issue b/c i believe the best way to do this is through existing 
means:
- use className + CSS styles (as i pointed out in a previous post)
- or use eventRender (as brismi68 pointed out)
Status: WontFix
Feb 15, 2011
#6 victor.a...@gmail.com
Hi,
  I want always display the image when the event is exist to a date.
  how to write the java script....
please help me...


Thank You....
 
   
Aug 10, 2012
#7 mahie...@mahiette.com
i need to add a small icon in each of the events so wold be great if we can be able to show like, but this doesnt show for me after that code below what else should i do? please help that way i dont have to change the entire caledar for another... 
appreciated!!!!!!!!!!! :
------------------------------------------------------------------------------
                events: [
                    {
			img: 'images/margaritas.jpg',
                        title: 'Papas on the Lake Snit Dog & Pony Show free',
                        start: new Date(2012, 08, 01, 20, 00),
                        end: new Date(2012, 08, 01, 23, 30),
                        allDay: false
                    },
----------------------------------------------------------------------
Dec 11, 2012
#9 happysha...@gmail.com
i am new to drupal.i want to show icons in fullcalendar events same as above picture. i have a variable which stores the image url. can i use image tag in fullcalendar view.the <img src = "url"> tag cannot work in fullcalendar view. plz tell me how can i show event icons now?

aryan
Apr 10, 2013
#10 mustapha...@gmail.com
Hi Heirem , 

currently i work with fullcalendar and I need to show icons near the title  , so it would be great if you can be able to share the code that help me to
pass a function that will do it .

thank's in advance 

best regards 
Mustapha M
Jan 19, 2014
#12 j...@uuuc.dk
Hi.Im stuck with an assignment here. How can I display an image in fullcalendar event. I know its something with the eventRenderer method but I can't find the right way to do this. The link to my project is here. I need to drag and drop the imagefiles to the events. 
http://boerne.migraeniker.dk/kalender_filer/default.html
right now I can only display the title above the images. 
My code is here:
<!DOCTYPE html>
 <head>
<meta charset="UTF-8">
<title>børnemigræne</title>
</head>

<html>
<head>
<link href='fullcalendar/fullcalendar.css' rel='stylesheet' />
<link href='fullcalendar/fullcalendar.print.css' rel='stylesheet' media='print' />
<script src='lib/jquery.min.js'></script>
<script src='lib/jquery-ui.custom.min.js'></script>
<script src='fullcalendar/fullcalendar.js'></script>

<script>

 $(document).ready(function() {
 
 var eventcolor;	
  var date = new Date();
 
  var d = date.getDate();
  var m = date.getMonth();
  var y = date.getFullYear();
  
  $('#external-events div.external-event').each(function() {
		
			// create an Event Object (http://arshaw.com/fullcalendar/docs/event_data/Event_Object/)
			// it doesn't need to have a start or end
			var event = {
			
				title: 
				$.trim($(this).text()),
				start: this.start,
				end:   this.end,
				img:   'icons/kalender_medicin_small.png'
				// use the element's text as the event title
			};
			
			// store the Event Object in the DOM element so we can get to it later
			
			$(this).data('event', event);
			
			// make the event draggable using jQuery UI
			$(this).draggable({
				zIndex: 999,
				revert: true,      // will cause the event to go back to its
				revertDuration: 0  //  original position after the drag
			});
			
		});
	

 
  var calendar = $('#calendar').fullCalendar({
   defaultView: 'basicWeek',
    aspectRatio: 1.5,
    
   
   editable: true,
  
   header: {
    left: 'prev,next today',
    center: 'title',
    right: 'basicWeek,basicDay'
    
   },
   
   
   
   events: "http://boerne.migraeniker.dk/kalender_filer/events.php",
   eventColor: '#000',
   
 
   
   // Convert the allDay from string to boolean
   eventRender: function(event, element, view) {
    if (event.allDay === 'true') {
     event.allDay = true;
    } else {
     event.allDay = false;
    }
   },
    
   
   
   
   
   droppable: true, 
   selectable: true,
   selectHelper: true,
   		

	
		
   
   select: function(start, end, allDay) {
   
   //
    
   if (title) {
    
   $.ajax({
   url: 'http://boerne.migraeniker.dk/kalender_filer/add_events.php',
   data: 'title='+ title+'&start='+ start +'&end='+ end,
   type: "POST",
   success: function(json) {
   
   
   }
   });
   
   calendar.fullCalendar('renderEvent',
   {
   
   title: title,
   start: start,
   end: end,
   allDay: allDay,
   
   },
   true // make the event "stick"
   );
   }
   calendar.fullCalendar('unselect');
   },
   
   
   
   
   
 drop:function(start,end, allDay) {
	 
	var originalEventObject = $(this).data('event');
				
				// we need to copy it, so that multiple events don't have a reference to the same object
      var copiedEventObject = $.extend({}, originalEventObject);
       
       if (copiedEventObject.title) {
 
     
      start = $.fullCalendar.formatDate(start, "yyyy-MM-dd HH:mm:ss");
      
      
    
		$.ajax({
   url: 'http://boerne.migraeniker.dk/kalender_filer/add_events.php',
   data: 'title='+copiedEventObject.title+'&start='+ start +'&end='+ end,
   type: "POST",
   success: function(json) {
  
   }
   });
		
	if(copiedEventObject.title=="Tog en pille"){
	 eventcolor='blue';
	 
	}
	else{
	 eventcolor="red";
				
	}
  calendar.fullCalendar('renderEvent',
   {
   
   title: copiedEventObject.title,
   start: start,
   end: end,
   allDay: allDay,
   backgroundColor:eventcolor,
   
   
   
   },
   true // make the event "stick"
   );
 
   }
   
   calendar.fullCalendar('unselect');
   },	
   
  
  
  
 
   
                           
			
				// render the event on the calendar
				// the last `true` argument determines if the event "sticks" (http://arshaw.com/fullcalendar/docs/event_rendering/renderEvent/)
				
   
   
   
   
   
   
   
   
   eventDrop: function(event, delta) {
    
   var start = $.fullCalendar.formatDate(event.start, "yyyy-MM-dd HH:mm:ss");
   var end = $.fullCalendar.formatDate(event.end, "yyyy-MM-dd HH:mm:ss");
   $.ajax({
   url: 'http://boerne.migraeniker.dk/kalender_filer/update_events.php',
   data: 'title='+ event.title+'&start='+ start +'&end='+ end +'&id='+ event.id ,
   type: "POST",
   success: function(json) {
    
   }
   });
   },
   eventResize: function(event) {
   var start = $.fullCalendar.formatDate(event.start, "yyyy-MM-dd HH:mm:ss");
   var end = $.fullCalendar.formatDate(event.end, "yyyy-MM-dd HH:mm:ss");
   $.ajax({
    url: 'http://boerne.migraeniker.dk/kalender_filer/update_events.php',
    data: 'title='+ event.title+'&start='+ start +'&end='+ end +'&id='+ event.id ,
    type: "POST",
    success: function(json) {
     
    }
   });

},

 


 eventClick: function (event) {
  
var decision = confirm("Vil du slette begivenheden?"); 
if (decision) {
$.ajax({
type: "POST",
url: "http://boerne.migraeniker.dk/kalender_filer/delete_event.php?",
data: "&id=" + event.id
});
$('#calendar').fullCalendar('removeEvents', event.id);

} else {
}
}
   
  });
  
 });

</script>
<style>

 body {
  margin-top: 40px;
  text-align: center;
  font-size: 14px;
  font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;

  }
  
#wrap{
 width:1100px;
}
        
	
	#header{
	 width:100px;
	 margin-left:100px;
	 float:left;
	}
		
		
	.external-event { /* try to mimick the look of a real event */
	        cursor: pointer;
		float:right;
		
		}
		
	#external-events p input {
		margin: 0;
		vertical-align: middle;
		}
		
       
 #calendar {
  position:absolute;
  left:300px;
  width: 800px;
  height: 400px;
  margin: 0 auto;
  }
div.fc-event.completed-task div.fc-event-inner
{
    background-image: url('checkbox-icon.png');
    background-position: bottom right;
    background-repeat: no-repeat;
}
</style>
</head>
<body>
 <div id="dialog" title="Alert">
<p>
Hello this is my first dialog using</p>
</div>
 <div id='wrap'>
  <div id="external-events">
  <div id='header'> <h3>Hvordan har du det idag?</h3>
<div class='external-event'>Tog en pille<img  src="icons/kalender_medicin_small.png" width="100" /></div><br/>
<div class='external-event'>blev i sengen<img  src="icons/kalender_pude_small.png" width="100" /></div>
<div class='external-event'>Ikke godt<img src="icons/kalender_sur_smiley_small.png"width="100" /></div>
<div class='external-event'>Ingen hovedpine<img src="icons/kalender_glad_smiley_small.png" width="100" /></div>

  </div>
  
</div>
  
  
  
 
<h4>Hvordan har du det?</h4>





<div id='calendar'></div>



</div>
</body>
</html>
 
Oct 3, 2014
#13 fattiesm...@gmail.com
Hi Heirem, 

Can you please show us the code you had for your example above? I have tried few different ways to add images in fullcalendar in angularjs directives, but somehow still not showing the images/icon. Thanks in advance.

Fred
Feb 4, 2015
#14 bpati...@gmail.com
Hi Heirem,
   I have tried few different ways to add icon in event in fullcalendar in angularjs directives, please assist me to achive , i want same out put as you shown above.

thanks and regards
Basavaraj Patil
Jul 24, 2015
#15 vis...@vocso.com
hello everyone,

I have tried to set background image on the specific event but not successful till now. Is there anyone who can help me about the same.

Thanks in advance
Vishal