You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

45 lines
1.3KB

  1. <?= $this->extend('templates/base') ?>
  2. <!-- title -->
  3. <?= $this->section('title') ?>Tus Horas<?= $this->endSection() ?>
  4. <!-- head -->
  5. <?= $this->section('head') ?>
  6. <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fullcalendar@5.11.0/main.min.css">
  7. <script defer src="https://cdn.jsdelivr.net/npm/fullcalendar@5.11.0/main.min.js"></script>
  8. <script src='fullcalendar/core/locales/es.js'></script>
  9. <?= $this->endSection() ?>
  10. <!-- content -->
  11. <?= $this->section('content') ?>
  12. <div class="text-center mt-5 mx-auto" style="max-width: 80%">
  13. <div id='calendar'></div>
  14. </div>
  15. <script>
  16. const data = <?php echo json_encode($horas, JSON_HEX_TAG); ?>;
  17. const events = data.map(register => ({
  18. title: `${parseInt(register.total_horas_truncadas) / 3600} hrs`,
  19. start: `${register.ano}-${ ('0' + register.mes).slice(-2)}-${('0' + register.dia).slice(-2)}`,
  20. display: 'list-item',
  21. }));
  22. document.addEventListener('DOMContentLoaded', function() {
  23. var calendarEl = document.getElementById('calendar');
  24. var calendar = new FullCalendar.Calendar(calendarEl, {
  25. // initialView: 'dayGridMonth',
  26. initialView: 'listMonth',
  27. initialDate: '2018-09-01',
  28. events: events,
  29. locale: 'es',
  30. });
  31. calendar.render();
  32. });
  33. </script>
  34. <?= $this->endSection() ?>