eval-desempeno-v2/app/Views/Prestador/horas.php

<?= $this->extend('templates/base') ?>

<!-- title -->
<?= $this->section('title') ?>Tus Horas<?= $this->endSection() ?>

<!-- head -->
<?= $this->section('head') ?>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fullcalendar@5.11.0/main.min.css">
<script defer src="https://cdn.jsdelivr.net/npm/fullcalendar@5.11.0/main.min.js"></script>
<script src='fullcalendar/core/locales/es.js'></script>

<?= $this->endSection() ?>

<!-- content -->
<?= $this->section('content') ?>

<div class="text-center mt-5 mx-auto" style="max-width: 80%">
    <div id='calendar'></div>
</div>

<script>
    const data = <?php echo json_encode($horas, JSON_HEX_TAG); ?>;
    const events = data.map(register => ({
        title: `${parseInt(register.total_horas_truncadas) / 3600} hrs`,
        start: `${register.ano}-${ ('0' + register.mes).slice(-2)}-${('0' + register.dia).slice(-2)}`,
        display: 'list-item',

    }));

    document.addEventListener('DOMContentLoaded', function() {
        var calendarEl = document.getElementById('calendar');
        var calendar = new FullCalendar.Calendar(calendarEl, {
            // initialView: 'dayGridMonth',
            initialView: 'listMonth',
            initialDate: '2018-09-01',
            events: events,
            locale: 'es',
        });

        calendar.render();
    });
</script>

<?= $this->endSection() ?>