FullCalendar - Images as events

8
votes

Looking to use Full Calendar and to include images as events and draggable. In short, would love to see how this example https://fullcalendar.io/js/fullcalendar-3.0.1/demos/external-dragging.html would work with small thumbnails instead of the text "My Event 1, My Event 2" etc. And have that image show up on the calendar.

Thanks in advance.

2
fullcalendar

2 Answers

16
votes

You can add any image url to your eventObject by adding the attribute "imageurl" inside of the events definition (if you just want the image, don't specify a title):

events: [
    {
        title  : 'event',
        start  : '2016-10-12',
        end  : '2016-10-14',
        imageurl:'img/edit.png', //you can pass the image url with a variable if you wish different images for each event 
        .
        .
        .
    }

After that, you add the following code in the eventRender, which will add the image icon to the event (16 width and height is a good size for a thumbnail):

eventRender: function(event, eventElement) {
    if (event.imageurl) {
        eventElement.find("div.fc-content").prepend("<img src='" + event.imageurl +"' width='16' height='16'>");
    }
},

For further details refer to this question: Add Icon(s) in first line of an event (fullCalendar)

3
votes

In version Fullcalendar 5 or newer eventRender is no longer used, instead used eventContent Full code:

document.addEventListener('DOMContentLoaded', function() {
            var calendarEl = document.getElementById('calendar');
            var calendar = new FullCalendar.Calendar(calendarEl, {
              initialView: 'dayGridMonth',
              events: [
                {
                  title: '',
                  start: '2020-09-02',
                  image_url: 'images/demo/event-calendar-1.png',
                },
                {
                  title: '',
                  start: '2020-09-02',
                  image_url: 'images/demo/event-calendar-2.png',
                },
                {
                  title: 'Event',
                  start: '2020-09-17',
                  image_url: 'images/demo/event-calendar-1.png',
                },
                {
                  title: '',
                  start: '2020-09-19',
                  image_url: 'images/demo/event-calendar-3.png',
                },
                {
                  title: 'Hello',
                  start: '2020-09-28'
                },
              ],
              eventContent: function(arg) {
                let arrayOfDomNodes = []
                // title event
                let titleEvent = document.createElement('div')
                if(arg.event._def.title) {
                  titleEvent.innerHTML = arg.event._def.title
                  titleEvent.classList = "fc-event-title fc-sticky"
                }
    
                // image event
                let imgEventWrap = document.createElement('div')
                if(arg.event.extendedProps.image_url) {
                  let imgEvent = '<img src="'+arg.event.extendedProps.image_url+'" >'
                  imgEventWrap.classList = "fc-event-img"
                  imgEventWrap.innerHTML = imgEvent;
                }
    
                arrayOfDomNodes = [ titleEvent,imgEventWrap ]
    
                return { domNodes: arrayOfDomNodes }
              },
            });
            calendar.render();
 
         });