fullcalendar - 关闭和打开多个来源 [英] fullcalendar - multiple sources to turn off and on

问题描述

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

有没有方式来说这个动作，只从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，//星期一= 1 
 defaultDate：new Date（），//现在
可编辑：true，
 eventSources：[fcSources.all]，
 events：fcSources .all，
 nextDayThreshold：'00：00：00'，
 ... etc等
  

在我的日历上方我有这个：

  input type =checkboxname =event_filter []value =type1/>类型1 
输入类型=复选框名称=event_filter []值=type2/>类型2 
   
 
 $ b 
最后，两个Jquery函数。 c $ c> 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]; 
} 
  

以及最后加载它们：
$ （'click'，function（）{
var doFilters = getFilters（'event_filter'）;

  $（。event_filter b $（'＃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'）; 
}）; 
  

解决方案

由于所有来源都是相同的地方，有关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 = []; 
 // url中是否需要[和]？如果不是，请将它们移除
 / /这可能（应该！）也被设置为所有输入[name ='event_filter []'] val的代替硬编码... 
 var filterVal ='[1,2]'; 
 $（'input [name =event_filter []]：checked'）。each（function（）{
 vals.push（$（this）.val（））; 
}）; 
 if（vals.length）{
 filterVal ='['+ vals.join（'，'）+']'//是否需要在url中使用[和]？如果不是， 
} 
返回{
 typefilter：filterVal 
}; 
}，
 beforeSend：function（jqXHR，settings）{
 alert（unescape（settings.url））; 
} 
} 
}）; 
 
 //当他们改变复选框时，刷新日历
 $（'input [name =event_filter []]'）。on（'change'，function（）{
 $（'＃calendar'）。fullCalendar（'refetchEvents'）; 
}）; 
  

I've a calendar that I want to list various types of event on and enable a checkbox filter to show/hide those kind of events.

Is there a way to say on this action, ONLY load from 1 data-source AND remember that URL on month next/prev links?

I've started using eventSources, but it loads them all, rather than the one(s) I want.. Here's what I have.

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

These URLS all provide a json string of events, based on the types prrovided.

Here's my calendar:

    $('#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

Above my calendar I have this:

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

And finally , two Jquery fucntions.. one to get all the filters:

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

and the last to load them:

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

解决方案

Since the sources are all the same place and just different data on the URL, this approach could meet your needs. In the demo it just alerts the URL that is being tried but doesn't actually supply any data...

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

这篇关于fullcalendar - 关闭和打开多个来源的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！