Tengo un problema, mi código javascript no se ejecuta cuando llama a la biblioteca fullCalendar. La versión de la biblioteca fullCalendar es 5.10.1 y mi versión de jquery es 3.6.0. Mi calendario no se muestra tal cual.
Por favor ayudenme o alguien me puede orientar en que estoy haciendo mal?. Gracias por tu ayuda.
ERROR: jquery-3.6.0.min.js:2 TypeError no detectado: $(...).fullCalendar no es una función
Aquí está mi script jquery/javascript
$(document).ready(function() { $("#calendar").fullCalendar({ header: { left: "prev,next today", center: "title", right: "month,agendaWeek,agendaDay" }, defaultView: "month", navLinks: true, // can click day/week names to navigate views selectable: true, selectHelper: false, editable: true, eventLimit: true, // allow "more" link when too many events select: function(start, end) { var title = prompt("Event Content:"); var eventData; if (title) { eventData = { title: title, start: start, end: end }; $("#calendar").fullCalendar("renderEvent", eventData, true); // stick? = true } $("#calendar").fullCalendar("unselect"); }, eventRender: function(event, element) { element .find(".fc-content") .prepend("<span class='closeon material-icons'></span>"); element.find(".closeon").on("click", function() { $("#calendar").fullCalendar("removeEvents", event._id); }); }, eventClick: function(calEvent) { var title = prompt("Edit Event Content:", calEvent.title); calEvent.title = title; $("#calendar").fullCalendar("updateEvent", calEvent); } }); });FullCalendar 5.10.1 no es un complemento de jQuery, por lo que no se puede inicializar como $("#calendar").fullCalendar(...) . En su lugar, debe inicializarlo así
document.addEventListener('DOMContentLoaded', function(){ let calendar = new FullCalendar.Calendar(document.getElementById('calendar'), { // header: { // left: "prev,next today", // center: "title", // right: "month,agendaWeek,agendaDay" // }, // defaultView: "month", navLinks: true, // can click day/week names to navigate views selectable: true, // selectHelper: false, editable: true, // eventLimit: true, // allow "more" link when too many events select: function(info ) { let title = prompt("Event Content:"); if (title) { calendar.addEvent({ title: title, start: info.startStr, end: info.endStr }) } calendar.unselect(); }, eventDidMount: function(info) { // code for when event is rendered }, eventClick: function(info) { var title = prompt("Edit Event Content:", info.event.title); // code to update event. } }); calendar.render(); }); <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fullcalendar@5.10.1/main.min.css"> <script src="https://cdn.jsdelivr.net/npm/fullcalendar@5.10.1/main.min.js"></script> <div id='calendar'></div>