La puesta en marcha
Estoy usando Fullcalendar v4, y tengo algunos problemas con extraParams y los envío al servidor a través de AJAX.
Lo que estoy tratando de hacer (y fallando) es usar esto:
var calendarEl = document.getElementById('calendar'); var calendar = new FullCalendar.Calendar(calendarEl, { plugins: ['interaction','dayGrid'], defaultView: 'dayGridMonth', selectable: true, selectMirror:true, ....... eventSources: [{ url: 'ajax/fc.php?dropdown='+$("#dropdown").val(), method: 'POST', cache: false, extraParams: { month: $("#monthPicker").val(), dropdown: $("#dropdown").val(), person: $("#person").val(), phone: document.getElementById("phone").value, testtext: 'hardcoded text' }, }], ...... });Los valores para el mes, el menú desplegable, la persona y el teléfono se toman de un formulario.
El problema
Volcar las variables GET y POST (lado del servidor), solo para verificar lo que he recibido devuelve 0/cadenas vacías para todo lo que no sea el parámetro del month : se muestra correctamente.
El parámetro GET está ahí solo para fines de prueba, al igual que el bit document.getElementById : quería ver si aparecía algo si los usaba (no apareció nada).
El problema persiste incluso si cambio el código para usar events en lugar de eventSources .
Después de experimentar más, parece que el calendario se ve afectado por los valores de los elementos presentes en su inicialización : si codifico los valores para el menú desplegable, la persona y otras entradas/seleccionar elementos, ellos y solo ellos se envían (cualquier cambio en los valores es ignorado). Lo mismo sucede si solo establezco el valor inicial (es decir, <input id="person" name="person" value="Joe"> ).
La pregunta
¿Cómo puedo forzar el calendar (aparte de destruirlo y recrearlo) para que realmente note cambios en los valores de entrada que quiero usar como extraParams ?
Si no entiendo bien el uso de extraParams , ¿cuáles son mis alternativas? Necesito poder enviar varios datos al servidor para obtener un conjunto específico de eventos.
Lo descubrí mientras tanto, gracias a esta respuesta SO . Dado que los parámetros son dinámicos, deben enviarse como se indica en la documentación (parte del parámetro Dynamic extraParams ):
var calendar = new Calendar(calendarEl, { events: { url: '/myfeed.php', extraParams: function() { // a function that returns an object return { dynamic_value: Math.random() }; } } });Que, en mi caso, se convertiría en:
var calendarEl = document.getElementById('calendar'); var calendar = new FullCalendar.Calendar(calendarEl, { plugins: ['interaction','dayGrid'], defaultView: 'dayGridMonth', selectable: true, selectMirror:true, ....... event: { url: 'ajax/fc.php', method: 'POST', cache: false, extraParams: function() { return { month: $("#monthPicker").val(), dropdown: $("#dropdown").val(), person: $("#person").val(), phone: document.getElementById("phone").value, testtext: 'hardcoded text' } }, }, ...... });