FullCalendar - Images as events

Question

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/

Answer 1

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 = ''
                  imgEventWrap.classList = "fc-event-img"
                  imgEventWrap.innerHTML = imgEvent;
                }
    
                arrayOfDomNodes = [ titleEvent,imgEventWrap ]
    
                return { domNodes: arrayOfDomNodes }
              },
            });
            calendar.render();
 
         });