Question

我需要能够设置一个＆＃34;日期范围＆＃34;使用FullCalendar，使用＆＃34; List＆＃34;视图。按日期范围，我的意思是能够使用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("<div style='color:#fff'>Conférencier choisi</div>");
        element.find('.fc-title').append("<br/>" + event.lieu); 
        element.find('.fc-list-item-title').append("<br/>" + event.lieu); 
        element.find('.fc-list-item-title').append("<a href='" + event.lienconferencier + "'><div class='conferencier-calendrier-container'><div style='float:left;background-image:url(" + event.photoconferencier + ");width:40px;height:40px;background-size:cover;border-radius:100px;'></div><div style='float:left;padding-left:5px;font-weight:normal;'><strong>Conférencier</strong><br>" + event.conferencier + "</div></a>"); 
          return ['all', event.status].indexOf($('#filter-status').val()) >= 0 &&
             ['all', event.client].indexOf($('#filter-contact').val()) >= 0 && 
             ['all', event.conferencier].indexOf($('#filter-conferencier').val()) >= 0 &&
             ['', event.numero].indexOf($('#numero').val()) >= 0;

      },
      selectHelper: true,
      editable: false,
      eventLimit: true, // allow "more" link when too many events
      events: [
        {
          title: 'Example',
          start: '2018-05-05',
          end: '2018-05-06',
          color: '#ff0000',
          lieu: 'Montreal',
          numero: '300445',
          conferencier: 'John Doe',
          photoconferencier: 'http://www.example.com/img/profile.jpg',
          lienconferencier: 'http://www.example.com/profile/link.html',
          url: 'http://www.google.com'
        },
{
          title: 'Example2',
          start: '2018-05-08',
          end: '2018-05-010',
          color: '#ff0000',
          lieu: 'New York',
          numero: '300446',
          conferencier: 'Steve Jobs',
          photoconferencier: 'http://www.example.com/img/profile2.jpg',
          lienconferencier: 'http://www.example.com/profile/link2.html',
          url: 'http://www.apple.com'
        },
      ],
    });

这是我的文字字段代码：

<input type="text" placeholder="Date : From" id="start_date">
<input type="text" placeholder="Date : To" id="end_date">

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

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

但我不确定。另外，请记住还有其他过滤器。因此＆＃34; eventRender＆＃34;在代码中加入一堆东西。所以我需要确保＆＃34; dateRange＆＃34;过滤器不会破坏其他过滤器。

我读到了＆＃34; visibleRange＆＃34;在FullCalendar的网站上，但我不明白如何根据在2＆＃34;日期范围内输入的内容使其工作。文本字段。我认为也禁用我设置的其他视图（仅在List视图中显示结果），这是个好主意。

知道如何让它发挥作用吗？我有点迷失在这里。非常感谢

编辑：

我试过这段代码：

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

哪个有效。基本上，它的作用是我在文本字段中输入一个新的日期，其ID为＆＃34; start_date＆＃34; （它使用了一个日期选择器脚本，这就是为什么我选择＆＃34;更改＆＃34;），它将视图更改为列表视图，这很棒，并且只显示日期之间的事件进入了。所以为了让它充满活力，我做到了：

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

我有2个字段，＆＃34; start_date＆＃34;和＆＃34; end_date＆＃34;。我认为设置＆＃34;开始＆＃34;和＆＃34;结束＆＃34;每次选择新日期时，FullCalendar的changeView代码中的选项都会自动更新，但它不起作用。事实上，它部分起作用。如果我输入＆＃34; end_date＆＃34;首先，然后是＆＃34; start_date＆＃34;，它将过滤并完美地工作，显示正确的日期范围。但在那之后，我无法通过更改字段中的日期来更改另一个dateRange。它的行为可能是因为我的功能是＆＃34;在变化＆＃34;，基于＆＃34; #start_date＆＃34;元件。所以我必须首先选择end_date，以确保它过滤并使用＆＃34; end＆＃34;中的内容更改视图。选项。

知道我做错了吗？

由于

编辑2：

我尝试更改＆＃34;更改＆＃34;事件到＆＃34;点击＆＃34;，然后添加＆＃34;搜索＆＃34;按钮。这里有2个问题。 1 - 它只工作一次。如果我进行搜索，请更改日期，然后再次点击＆＃34;＃search-range＆＃34;按钮，它不会做任何事情。

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', 'list', {
        start: start_date,
        end: end_date
      });            
});

任何想法是怎么回事？再次感谢

Answer 1

您可能正在寻找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', function(){
  $('#calendar').fullCalendar('option', 'validRange', {
    // Don't worry if user didn't provide *any* inputs.
    start: $('#start_date').val(),
    end: this.value
  });
});

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

<强>更新

结束日期现已具有包容性。因此，如果结束日期为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', 'validRange', {
    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/

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

1 个答案: