| Issue 78: | Images in events | |
| 2 people starred this issue and may be notified of changes. | Back to list |
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 20, 2009
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
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
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
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
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
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
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
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
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
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
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
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 |
|
| ► Sign in to add a comment |
146 KB View Download