如何使FullCalendar只显示将来的日期

Question

有没有办法只显示今天的日期？不需要显示过去的事件和日期。

如果今天是2012年3月15日星期一，则日历从今天开始并显示到2012年4月15日的天数。

或者下个月从现在的一周开始。

Answer 1

它可以通过使用类名fc-future迭代完整的日历事件来轻松实现。下面是一个示例，其中我为每个将来的日期添加了一个按钮。

 eventAfterAllRender: function (event) {
            if(event.name == 'month')
            {
                $('.fc-day.fc-future').each(function(){
                    $(this).css('position','relative');
                    $(this).append('<button type="button" style="position:absolute;bottom:0;left:0;right:0;" class="btn btn-primary" data-toggle="modal" data-target="#XYZRequest">\n' +
                        '<i class="fa fa-calendar-plus-o requestSlot fc-day-number" aria-hidden="true"></i>' +
                        '</button>');
                });
            }
        },

Answer 2

您可以使用viewRender为将来或过去的日期禁用或启用上一步/下一步按钮，方法是设置开始日期以控制开始日期(我将当前日期设置为开始日期)。

以下是代码

viewRender: function (view, element)
    {
        var minDate = new Date();
        if (view.start <= minDate) {
            $('.fc-button-prev').addClass("fc-state-disabled");
        }
        else {
            $('.fc-button-prev').removeClass("fc-state-disabled");
        }
    }

结束日期反之亦然

Answer 3

使用ViewDisplay选项

  viewDisplay   : function(view) {
      date = new Date() //is today's date.

      if((date - view.start) > 0) { jQuery('.fc-button-prev').addClass("fc-state-disabled"); }
      else { jQuery('.fc-button-prev').removeClass("fc-state-disabled"); }

      if((view.end - date) > 7809463201) { jQuery('.fc-button-next').addClass("fc-state-disabled"); }
      else { jQuery('.fc-button-next').removeClass("fc-state-disabled"); }
  },