寻找一个javascript日历，它提供了月视图，可以阻止日期[关闭]

Question

我的Web应用程序需要一个交互式日历。 我之前没有使用任何日历小部件，所以在这里我希望能够挑选专家的大脑。

以下是我的要求：

• 日历以月视图显示
• 能够将某些日期变灰以阻止它们出现在任何事件中。

可选但很高兴：

• 用户只需在日历上单击几下鼠标即可轻松地将新事件添加到日历中，从而避免使用键盘。

我想到的日历显示更像是FullCalendar 。 FullCalendar的问题在于我无法找到阻止日期的解决方案。

Answer 1

是的，您可以使用FullCalendar 。

启动日历时，将函数（例如yourFunction）传递给参数select：

$('#yourdiv').fullCalendar(
    {...
     select: yourFunction,
     ...
    }, fcOtherSettings
);

当用户尝试创建新事件时，将始终触发yourFunction 。 然后，在您的yourFunction您可以验证您想要的任何内容，例如阻止用户为特定日期创建事件。

此外，您可以覆盖这些日期的CSS（例如，设置灰色，阻挡光标）以帮助用户获得非允许日期的第一手印象。

就像一个例子，今天前几天的灰色背景：

$('.fc-today').prevAll('td').css('background','gray');
$('.fc-today').parent().prevAll().find('td').css('background','gray');

Answer 2

jQuery UI的日历可以锁定日期。

你需要使用“beforeShowDay”选项，然后在那里运行你的锁定逻辑，我这样使用它只允许星期一作为可选：

$('input[id$=txtCompareTo], input[id$=txtWeekOf]').datepicker({
      firstDay: 0,
      beforeShowDay: function (date) {
          return [date.getDay() == 0, "", ""];
      }
});

但是，显然，您可以在函数中放置所需的任何逻辑，以使其启用或禁用您需要的日期。