2022-08-01 14:28:07 -05:00

45 lines
1.3 KiB
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() ?>