FullCalendar

  <script>

  document.addEventListener('DOMContentLoaded', function() {
    var calendarEl = document.getElementById('calendarioEventos');

    var calendar = new FullCalendar.Calendar(calendarEl, {
      locale: 'pt-br',
      plugins: [ 'interaction', 'dayGrid' ],
      editable: true,
      eventLimit: true,



      <?php if(!empty($viewData['eventos'])): $eventos = $viewData['eventos']; ?>

      events: [
          <?php  foreach ($eventos as $evento): ?>
          {
            id: '<?php echo $evento['id']; ?>',
            title: '<?php echo $evento['title']; ?>',
            start: '<?php echo $evento['start']; ?>',
            end: '<?php echo $evento['end']; ?>',
            color: '<?php echo $evento['color']; ?>',
            url: '<?php echo $evento['url']; ?>',
            description: '<?php echo $evento['descricao']; ?>',
            textColor: 'white'
          },


          <?php endforeach; ?>

        ],
      cache: true,
      eventClick: function(info) {
        info.jsEvent.preventDefault();
        $('#visualizar #descriptionModal').text('<?php echo $evento['descricao']; ?>');


        var img = 'assets/img/home/eventos/' + '<?php echo $evento['url']; ?>';
        $('#urlModal').attr('src', img);


        $('#titleModal').text('<?php echo $evento['title']; ?>');
        $('#startModal').text('<?php echo date('d/m/Y H:i', strtotime($evento['start'])); ?>');
        $('#endModal').text('<?php echo date('d/m/Y H:i', strtotime($evento['end'])); ?>');
        $('#eventoModal').modal('show');
      }
        <?php  endif; ?>
    });

    calendar.render();
  });

</script>


<?php

date_default_timezone_set('America/Campo_Grande'); ?>
<div class="container">
    <div><br/>
    <div class="form-control" style="text-align: center; font-weight: bold;">Clique no evento para visualizar as informações</div>
        <div id="calendarioEventos" class="w-100"></div>
    </div>
</div>
<!-- Modal -->
<div class="modal fade" id="eventoModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="titleModal"></h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Fechar">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <div id="visualizar" >

            <div class="row">
            <div class="col" style="text-align: center;"><span>O evento terá início às:<div id="startModal"></div></span></div>
            <div class="col" style="text-align: center;"><span>O evento encerrará às:<div id="endModal"></div> </span></div>
            </div>
            <hr>
          <div id="descriptionModal"  style="text-align: center;"></div><br>
          <figure style="text-align: center;">
          <img src="" id="urlModal">
        </figure>
        </div>
      </div>
    </div>
  </div>
</div>