FullCalendar display events between two time range

Question

I'm using fullCalendar 3.4, I have two custom buttons evening, night as follow :

calendar.fullCalendar({
            locale: 'en',
            now: calendar.fullCalendar('today'),
            editable: false,
            customButtons: {
                evening: {
                    text: 'This evening'
                },
                night: {
                    text: 'Tonight'
                },
                tomorrow: {
                    text: 'Tomorrow',
                    click: function() {
                        calendar.fullCalendar( 'gotoDate', moment(new Date()).add(1,'days'));
                        inputDate.attr("placeholder", calendar.fullCalendar('getDate').format('DD MMMM YYYY'));
                    }
                }
            }
        });

I managed to display tomorrow's events, but can't figure out how to display evening events, by using a time range for example, same as tommorow but where time is between 12:00 and 16:00 , and for the night where time is between 19:00 and 00:00 .

Thank you in advance!

Answer 1

By using agenda options min and max time. Bit ugly but works.

$(function() {
  $('#calendar').fullCalendar({
    defaultView: 'agenda',
    now: $('#calendar').fullCalendar('today'),
    editable: false,
    header: {
      left: 'prev,next fullday,evening,night',
      center: 'title',
      right: 'month,agendaWeek,agendaDay'
    },
    customButtons: {
      fullday: {
        text: 'All Day',
        click: function() {
          resetDayTime();
        }
      },
      evening: {
        text: 'This evening',
        click: function() {
          resetDayTime();
          $('#calendar').fullCalendar('option', 'minTime', '12:00:00');
          $('#calendar').fullCalendar('option', 'maxTime', '16:00:00');
        }
      },
      night: {
        text: 'Tonight',
        click: function() {
          resetDayTime();
          $('#calendar').fullCalendar('option', 'minTime', '19:00:00');
          $('#calendar').fullCalendar('option', 'maxTime', '24:00:00');
        }
      }
    }
  });

  //Go back to today and reset the available time slots.
  //You can remove the gotoDate if you want to show the events for that selected day. Just need to make sure the button text is correct. :)
  var resetDayTime = function() {
    $('#calendar').fullCalendar('gotoDate', moment(new Date()));
    $('#calendar').fullCalendar('option', 'minTime', '00:00:00');
    $('#calendar').fullCalendar('option', 'maxTime', '24:00:00');
  }
});

<link rel='stylesheet' href='//cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.4.0/fullcalendar.css' />

<script src='//cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js'></script>
<script src="//code.jquery.com/jquery-3.2.1.min.js" crossorigin="anonymous"></script>
<script src='//cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.4.0/fullcalendar.min.js'></script>
<div id='calendar'></div>