Add Icon(s) in first line of an event (fullCalendar)

For specific attributes of an event to be displayed in the 'fullCalendar' matrix I would like to add icons to show them, for 'completed' an (i) button, or an URL symbol in case the event contains an URL link.

I don't want to write any html string to one of the elements (fc-event-time/-title) in the <a> element, but define an additional element like this:

<a>
  <span class="fc-event-time">15:15  - 16:15<br></span>
  **<span class="fc-event-icons"> ..some definitions for icons here ..</span>**
  <span class="fc-event-title">Fri Dille</span>
</a>

Any help here? Günter

user2219484

Well this topic is old, but I couldn't find here how to do it with <img> tags so I leave here another way to put images in fullcalendar events:

Add in your eventObject a path to the image. If you use javascript it would be something like:

events: [
    {
        title  : 'event1',
        start  : '2010-01-01',
        imageurl:'img/edit.png'
    },
    {
        title  : 'event1',
        start  : '2010-01-01'
    }]

Then on eventRender just put the image:

eventRender: function(event, eventElement) {
    if (event.imageurl) {
        eventElement.find("div.fc-content").prepend("<img src='" + event.imageurl +"' width='12' height='12'>");
    }
},

If you want to use the same image on all items, you just need to put this in your eventRender:

eventElement.find("div.fc-content").prepend("<img src='pathtoimage.png' width='12' height='12'>");

You could piggyback the "eventRender" event like so:

$("#YourCalendar").fullCalendar({
    eventRender: function(event, element) {
        element.find(".fc-event-time").after($("<span class=\"fc-event-icons\"></span>").html("Whatever you want the content of the span to be"));
    }
});

similarly you could append the new element to any other element in the event's DIV container

One possible solution could be:

  myUtil.goCalendar();       // build calendar with all events 

  // --- post process to add functionality to 'specific' events displayed 
  //     in the calendar matrix, eg. "completed"
  $("div.afc-completed").each(function(){
     $(this).find('span.fc-event-time').addClass("afc-event-completed");
  });

With myUtil.goCalendar(); I building the calendar with all events. That includes to add an event.className ('afc-completed') for all events with that attribute. After building the calendar I get all those events and add another class to the 'fc-event-time'. That's not what I thought with my first request, but could be a base to add more html code using a CSS statement like this:

.afc-event-completed {
    color: red;
    text-decoration: line-through;
}

.. or to add icons. Maybe not the best procedure .. but a way to solve the requirement.

Call for experts:
Any other/ better/ shorter/ faster way.
Günter

With this you can add text or HTML to the title of your events in Fullcalendar

eventRender: function(event, element) {

            var icon  = 'The icon you want, HTML is possile';
                $(element).find('.fc-time').append(icon);
            }

Hi I solved my problem in modifying the fullcalendar.min.js and remove the htmlEscape on the title. Just find the word HtmlEscape and remove it. and in the event calendar you can now append icons like

this works for me :

in full calendar 1.5.4

eventRender: function(event, element) { 
     //this will add <span> and you can append everthing there
     element.find("div").find("span").before("<span/>").addClass("iconcon");
}

and put in CSS

.iconcon:before{  //if icon not there then change :before with :after
  font-family: "FontAwesome";  
  content: "\f1fd\00a0";   // \00a0 is blank space
  color: #fff;
}

Fabio Zatta

eventRender: function (calEvent, element) {

    element.find("div.fc-content").prepend("<img src='/imagens/IconExperience/16x16/sms.png' width='16' height='16'>"); 
}

-- listener event click

eventClick: function (calEvent, jsEvent, view) {

    if (jsEvent.target.href != undefined) {
        //click on a icon in event
        "http://localhost:64686/imagens/IconExperience/16x16/whatsapp-icon.png"
        etc...
    }
    alert(jsEvent.target.href);
}

来源：https://stackoverflow.com/questions/3750521/add-icons-in-first-line-of-an-event-fullcalendar

标签

jquery

fullcalendar