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。有点丑，但有效。

＆＃13;

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

＆＃13;

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

＆＃13;

FullCalendar显示两个时间范围

1 个答案: