FullCalendar 显示两个时间范围内的事件

Question

我正在使用 fullCalendar 3.4，我有两个自定义按钮 evening、night，如下所示：

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

我设法显示了明天的事件，但无法弄清楚如何显示 evening 事件，例如使用时间范围，与 tommorow 相同，但时间介于 12:00 和 16:00 ，对于时间在 19:00 和 00:00 之间的 night .

提前致谢！

Answer 1

通过使用 agenda options min and max time。有点丑但有效。

$(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>

FullCalendar 显示两个时间范围内的事件

FullCalendar display events between two time range

javascript

fullcalendar

fullcalendar-scheduler