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

so，随之而来的呼叫fullcalendar带有属性：

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

我想念什么？我想在没有重新加载页面的情况下执行此操作，只需再次调用函数，或者作为单击按钮上的功能，Refetchevents或类似的内容。可能吗？

Answer 1

您可以重新创建日历并添加您已经拥有的事件，再次使用以下方法。

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 2

var newhiddendays = [0, 6];         // show Mon-Fr (hide Sat/Sun)
$('#calendar').fullCalendar('option', 'hiddenDays', newhiddendays);

Answer 3

您必须将其与option方法一起使用，以便为您的日历设置新选项

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

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

Answer 4

我终于找到了一种方法，而无需重新加载页面。在@Todes的帮助下，使用"选项"并在其下方添加三行。
非常重要：Hiddendays的数组必须是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(); // 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,
        ...
     });
}