I have just started trying to implement FullCalendar; however, my display is blank with no error messages on the console log or logs. What have I not included please?
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>You add an event listener to DOMContentLoaded on jQuery's $(document).ready(). At that time DOMContentLoaded has already happened, so the listener you attach to DOMContentLoaded never executes.
Use either of the two, not both.
Second mistake is you are loading the wrong fullCalendar script. To use "resourceTimelineWeek" you need to include <script src="https://cdn.jsdelivr.net/npm/fullcalendar-scheduler@5.10.1/main.min.js"></script> (and also the corresponding 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>