更改日期范围以在FullCalendar中显示事件 [英] Change date range to show events in FullCalendar

问题描述

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

I need to be able to set a "date range" with FullCalendar, using the "List" view. By date range, I mean being able to enter using 2 text fields, 2 different dates, for example :

文本字段1：2018-05-05

Text field 1 : 2018-05-05

到

文本字段2：2018-05-06

Text field 2 : 2018-05-06

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

And to filter the content of the calendar, using the List view to display the result, and show events that matches that date range.

这是我的FullCalendar部分代码：

Here's my code for the FullCalendar part:

 $('#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'
        },
      ],
    });

这是我的文本字段代码：

And here's my text fields code:

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

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

I think I would have to add something like this:

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

但我不确定。此外，请记住，还有其他过滤器。因此代码中的eventRender部分带有一堆东西。所以我需要确保dateRange过滤器不会破坏其他过滤器。

But I am not sure. Also, please keep in mind that there's other filters too. Hence the "eventRender" part in the code with a bunch of stuff. So I need to make sure that "dateRange" filter won't break the other filters.

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

I read about "visibleRange" on FullCalendar's website, but I do not understand how I can make it work based on what is entered in the 2 "date range" text fields. I think also disabling the other views that I have set (to show the result in the List view only), would be a good idea.

我知道如何制作这行得通？我有点迷失在这里。
非常感谢

Any idea how I can make it work? I'm kind of lost here. Thanks a lot

编辑：

我试过这段代码：

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

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

Which is working. Basically, what it does is that I enter a new date in a text field with the ID of "start_date" (which uses a datepicker script, to that's why I went with "on change"), it changes the view to the list view, which is great, and displays only the events between the date I have entered. So to make it dynamic, I did this :

$('#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个字段，start_date和end_date。
我认为在FullCalendar的changeView代码中设置start和end选项会在每次选择新日期时自动更新，但它不起作用。事实上，它部分起作用。如果我首先输入end_date，然后输入start_date，它将过滤并完美地工作，显示正确的日期范围。但在那之后，我无法通过更改字段中的日期来更改另一个dateRange。
它的行为可能是因为我的函数是在变化中，基于#start_date元素。所以我必须首先选择end_date，以确保它过滤并使用end选项中的某些内容更改视图。

I have 2 fields, "start_date", and "end_date". I thought that setting the "start" and "end" option in the changeView code for FullCalendar would update automatically everytime I select a new date, but it doesn't work. In fact, it works partially. If I enter the "end_date" first, then the "start_date", it will filter and work perfectly, showing the right date range. But after that, I cannot change it for another dateRange by changing the dates in the fields. It acts like this probably because my function is "on change", based on the "#start_date" element. So I have to select the end_date first, to make sure it filters and change the view with something in the "end" option.

知道我做错了什么吗？

Any idea what I am doing wrong?

谢谢

编辑2：

我尝试将功能从更改事件更改为点击，然后添加搜索按钮。这里有2个问题。
1 - 它只工作一次。如果我进行搜索，然后更改日期，再次单击＃search-range按钮，它将不会执行任何操作。

I tried changing the function from a "change" event to "click", and adding a "search" button. There's 2 issues here. 1 - It works only once. If I make a search, then change the date, and click again on the "#search-range" button, it won't do anything.

2 - 当它工作（页面加载后第一次），例如，如果我从5月1日到5月5日选择，由于某些原因，它将显示从5月1日到5月4日的范围。这是我的代码：

2 - When it works (first time after page load), if I select from May 1rst to May 5th for example, it will show the range from May 1rst to May 4th, for some reasons. Here's my code again :

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

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

Any ideas what's going on? Thanks again

推荐答案

您可能正在寻找 validRange 选项。

You're probably looking for the 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 。

The end date is now inclusive. So if end date is 2018-05-31, events on that day are included — the default behavior only includes up to 2018-05-30.

如果开始和结束日期在同一个月，视图是 listMonth ;否则，它是 listYear 。

If the start and end dates are in same month, view is listMonth; otherwise, it is 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中显示事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！