FullCalendar - 图像作为事件

Question

希望使用完整日历并将图像作为事件并可拖动。简而言之，很想看看这个示例 https://fullcalendar.io/js/fullcalendar-3.0.1/demos/external-dragging.html 如何使用小缩略图而不是文本“我的事件 1，我的活动 2”等。并将该图像显示在日历上。

提前致谢。

Answer 1

您可以通过在事件定义中添加属性“imageurl”来将任何图像 url 添加到 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: function(event, eventElement) {
    if (event.imageurl) {
        eventElement.find("div.fc-content").prepend("<img src='" + event.imageurl +"' width='16' height='16'>");
    }
},

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

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

Answer 3

在 FullCalendar 版本 6 中，您可以通过在事件对象中设置自定义属性并通过

eventContent

进行内容注入，例如：

events: [
    {
        title  : 'event',
        start  : '2024-10-12',
        end  : '2024-10-14',
        imageurl:'img/edit.png', // Your custom property, which represents the image
    },
    ..
],
// Rendering of the image
eventContent(arg) {
    // Get you custom image url from the event object
    const imageurl = arg.event.extendedProps.imageurl;
    // Return a image tag
    return {html: `<img src="img/${imageurl}">`}
}

自定义属性（非标准字段）：https://fullcalendar.io/docs/event-object#non-standard-fields

使用

eventContent

进行内容注入，这是一个事件渲染钩子：https://fullcalendar.io/docs/content-injection