web-dev-qa-db-fra.com

Ajouter une icône géniale de police au titre complet du calendrier

J'utilise wordpress, des formulaires formidables et un calendrier complet pour créer une solution de calendrier sur mesure

J'ai tout fonctionne sauf que je voudrais ajouter une icône de police impressionnante à l'avant de chaque titre dans le calendrier.

Si j'ajoute du code HTML dans le titre comme mon code ci-dessous, je vois juste le code imprimé et non les résultats finaux.

$('#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
        }
    ]
});

L'un de vous pourrait-il m'orienter dans la bonne direction ?? :-)

Cordialement

Mat

jquerywordpressfullcalendarfont-awesome
13
Matthew Barraud

Vous pouvez modifier l'icône de police pré-ajoutée au titre dans la fonction eventRender.

J'ai ajouté une option avec l'icône de clé: si l'icône est définie ajoute l'icône de fontawesome dans la fonction eventRender.

Vérifiez cet exemple:

$('#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

si vous souhaitez remplacer un texte par une icône, vous pouvez utiliser le code ci-dessous

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

Avec fullcalendar V4, mon rendu ressemble à ceci

titre json avec $ ICON comme espace réservé:

{
  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>");
}

A bientôt Hannes

0
Hannes Oberreiter

Eu le même problème avec le FullCalendar 4.3.1. J'espère que ça aide.

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