fullcalendar - несколько источников для включения и выключения

Question

У меня есть календарь, в который я хочу перечислить различные типы событий, и включить фильтр флажка, чтобы отображать/скрывать эти события.

Есть ли способ сказать об этом действии, ТОЛЬКО загружать из 1 источника данных И помнить, что URL-адрес в следующем месяце/предыдущие ссылки?

Я начал использовать eventSources, но он загружает их все, а не те, которые я хочу. Вот что у меня есть.

var fcSources = { 
    all: { 
       url: tournament_url + '/getCalendar/?typefilter=[1,2]' 
      }, 
    type1: { 
       url: tournament_url + '/getCalendar/?typefilter=[1]' 
      }, 
    type2: { 
       url: tournament_url + '/getCalendar/?typefilter=[2]' 
      } 
}; 

Эти URL-адреса предоставляют json-строку событий на основе типов, созданных.

Вот мой календарь:

$('#calendar').fullCalendar({ 
    header: { 
     left: 'prev,next today', 
     center: 'title', 
     right: 'month,basicWeek' 
    }, 
    firstDay: 1, // Monday = 1 
    defaultDate: new Date(), // Now 
    editable: true, 
    eventSources: [ fcSources.all ], 
    events: fcSources.all, 
    nextDayThreshold: '00:00:00', 
... etc etc 

Над моим календарем у меня есть это:

input type="checkbox" name="event_filter[]" value="type1" /> Type 1 
input type="checkbox" name="event_filter[]" value="type2" /> Type 2 

И, наконец, два Jquery fucntions .. один, чтобы получить все фильтры:

function getFilters(getName) { 
    var filters = []; 
    var checked = []; 
    $("input[name='"+getName+"[]']").each(function() { 
     filters.push($(this).val()); 
    }); 
    $("input[name='"+getName+"[]']:checked").each(function() { 
     checked.push($(this).val()); 
    }); 
    return [filters, checked]; 
} 

и последние, чтобы загрузить их:

$(".event_filter").on('click', function() { 
    var doFilters = getFilters('event_filter'); 
    $('#calendar').fullCalendar('removeEvents'); 

    if (doFilters[0] === doFilters[1]) { 
     $('#calendar').fullCalendar('addEventSource', fcSources.all); 
    } else { 
     $.each(doFilters[1], function(myFilter, myVal) { 
      console.log(myVal); 
      $('#calendar').fullCalendar('addEventSource', fcSources.myVal); 

     }); 
    } 
//  $('#calendar').fullCalendar('refetchEvents'); 
}); 

Answer 1

Поскольку источники все одинаковые и только разные данные по URL-адресу, этот подход может удовлетворить ваши потребности. В демо-версии он просто предупреждает URL, который судят, но на самом деле не поставлять любые данные ...

https://jsfiddle.net/gzbrc2h6/1/

var tournament_url = 'https://www.example.com/' 
$('#calendar').fullCalendar({ 
    events: { 
    url: tournament_url + '/getCalendar/', 
    data: function() { 
     var vals = []; 
     // Are the [ and ] needed in the url? If not, remove them here 
     // This could (should!) also be set to all input[name='event_filter[]'] val's instead of hard-coded... 
     var filterVal = '[1,2]'; 
     $('input[name="event_filter[]"]:checked').each(function() { 
     vals.push($(this).val()); 
     }); 
     if (vals.length) { 
     filterVal = '[' + vals.join(',') + ']' // Are the [ and ] needed in the url? If not, remove here too 
     } 
     return { 
     typefilter: filterVal 
     }; 
    }, 
    beforeSend: function(jqXHR, settings) { 
     alert(unescape(settings.url)); 
    } 
    } 
}); 

// when they change the checkboxes, refresh calendar 
$('input[name="event_filter[]"]').on('change', function() { 
    $('#calendar').fullCalendar('refetchEvents'); 
}); 

Answer 2

Попробуйте это!

$('#calendar').fullCalendar({ 
    events: function(start, end, timezone, callback) { 
     var checked = []; 
     $("input[name='event_filter[]']:checked").each(function() { 
      checked.push($(this).val()); 
     }); 
     var tournament_url = 'https://www.example.com'; 
     $.ajax({ 
       url: tournament_url + '/getCalendar/', 
       data: {typefilter: '['+checked.join(',')+']'}, 
       success: function(events) { 
        callback(events); 
       } 
      }); 
    } 
}); 

$('input[name="event_filter[]"]').on('change', function() { 
    $('#calendar').fullCalendar('refetchEvents'); 
}); 

Это работает для меня.