CODEWITHSUNDEEP
javascriptjqueryfullcalendar
larin555
larin555

Reputation: 1699

Fullcalendar date range not showing events pass this year

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!

Upvotes: 1

Views: 531

Answers (1)

larin555
larin555

Reputation: 1699

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

Upvotes: 1

Related Questions