How to change the full-calendar event's display?

Question

I've asked this question before - but i came to realize i didn't described the problem well.

Full-calendar events are being presented as one blue bar that spans over the included dates.

Each event is presented like this :

<td class="fc-event-container" colspan="4"> 
    <a class="fc-day-grid-event fc-
      event fc-start fc-end foo fc-draggable fc-resizable" 
        style="background-
   color:red;border-color:red"><div class="fc-content"> 
   <span class="fc-title">hello</span></div><div class="fc-resizer"></div>
   </a>
</td>

Suppose i have an event that span over 4 days - there are not actually 4 tds of content- but one td that span over 4 tds (colspan="4").

I need to add icon to each of the event included days, so it will looks like this :

but i can't because there are no tds to add content....thanks

Here is my Fiddle

Answer 1

Got it.... plunker

Needed to loop over the tds with the dates and then add the icons.

            eventAfterRender: function (event, element) {

                    $.each($('td .fc-day-number'), function(){

                        var zone_date =$(this).attr('data-date');

                        var event_start_date = event.start._i;
                        var event_end_date = event.end._i;

                        if( event_start_date == zone_date){


                        }

                        var fDate = new Date(event.start._i);
                        var lDate = new Date(event.end._i);
                        var cDate = new Date(zone_date);

                        if((cDate <= lDate && cDate >= fDate)) {
                          var foo = $('td .fc-event-container a');
                          $.each(foo,function(){

                            if($(this).hasClass('test') ){
                              $(this).remove();

                            };


                          });



                            var zone_class = event.className.toString();

                            $(this).addClass(zone_class);
                            $(this).css('background-color','red');
                            var current_num = $(this).text();
                            $(this).html(current_num + "<i class='fa fa-
                     circle'></i>");
                        }

                    });

                }

Answer 2

What about this solution: Fiddle ? I know it is not the same, but it is kind of soluiton with eventRender function. You can update my version, where the icon is multiplied by the event duration.