javascript – 更改日期范围以在FullCalendar中显示事件

我需要能够使用“列表”视图设置FullCalendar的“日期范围”.按日期范围,我的意思是能够使用2个文本字段,2个不同的日期输入,例如：

文本字段1：2018-05-05

至

文本字段2：2018-05-06

并过滤日历的内容,使用列表视图显示结果,并显示与该日期范围匹配的事件.

这是我的FullCalendar部分的代码：

 $('#calendar').fullCalendar({
      header: {
        left: 'prev,next today',center: 'title',right: 'listMonth,month,agendaWeek,agendaDay'
      },defaultView: 'listMonth',locale: 'fr',contentHeight: 600,navLinks: true,// can click day/week names to navigate views
      selectable: false,eventRender: function(event,element,view) { 
        element.find('.fc-widget-header').append("


这是我的文本字段代码：


我想我必须添加这样的东西：

$('#start_date').on('change',function () {
                $('#calendar').fullCalendar('rerenderEvents');
            });
$('#end_date').on('change',function () {
                $('#calendar').fullCalendar('rerenderEvents');
            });

但我不确定.此外,请记住,还有其他过滤器.因此代码中的“eventRender”部分带有一堆东西.所以我需要确保“dateRange”过滤器不会破坏其他过滤器.
我在FullCalendar的网站上读到了“visibleRange”,但我不明白如何根据在2个“日期范围”文本字段中输入的内容使其工作.我认为也禁用我设置的其他视图(仅在List视图中显示结果),这是一个好主意.
知道如何让它工作吗？我有点迷失在这里.
非常感谢
编辑：
我试过这段代码：

$('#start_date').on('change',function () {
      $('#calendar').fullCalendar('changeView','list',{
        start: 2018-05-10,end: 2018-05-30
      });            
});

这是有效的.基本上,它的作用是我在ID为“start_date”的文本字段中输入一个新日期(使用了一个datepicker脚本,这就是为什么我选择了“on change”),它将视图更改为列表视图,这很棒,只显示我输入的日期之间的事件.所以为了让它变得动态,我这样做了：

$('#start_date').on('change',function () {
  var start_date = $('#start_date').val();
  var end_date = $('#end_date').val();
      $('#calendar').fullCalendar('changeView',{
        start: start_date,end: end_date
      });            
});

我有2个字段,“start_date”和“end_date”.
我认为在FullCalendar的changeView代码中设置“start”和“end”选项会在每次选择新日期时自动更新,但它不起作用.事实上,它部分起作用.如果我首先输入“end_date”,然后输入“start_date”,它将过滤并完美地工作,显示正确的日期范围.但在那之后,我无法通过更改字段中的日期来更改另一个dateRange.
它的行为可能是因为我的函数是“on change”,基于“#start_date”元素.所以我必须首先选择end_date,以确保它过滤并使用“end”选项中的某些内容更改视图.
知道我做错了什么吗？
谢谢
编辑2：
我尝试将功能从“更改”事件更改为“单击”,然后添加“搜索”按钮.这里有2个问题.
1  – 它只工作一次.如果我进行搜索,然后更改日期,再次单击“#search-range”按钮,它将不会执行任何操作.
2  – 当它工作时(页面加载后第一次),如果我从5月1日到5月5日选择,它将显示从5月1日到5月4日的范围,原因有些.这是我的代码：

$('#search-range').on('click',function () {
  var start_date = $('#start_date').val();
  var end_date = $('#end_date').val();
  $('#calendar').fullCalendar('changeView',end: end_date
      });            
});

有什么想法发生了什么？
再次感谢


最佳答案
你可能正在寻找validRange option.

$('#start_date').on('change',function(){
  $('#calendar').fullCalendar('option','validRange',{
    // Don't worry if user didn't provide *any* inputs.
    start: this.value,end: $('#end_date').val()
  });
});

$('#end_date').on('change',{
    // Don't worry if user didn't provide *any* inputs.
    start: $('#start_date').val(),end: this.value
  });
});

演示：https://jsfiddle.net/8wd7sxyv/
UPDATE
>结束日期现在包括在内.因此,如果结束日期是2018-05-31,则包括当天的事件 – 默认行为仅包括2018-05-30.
>如果开始日期和结束日期在同一个月,则视图为listMonth;否则,它是listYear.

function filterByDateRange(start_date,end_date,format) {
  var s = $.fullCalendar.moment(start_date),e = $.fullCalendar.moment(end_date),v = $('#calendar').fullCalendar('getView'),a,b;

  // Start date is invalid; set it to the start of the month.
  if (! s.isValid()) {
    b = e.isValid();
    s = b ? e.clone() : $.fullCalendar.moment();
    s.date(1);
    $('#start_date').val(s.format(format));
    a = true;
  }
  // End date is invalid; set it to the end of the month.
  if (! e.isValid()) {
    b = s.isValid();
    e = b ? s.clone() : $.fullCalendar.moment();
    e.date(e.daysInMonth());
    $('#end_date').val(e.format(format));
    a = true;
  }

  // Start date is after end date; set it to a day before the end date.
  if (s.isAfter(e)) {
    s = e.clone().add('-1','day');
    $('#start_date').val(s.format(format));
  // End date is before start date; set it to a day after the start date.
  } else if (e.isBefore(s)) {
    e = s.clone().add('1','day');
    $('#end_date').val(e.format(format));
  }

  // Add 1 day so that `end_date` is inclusive.
  e = e.isValid() ? e.add('1','day') : e;

  $('#calendar').fullCalendar('option',{
    start: s.isValid() ? s : null,end: e.isValid() ? e : null
  });

  a = a || s.isSame(e,'month');
  // If months are different,switch to the year list.
  if ('listYear' !== v.name && ! a) {
    $('#calendar').fullCalendar('changeView','listYear');
  // Otherwise,switch back to month list,if needed.
  } else if ('listMonth' !== v.name) {
    $('#calendar').fullCalendar('changeView','listMonth');
  }
}

$('#start_date').on('change',function(){
  filterByDateRange(this.value,$('#end_date').val(),'YYYY-MM-DD');
});

$('#end_date').on('change',function(){
  filterByDateRange($('#start_date').val(),this.value,'YYYY-MM-DD');
});

演示：https://jsfiddle.net/8wd7sxyv/6/

javascript – 更改日期范围以在FullCalendar中显示事件

猜你在找的jQuery相关文章