0

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

以下是我的要求：

  • 日历以月视图显示
  • 将某些日期变灰以将其与任何事件隔离的能力。

可选但很高兴拥有：

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

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

4

2 回答 2

2

是的，您可以使用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');
于 2013-07-31T00:59:28.880 回答
0

jQuery UI 的日历具有锁定日期的能力。

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

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

但是，显然，您可以将所需的任何逻辑放入函数中，以根据需要启用或禁用日期。

于 2013-07-30T22:21:04.207 回答