0
143
ViewsFullcalendar cancela todas las solicitudes xhr cuando cambio de semana (timeGridWeek)
Actualmente estoy creando un calendario que se vincula a un archivo php que devuelve un json con eventSources . Todo funciona como quiero, el problema es cuando quiero ver en 5 semanas lo que hay en el calendario, hago clic en 5x para la próxima semana pero fullcalendar carga las 5 semanas, incluso si solo necesito la última. Y el calendario espera a que se cargue la última solicitud antes de pasar a la siguiente.
¿Hay alguna manera de decirle a fullcalendar que detenga las solicitudes cuando hago clic en el botón "semana siguiente/anterior"? (la api es muy lenta y tarda ~1s-2s en cargarse y no puedo hacer nada para cambiar eso)
Gracias por adelantado
1 answers
Answer question0
La respuesta corta es... no, no puedes.
Pero hay algunas alternativas, como 1) agregar botones adicionales para avanzar o retroceder 4-5 semanas o 2) agregar un botón para seleccionar una fecha/semana (por ejemplo, con cualquier widget selector de fecha)
Aquí tienes el código (extracto) para ambas opciones, asumiendo que puedes usar el selector de fechas de jquery (o cualquier otro) y usas v5 de FullCallendar:
var calendar = new FullCalendar.Calendar(calendarEl, { [...] headerToolbar: { left: 'prev4w,prev,today,next,next4w opendatepicker', center: 'title', right: '' }, customButtons: { prev4w: { //text: '-4w', hint: '4 weeks back', click: function(e) { e.preventDefault(); calendar.gotoDate(moment(calendar.view.currentStart).subtract("4", "weeks").format("YYYY-MM-DD")); }, }, next4w: { //text: '+4w', hint: '4 weeks ahead', click: function(e) { e.preventDefault(); calendar.gotoDate(moment(calendar.view.currentStart).add("4", "weeks").format("YYYY-MM-DD")); }, }, opendatepicker: { hint: 'Go to date...', click: function(e) { e.preventDefault(); if($("#datepicker").datepicker("widget").is(":visible")){ $("#datepicker").datepicker("hide"); }else{ $("#datepicker").datepicker("show"); } }, } }, datesSet: function(dateInfo) { var inicio = moment(dateInfo.startStr); [...] $("#datepicker").val(inicio.format('DD/MM/YYYY')); } }); $().ready(function() { var inicio = moment(calendar.view.currentStart).format("DD/MM/YYYY"); $(".fc-toolbar-chunk").first().append( '<input type="hidden" id="datepicker" size="8"></input>' ); $("#datepicker").datepicker({ [...] dateFormat: "dd/mm/yy", onSelect: function(formated, dates) { var fecha = moment(formated,"DD/MM/YYYY",true).format('YYYY-MM-DD'); calendar.gotoDate(fecha); }, [...] }); $("#datepicker").datepicker( "setDate" , inicio ); })