如何在特定日期的事件背景中添加事件图像？

Question

嘿嘿嘿，我提出了这个问题，因为我真的很难处理它..

我希望日历能够以某种方式显示：http://www.juice.ph/events#1298822400

关于如何实现这一点的任何提示（或者我猜这个问题的代码片段）？谢谢.. :)）

Answer 1

我使用背景图片来装饰我的事件槽（在 agendaDay 视图中）。

.fc-event {
   background: url('tick.png') no-repeat;
   min-height: 49px;
   min-width: 64px;
}

在月视图中，Fullcalendar为您设置了每个单元格的标识符：

• .fc-day1 ... .fc-dayN 或
• .fc-week0 .fc-sun ... N

您可以为每个所需的单元格设置CSS样式，或者通过jquery以动态方式设置它。

Answer 2

如果要使用图像而不是CSS类，则可以使用以下方法： 1.在event objects的扩展道具中指定图片网址：

    events: [
    {
      title: 'test 1', 
      start: '2020-02-06',
      extendedProps:{
          img:'https://pinngle.me/img/logo.png'
      }         
    },
    {
      title: 'test 2', 
      start: '2020-02-06',
      extendedProps:{
          img:'https://pinngle.me/img/logo.png'
      }         
    }
  ]

1. 添加eventRender函数，该函数将创建图像并将其添加到事件对象之前：

   eventRender: function(info) {
       let img = document.createElement('img');
       img.src = info.event.extendedProps.img;
       info.el.prepend(img);
   }