正在寻找一个javascript日历，它提供了一个能够阻止关闭日期的月份视图

Looking for a javascript calendar that gives month view with the capability to block off dates

本文关键字：一个 日期 视图 日历 javascript 寻找      更新时间：2023-09-26

我的web应用程序需要一个交互式日历。我以前没有使用过任何日历小工具，所以在这里我希望能为您挑选专家的头脑。

以下是我的要求：

  • 日历显示在月份视图中
  • 将某些日期灰显以将其排除在任何事件之外的能力

可选但很好：

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

我脑海中的日历显示更像FullCalendar。FullCalendar的问题是我找不到阻止日期的解决方案。

是的，您可以使用FullCalendar。

启动日历时，将一个函数（例如function）传递给参数选择：

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

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

此外，您可以覆盖这些日期的css（例如，放置灰色、块光标），以帮助用户获得不允许日期的第一手印象。

举个例子，今天之前的所有日子都是灰色背景：

$('.fc-today').prevAll('td').css('background','gray');
$('.fc-today').parent().prevAll().find('td').css('background','gray');
jQuery UI的日历能够锁定日期。

你需要使用"beforeShowDay"选项，然后在那里运行你的锁定逻辑，我这样使用它只允许周一可选：

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

但是，很明显，您可以在函数中放入所需的任何逻辑，使其根据需要启用或禁用天数。

相关文章：