title: How can I add a button in a fullcalendar correctly?
body: <p>I'm working with full calendar and I have this function:</p>
  
  <pre><code>calendar: function(datos,rut){
  
      var self = this;
      console.info(datos);
      $('#calendar').fullCalendar({
  
          height: 500,
          events: datos,
          editable: true,
  
              header: {
                  left: '',
                  center: 'prev title next',
                  right: '',
              },
  
          eventClick:  function(event) {
              $('#modalTitle').html(event.title);
              $('#modalBody').html(event.description);
              $('#eventUrl').attr('href',event.url);
              $('#fullCalModal').modal();
          },
  
          eventRender: function (event, element) {
  
              element.find('.fc-title').append(" (&lt;strong&gt;"+ event.estado +"&lt;/strong&gt;)");
  
              var estado = event.estado;
              var date = event.title;
              var formatoFecha = date.substring(0,10);
              $('.fc-day-number[data-date='+formatoFecha+']').html("&lt;div class=text-center&gt;&lt;button type='button' style='margin-right:5px; padding:0; border: none; background: none;' id ='editar_control_"+formatoFecha+"_id' class='btn btn-default addButton' title='Ver/Editar'&gt;&lt;i class='fa fa-eye'&gt;&lt;/i&gt;&lt;/button&gt;&lt;/div&gt;");
              self.actionBtnCalendar(formatoFecha,rut,datos);
  
  
          }
  
      })
  
      $('#calendar').fullCalendar('removeEvents');
      $('#calendar').fullCalendar('addEventSource', datos);         
      $('#calendar').fullCalendar('rerenderEvents');        
  },
  </code></pre>
  
  <p>and looks like:</p>
  
  <p><a href="https://i.stack.imgur.com/t4UxY.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/t4UxY.jpg" alt="enter image description here"></a></p>
  
  <p>The eye icon is a button, and it's fine, but the problem that is I'm using this:</p>
  
  <pre><code>$('.fc-day-number[data-date='+formatoFecha+']').html("&lt;div class=text-center&gt;&lt;button type='button' style='margin-right:5px; padding:0; border: none; background: none;' id ='editar_control_"+formatoFecha+"_id' class='btn btn-default addButton' title='Ver/Editar'&gt;&lt;i class='fa fa-eye'&gt;&lt;/i&gt;&lt;/button&gt;&lt;/div&gt;";
  </code></pre>
  
  <p>with html, so the days number disappear and if I use append , looks like this:</p>
  
  <p><a href="https://i.stack.imgur.com/55ZeY.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/55ZeY.jpg" alt="enter image description here"></a></p>
  
  <p>the numbers of eyes its the same that the numbers of event by day.</p>
  
  <p>So I don't know how put correctly the button in each day that have a event, but outside, I need the same that the first picture but showing the numbers days.</p>
  
  <p>I appreciate any advice or help , sorry my english.</p>
  
  <p><strong>EDIT</strong></p>
  
  <p>If I use dayRender:</p>
  
  <pre><code>eventRender: function (event, element) {
  
              element.find('.fc-title').append(" (&lt;strong&gt;"+ event.estado +"&lt;/strong&gt;)");
  
              var estado = event.estado;
              var date = event.title;
              var formatoFecha = date.substring(0,10);
              //$('.fc-day-number[data-date='+formatoFecha+']').html("&lt;div class=text-center&gt;&lt;button type='button' style='margin-right:5px; padding:0; border: none; background: none;' id ='editar_control_"+formatoFecha+"_id' class='btn btn-default addButton' title='Ver/Editar'&gt;&lt;i class='fa fa-eye'&gt;&lt;/i&gt;&lt;/button&gt;&lt;/div&gt;");
              self.actionBtnCalendar(formatoFecha,rut,datos); 
          },
  
          dayRender: function (date, element) {
              $('.fc-day-number[data-date='+date+']').append("&lt;div class=text-center&gt;&lt;button type='button' style='margin-right:5px; padding:0; border: none; background: none;' id ='editar_control_"+date+"_id' class='btn btn-default addButton' title='Ver/Editar'&gt;&lt;i class='fa fa-eye'&gt;&lt;/i&gt;&lt;/button&gt;&lt;/div&gt;");
          }
  </code></pre>
  
  <p>nothing happens</p>