两个时间范围之间的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之间，而对于night是在19:00至00:00之间。

先感谢您！

Answer 1

通过使用议程选项的最小和最大时间 。 有点难看，但可以。

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