web-dev-qa-db-ja.com

フォントの素晴らしいアイコンを完全なカレンダータイトルに追加する

ワードプレス、手ごわいフォーム、フルカレンダーを使用して、オーダーメイドのカレンダーソリューションを作成しています

カレンダーの各タイトルの前にフォントの素晴らしいアイコンを追加したい以外は、すべてうまくいきました。

以下のコードのようにタイトルに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
        }
    ]
});

誰かが私を正しい方向に向けることができますか？ :-)

よろしく

マット

jquerywordpressfullcalendarfont-awesome
13
Matthew Barraud

タイトルを付加するfont-awesomeアイコンをeventRender関数内で変更できます。

キーアイコンを使用して1つのオプションを追加しました。アイコンが定義されている場合、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>");
     }
  }        
})
35
cesare

テキストをアイコンに置き換えたい場合は、以下のコードを使用できます

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

フルカレンダー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>");
}

乾杯ハンネス

0
Hannes Oberreiter

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>");
    }
}
0
S. Popic