將字體真棒圖標添加到完整的日歷標題

Question

我正在使用 wordpress、強大的表單和完整的日歷來創建定制的日歷解決方案

除了我想在日歷中每個標題的前面添加一個字體真棒圖標之外，我一切都在工作。

如果我像下面的代碼一樣在標題中添加任何 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 函數中修改標題前面的字體真棒圖標。

我添加了一個帶有關鍵圖標的選項：如果定義了圖標，則在 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，我的渲染看起來像這樣

以 $ICON 作為占位符的 json 標題：

{
  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.xx，我的方法有點不同，因為我只在前面添加圖標，所以我不再需要 $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.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 刪除了“時間”

然后我從這里看到另一個答案指向類“.fc-title”並且它有效，但不適用於 FullCalendar 4.4 中的列表視圖

我使用了以下代碼，它對我有用，用於月視圖、周視圖、日視圖和列表視圖。

如您所見，它基於我在此處找到的一些答案。 希望能幫助到你。

 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

如果你想用圖標替換文本，你可以使用下面的代碼

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

Answer 6

您可以在 fullcalendar 標題中添加字體真棒圖標作為 css 內容（：偽元素之前）

.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