Question

我有一个日历，我想列出各种类型的事件，并启用复选框过滤器来显示/隐藏这类事件。

有没有办法说明这个动作，只需从1个数据源加载并记住下个月/ prev链接的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函数..一个得到所有过滤器：

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

这适合我。

fullcalendar - 关闭和打开多个源

2 个答案: