I'm filtering my calendar, I change the start and end date, status of my events, and other stuffs. I do that with:

 $("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");
});

It works fine. But when I want to change the variable hiddenDays dynamically, I can't make it work! I add to my code this: (By default this variables are global)

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(); // pare 2 arrays and get the difference

So, with that and the call fullcalendar with the attribute:

function llenarCalendario() {
     $("#calendar").fullCalendar({
        lang: 'es',
        firstDay: 1,
        hiddenDays: ocultarDias,
        ...
     });
}

I miss something? I want to do this without reload the page, just call again the function or, as the function on click button, refetchEvents or something like that. Is possible?

I'm filtering my calendar, I change the start and end date, status of my events, and other stuffs. I do that with:

 $("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");
});

It works fine. But when I want to change the variable hiddenDays dynamically, I can't make it work! I add to my code this: (By default this variables are global)

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(); // pare 2 arrays and get the difference

So, with that and the call fullcalendar with the attribute:

function llenarCalendario() {
     $("#calendar").fullCalendar({
        lang: 'es',
        firstDay: 1,
        hiddenDays: ocultarDias,
        ...
     });
}

I miss something? I want to do this without reload the page, just call again the function or, as the function on click button, refetchEvents or something like that. Is possible?

• javascript
• jquery
• fullcalendar

• So to understand your question. Do you want to load a calendar with all days and then in a later event (button click, ...) you want to hide some specific days? – Julian Commented Mar 8, 2017 at 9:36
• That's exactly what I want. – bey23 Commented Mar 8, 2017 at 9:37

4 Answers 4

var newhiddendays = [0, 6];         // show Mon-Fr (hide Sat/Sun)

$('#calendar').fullCalendar('option', 'hiddenDays', newhiddendays);

You can recreate the calendar and add the events, which you have already have, again with the following method.

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]);
    });
}

Now you simply can call the method. I hope it was helpful.

You have to use it with optionmethod in order to set new options for your calendar

https://fullcalendar.io/docs/utilities/dynamic_options/

function llenarCalendario() {
     $("#calendar").fullCalendar('option',{
        lang: 'es',
        firstDay: 1,
        hiddenDays: ocultarDias,
        ...
     });
}

I finally found a way to do that without reload the page. With the help of @todes using 'options' and adding the three lines below that.
Very important: the array of hiddenDays must be an array of ints.

var dias = ["0","1","2","3","4","5","6"];
var ocultarDias = []; // is empty because it shows all days


$(document).ready(function () { 

llenarCalendario();

$("body").on("click", "#btnFiltrar", function() {
    fechaIni = $("#fechaIni").val();
    fechaFin = $("#fechaFin").val();
    cp = $("#txtCP").val();

    var diasSeleccionados = $("#selDias").val(); // select multiple, returns array eg: ["1","2","3","4","5"]
    ocultarDias = $(dias).not(diasSeleccionados).get(); // pare 2 arrays and get the difference
    ocultarDias = ocultarDias.map(Number); // array of strings to int for fullcalendar to work

    var events = {
        url: "./php/xxxxxxxxxx.php",
        type: "POST",
        data: {
            fechaIni:     fechaIni,
            fechaFin:     fechaFin,
            cp:           cp
          }
    }

    $("#calendar").fullCalendar('option', {
      hiddenDays: ocultarDias
    });

    $("#calendar").fullCalendar("removeEventSource", events);
    $("#calendar").fullCalendar("addEventSource", events);
    $("#calendar").fullCalendar("refetchEvents");
});

});

function llenarCalendario() {
     $("#calendar").fullCalendar({
        lang: 'es',
        firstDay: 1,
        hiddenDays: ocultarDias,
        ...
     });
}