更改boot-strap的完整日历中的事件显示

Question

我有多种类型的正在进行的事件，我希望以不同的方式显示。 Full-Calendar显示正在进行的事件的默认方式是在所有包含的日期内使用条带。如何以图标显示正在进行的事件 - 而不是条纹？

这是我想要实现的目标。

我添加了一个自定义类并尝试更改显示 - 但是一旦事件发生 - 条带一直出现......

 {
     id: 2,
    title: 'Repeating Event',
    start: new Date('2017-05-01'),
    end: new Date('2017-05-05'),
    color:'aqua',
    className : "presentation"
     },

以下是fiddle

的示例

Answer 1

您可以使用以下方法删除条带：

.fc-event-skin {
  background-color: transparent !important;
  border: none;
  color: red;
}

.fc-event-inner::before {
  background-image: url("https://cdn3.iconfinder.com/data/icons/linecons-free-vector-icons-pack/32/calendar-512.png");
  background-size: 10px 20px;
  background-repeat: no-repeat;
  display: inline-block;
  width: 10px;
  height: 20px;
  content: "";
}

我不确定你想要使用什么图标。