Question

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

提前致谢。

Answer 1

您可以通过添加属性＆＃34; imageurl＆＃34;将任何图片网址添加到您的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'>");
    }
},

有关详细信息，请参阅此问题：Add Icon(s) in first line of an event (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();
 
         });

FullCalendar - 图像作为事件

2 个答案: