添加字体awesome图标到完整的日历标题

Question

我正在使用wordpress，强大的表单和完整的日历来创建一个定制的日历解决方案

我有一切工作，除了我想在日历的每个标题的前面添加一个字体awesome图标。

如果我在标题中添加任何html，就像下面的代码一样，我只会看到打印的代码，而不是最终结果。

$('#calendar').fullCalendar({
    events: [
        {
            title  : '<i class="fa fa-asterisk"></i>event1',
            start  : '2010-01-01'
        },
        {
            title  : 'event2',
            start  : '2010-01-05',
            end    : '2010-01-07'
        },
        {
            title  : 'event3',
            start  : '2010-01-09T12:30:00',
            allDay : false // will make the time show
        }
    ]
});

你们谁能给我指个正确的方向?: -)

对

马特

Answer 1

您可以在eventRender函数中修改标题前置字体-awesome图标。

我添加了一个键图标选项:如果图标被定义，在eventRender函数中追加fontawesome图标。

检查这个例子:

$('#calendar').fullCalendar({
  events: [
    {
        title  : 'event1',
        start  : '2015-10-01',
        icon : "asterisk" // Add here your icon name
    },
    {
        title  : 'event2',
        start  : '2015-10-05',
        end    : '2015-10-07'
    },
    {
        title  : 'event3',
        start  : '2015-10-09T12:30:00',
        allDay : false // will make the time show
    }
],
eventRender: function(event, element) {
     if(event.icon){          
        element.find(".fc-title").prepend("<i class='fa fa-"+event.icon+"'></i>");
     }
  }        
})

Answer 2

使用fullcalendar V4，我的渲染看起来像这样

json标题，$ICON作为占位符:

{
  start: date
  title: '$ICON custom_name'
  img: 'fontawesome-icon-name'
}

eventRender: function(info) {
  info.el.innerHTML = info.el.innerHTML.replace('$ICON', "<em class='far fa-"+info.event.extendedProps.img+"'></em>");
}

编辑:与fullcalendar 5.x。x，我的方法有点不同，因为我只在前面添加图标，我不再需要$ icon占位符了。

eventContent: function (args, createElement) {
  const icon = args.event._def.extendedProps.img;
  const text = "<em class='far fa-" + icon + "'></em> " + args.event._def.title;
  return {
    html: text
  };
},

干杯汉斯·

Answer 3

Full Calendar 4.4也有同样的问题。我尝试使用s.p poppic

中的代码

eventRender: function (info) {
  let icon = info.event.extendedProps.icon;
  let title = $(info.el).first('.fc-title-wrap');
  if (icon !== undefined) {
    title.prepend("<i class='" + info.event.extendedProps.icon + "'></i>");
  }
}

它可以工作，但有一个小问题:.fc-title-wrap删除了"time"

然后我看到另一个答案从这里指向class '。fc-title'，它工作，但不是在FullCalendar 4.4中的listview

我使用了下面的代码，它为我工作，月视图，周视图，日视图和列表视图。

正如你所看到的，它是基于我在这里找到的一些答案。希望能有所帮助。

 eventRender: function (info) {            
        let icon = info.event.extendedProps.icon;
        // this works for Month, Week and Day views
        let title = $(info.el).find('.fc-title');
        // and this is for List view
        let title_list = $(info.el).find('.fc-list-item-title a');
  
        if (icon) {
            var micon = "<i class='" + icon + "'></i>&nbsp";
            title.prepend(micon);
            title_list.prepend(micon);
        } 
  }

        

Answer 4

FullCalendar 4.3.1也有同样的问题。希望能有所帮助。

eventRender: function (info) {
    let icon = info.event.extendedProps.icon;
    let title = $(info.el).first('.fc-title-wrap');
    if (icon !== undefined) {
        title.prepend("<i class='" + info.event.extendedProps.icon + "'></i>");
    }
}

Answer 5

你可以在fullcalendar title中添加字体awesome图标作为css内容(:before Pseudo-element)

.fc-title:before {
  font-family: "Font Awesome 5 Free";
  content: "f274";
  display: inline-block;
  padding-right: 3px;
  font-weight: 900;
}

根据需要添加css内容，目前使用的是fa-calendar-check图标内容。可以将font-family改为Font Awesome 5 Brands或Font Awesome 5 Free

Answer 6

如果你想用图标代替文本，你可以使用下面的代码

eventRender: function(event, element) {
   element.find(".fc-title").html(function () { return $(this).html().replace("Rs", "<i class='fa fa-inr'></i>")});
}