Jquery: FullCalendar - 设置整个日历的开始日期和结束日期答案

【问题标题】：Jquery: FullCalendar - set the starting day and finish day of the whole CalendarJquery: FullCalendar - 设置整个日历的开始日期和结束日期
【发布时间】：2016-05-31 12:24:10
【问题描述】：

大家下午好，

我目前正在开发一个网络应用程序来组织活动。我正在使用 express 和 mongoDB。

主要思想是用户可以创建一个带有 startDate 和 endDate 字段的“事件”对象，然后其他用户可以单击日历来说明何时可以。所以我选择了 FullCalendar，但我只想显示 startDate 和 endDate 之间的那一天。举个例子吧。

假设我的事件描述如下

{title: "Hey!",
startDate: 05/31/2016 2:20 PM,
endDate: 06/03/2016 2:20 PM
}

我希望我的日历仅显示这 4 天。你们知道如何帮助我吗？

【问题讨论】：

标签： javascript jquery calendar

【解决方案1】：

您是否查看过自定义视图？它们允许您设置持续时间，如下所示。

var startDate = '2014-11-12';
var numberOfDays = 4;

$('#calendar').fullCalendar({
    header: {
        center: 'customDays' // buttons for switching between views
    },
    defaultView: 'customDays',
    views: {
        customDays: {
            type: 'basicWeek',
            duration: { days: numberOfDays },
            buttonText: 'Custom Days'
        }
    },
    defaultDate: startDate
});

Fullcalendar View Documentation

您似乎无法在月视图中执行此操作，但您可以在 basicWeek 视图中执行此操作，请查看 JsBin 中的示例

【讨论】：

如果我在这里理解正确，您正在创建一个新视图，但您不会更改其他视图。我需要一种方法来禁用其他日子
我已经更新了答案，您可以在标题中为您想要的任何视图设置按钮，并将默认视图设置为您想要的视图。
你能给我一个月视图的例子吗？谢谢
@FrancescoZ 我再次更新了答案，当您设置实际隐藏其他日子的持续时间时。这可能不是您想要的。如果您只是希望禁用日期，您不能使用一些 css 使它们看起来不活动，然后当用户单击某一天时，在执行任何代码之前检查它是有效的一天吗？与此类似：stackoverflow.com/questions/14978629/…
是的，类似的，但该代码的主要问题是我需要点击当天，而我之前无法更改 css。

【解决方案2】：

好的，我找到了。我可以使用下面的函数 dayRender

 dayRender: function( date, cell ) {
      if(date.diff(event.startDate,'days') < 0 || date.diff(event.endDate,'days') > 0){
          $(cell).addClass('disable');
          console.log(cell)
      }
    }

【讨论】：