FullCalendar - Images as events

≯℡__Kan透↙ 提交于 2019-12-01 05:32:36

问题


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.


回答1:


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)



来源:https://stackoverflow.com/questions/40266483/fullcalendar-images-as-events

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!