Acabo de empezar a intentar implementar FullCalendar; sin embargo, mi pantalla está en blanco sin mensajes de error en el registro o registros de la consola. ¿Qué no he incluido por favor?
HTML:
$(document).ready(function() { document.addEventListener('DOMContentLoaded', function() { var calendarEl = document.getElementById('calendar'); var calendar = new FullCalendar.Calendar(calendarEl, { initialView: 'resourceTimelineWeek' }); calendar.render(); }); }); <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.1/css/bootstrap.min.css"> <link href='https://cdn.jsdelivr.net/npm/fullcalendar@5.10.1/main.min.css' rel='stylesheet' /> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.1/js/bootstrap.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/fullcalendar@5.10.1/main.min.js"></script> <div id='calendar'></div>Agrega un detector de eventos a DOMContentLoaded en $(document).ready() de jQuery. En ese momento DOMContentLoaded ya sucedió, por lo que el oyente que adjunta a DOMContentLoaded nunca se ejecuta.
Usa cualquiera de los dos, no ambos.
El segundo error es que está cargando el script fullCalendar incorrecto. Para usar "resourceTimelineWeek", debe incluir <script src="https://cdn.jsdelivr.net/npm/fullcalendar-scheduler@5.10.1/main.min.js"></script> (y también el correspondiente CSS).
document.addEventListener('DOMContentLoaded', function() { const calendar = new FullCalendar.Calendar(document.getElementById('calendar'), { initialView: 'resourceTimelineWeek' }); calendar.render(); }); <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.1/css/bootstrap.min.css"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fullcalendar-scheduler@5.10.1/main.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.1/js/bootstrap.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/fullcalendar-scheduler@5.10.1/main.min.js"></script> <div id='calendar'></div>