Estoy filtrando mi calendario, cambio la fecha de inicio y finalización, el estado de mis eventos y otras cosas. hago eso con:
$("body").on("click", "#btnFiltrar", function() { fechaIni = $("#fechaIni").val(); fechaFin = $("#fechaFin").val(); cp = $("#txtCP").val(); var events = { url: "./php/xxxxxxxx.php", type: "POST", data: { fechaIni: fechaIni, fechaFin: fechaFin, cp: cp, provincia: provincia, ... } } $("#calendar").fullCalendar("removeEventSource", events); $("#calendar").fullCalendar("addEventSource", events); $("#calendar").fullCalendar("refetchEvents"); });
Funciona bien. Pero cuando quiero cambiar la variable hiddenDays dinámicamente, ¡no puedo hacer que funcione! Agrego a mi código esto: (Por defecto, estas variables son globales)
var dias = ["0","1","2","3","4","5","6"]; var ocultarDias = []; // is empty because it shows all days // inside click button diasSeleccionados = $("#selDias").val(); // returns array eg: ["1","2","3","4","5"] ocultarDias = $(dias).not(diasSeleccionados).get(); // compare 2 arrays and get the difference
Entonces, con eso y la llamada fullcalendar con el atributo:
function llenarCalendario() { $("#calendar").fullCalendar({ lang: 'es', firstDay: 1, hiddenDays: ocultarDias, ... }); }
¿Me falta algo? Quiero hacer esto sin volver a cargar la página, solo llamar nuevamente a la función o, como la función al hacer clic en el botón, refetchEvents o algo así. ¿Es posible?
Puede volver a crear el calendario y agregar los eventos que ya tiene, de nuevo con el siguiente método.
function reloadCalendar(){ //Get all events in a array var events = $("#calendar").fullCalendar( 'getEventSources' ); $("#calendar").fullCalendar( 'destroy' ); // Destroy the calendar $("#calendar").fullCalendar({ //Recreate the calendar with the hidden days hiddenDays: [ 2, 4 ] }); //With JavaScript events.forEach(function(event) { //Restore all events $("#calendar").fullCalendar( 'addEventSource', event); }); //With jQuery var jEvents = $.makeArray(events); $(jEvents).each(function( i ) { $("#calendar").fullCalendar( 'addEventSource', events[i]); }); }
Ahora simplemente puede llamar al método. Espero que haya sido de ayuda.
Debe usarlo con el método de option
para establecer nuevas opciones para su calendario
https://fullcalendar.io/docs/utilities/dynamic_options/
function llenarCalendario() { $("#calendar").fullCalendar('option',{ lang: 'es', firstDay: 1, hiddenDays: ocultarDias, ... }); }
var newhiddendays = [0, 6]; // show Mon-Fr (hide Sat/Sun) $('#calendar').fullCalendar('option', 'hiddenDays', newhiddendays);