Fullcalendar date range not showing events pass this year

Question

I created a topic back in May 2018 about needing help to add 2 text fields that would act as a "date range" tool for Fullcalendar. Allowing me to enter the "From" and "To" date, filtering the events to show only the ones between these 2 dates.

Here's the link to that topic: Change date range to show events in FullCalendar

It's working fine, except that I found that if I try to insert a date from 2018 in the "From" field, and one from 2019 in the "To" field, it won't work and will only show data from 2018. As if the date range function was coded in a way that wouldn't allow the user to go pass the current year.

For those who haven't read the old topic about it, here's the "Date range filter" function I'm using:

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

I think the issue is that it's using the "listYear" view in the code, and that it might only display events from the actual year, but cannot show a list with multiple years in it. I need it to show the "list" view, with events that matches the date range selected.

Any help would be greatly appreciated. Thanks a lot!

I'd expect you can probably do something about this by making use of validRange, possibly in conjunction with a custom view — ADyson
Thanks. Any example of how this could look in my code? I tried to implement it but I'm not sure where it should go. Thanks again! — larin555
actually looking more closely you're already setting a range using the "validRange" option...so I think you just need to be changing the view to a custom view which can use a custom range, rather than a fixed view like listYear. Possibly just specifying "list" instead of "listYear" in the changeView command might be sufficient. Sorry I don't have time to test it right now — ADyson
Thanks a lot @ADyson, I have created a custom view named "perTotal", type: 'list', and changed the line where it says "If months are different, switch to the year list", to ...('chageView', 'perTotal'); instead of "listYear". Seems to be working fine. Thanks again! — larin555

larin555 larin555 · Accepted Answer · 2018-11-05T13:26:32

Thanks to user ADyson, I created a view which isn't "current year" based, and applied to to the "If months are different, switch to the year list" section of the code. So now, that part looks like this :

 // If months are different, switch to the year list.
  if ('listYear' !== v.name && ! a) {
    $('#calendar').fullCalendar('changeView', 'perTotal'); //That's where I made the change...it's now "perTotal" instead of "listYear".
  // Otherwise, switch back to month list, if needed.
  } else if ('listMonth' !== v.name) {
    $('#calendar').fullCalendar('changeView', 'listMonth');
  }
}

"perTotal" is a custom view that is set to "list" for the type of view, which is not limited by the current year.

Thanks

Fullcalendar date range not showing events pass this year

1 Answers