FullCalendar - 使用jQuery更改隱藏天數

Question

我在過濾日曆，更改開始和結束日期，我的活動狀態以及其他內容。我這樣做：

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

它工作正常。但是當我想動態更改變量hiddenDays時，我無法使其工作！ 我添加到我的代碼如下： （默認情況下，這個變量是全局性的）

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 

所以，與和呼叫fullcalendar與屬性：

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

我錯過了什麼？我想在不重新加載頁面的情況下執行此操作，只需再次調用該函數，或者作爲單擊按鈕上的函數，refetchEvents或類似的功能。有可能嗎？

Answer 1

我終於找到了一個辦法做到這一點，而不重新加載頁面。在@todes的幫助下使用'options'並添加下面的三行。
非常重要：hiddenDays數組必須是整數的數組。

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(); // compare 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, 
     ... 
    }); 
} 

Answer 2

您可以重新創建日曆並使用以下方法再次添加已擁有的事件。

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

現在您只需調用該方法。我希望這有幫助。

Answer 3

你必須要設置新的選擇與option方法來使用它爲您的日曆

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

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