title: Append image to a given cell
body: <p>I would like to show a small square in the bottom right instead of showing the text of the event in the cell (=day). </p>
  
  <p>The point is, when there is a small square in the bottom right corner, there is an important date. </p>
  
  <p>My issue is that the image is being appended multiple times when it should be appended just once.</p>
  
  <pre><code>$('#calendar').fullCalendar
  ({
      theme: true,
          header:
          {
              left: 'prev,next day',
              center: 'title',
              right: 'month,agendaWeek,agendaDay'
          },
          defaultDate: '2014-11-12',
          editable: false,
          eventLimit: false, // allow "more" link when too many events
          dayRender: function(date, element, view)
              {
                  $('.fc-today').append('&lt;img src="images/square.png"&gt;');
              }
  });
  </code></pre>
  
  <p>The result is in FireBug:</p>
  
  <pre><code>&lt;td class="fc-day-number fc-fri fc-today ui-state-highlight" data-date="2014-12-19"&gt;
  19
  &lt;img src="images/square.png"&gt;
  &lt;img src="images/square.png"&gt;
  &lt;img src="images/square.png"&gt;
  &lt;img src="images/square.png"&gt;
  &lt;img src="images/square.png"&gt;
  &lt;img src="images/square.png"&gt;
  &lt;img src="images/square.png"&gt;
  &lt;img src="images/square.png"&gt;
  &lt;img src="images/square.png"&gt;
  &lt;img src="images/square.png"&gt;
  &lt;img src="images/square.png"&gt;
  &lt;img src="images/square.png"&gt;
  &lt;img src="images/square.png"&gt;
  &lt;img src="images/square.png"&gt;
  &lt;img src="images/square.png"&gt;
  &lt;img src="images/square.png"&gt;
  &lt;img src="images/square.png"&gt;
  &lt;img src="images/square.png"&gt;
  &lt;img src="images/square.png"&gt;
  &lt;img src="images/square.png"&gt;
  &lt;img src="images/square.png"&gt;
  &lt;img src="images/square.png"&gt;
  &lt;img src="images/square.png"&gt;
  &lt;img src="images/square.png"&gt;
  &lt;img src="images/square.png"&gt;
  &lt;img src="images/square.png"&gt;
  &lt;img src="images/square.png"&gt;
  &lt;img src="images/square.png"&gt;
  &lt;img src="images/square.png"&gt;
  &lt;img src="images/square.png"&gt;
  &lt;img src="images/square.png"&gt;
  &lt;img src="images/square.png"&gt;
  &lt;img src="images/square.png"&gt;
  &lt;img src="images/square.png"&gt;
  &lt;img src="images/square.png"&gt;
  &lt;img src="images/square.png"&gt;
  &lt;img src="images/square.png"&gt;
  &lt;img src="images/square.png"&gt;
  &lt;img src="images/square.png"&gt;
  &lt;img src="images/square.png"&gt;
  &lt;img src="images/square.png"&gt;   
  </code></pre>
  
  <p>Does anybody have a solution?</p>