FullCalendar - 将图片作为事件

Question

希望使用Full Calendar，并将图片作为事件并可拖动。简而言之，希望看到此示例https://fullcalendar.io/js/fullcalendar-3.0.1/demos/external-dragging.html在小缩略图上的工作方式，而不是文本“我的事件1，我的事件2”等，并在日历上显示该图像。谢谢。

- pete

Answer 1

您可以通过在事件定义中添加属性"imageurl"来将任何图像网址添加到您的eventObject中（如果只想要图像，则不需要指定标题）：

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 
        .
        .
        .
    }

在此之后，您需要在eventRender中添加以下代码，这将向事件添加图像图标（16宽度和高度是缩略图的好尺寸）：

之后，在eventRender中添加以下代码，将图像图标添加到事件中（使用16作为缩略图的宽度和高度是个不错的选择）：

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

有关详细信息，请参见此问题：在事件的第一行中添加图标（fullCalendar）

- Bernardo OS

Answer 2

在 Fullcalendar 5 版本或更高版本中，不再使用 eventRender，而是使用 eventContent 完整代码:

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();
 
         });

- tranthaihoang

---

最好将eventContent属性放在日历选项中，并使用renderer2，而不是直接调用document。然后，您可以摆脱监听器并绑定到fullcalendar的机制中。 - PeterS