Question

如何将日历单元格中的空白区域转换为可单击的对象，该对象将您引导到具有单元格参数的另一页面（例如日期）？

我正在建立一个预订应用程序，我希望用户能够使用FullCalendar点击一天打开预订表单，然后包含日期。

我看过一些关于使用弹出窗口的帖子，但这不是我想要的。

这些是我当前的配置设置。

function setupCalendar() {
  var calendar_config = {
    firstDay: 1, // Monday
    weekMode: "liquid",
    events: bookingEvents, // this can be a JSON feed (extra HTTP request)
    header: headerOptions,
    selectable: true
  };
  var jq_target_div = $('#calendar');
  jq_target_div.fullCalendar(calendar_config);
}

$(document).ready(setupCalendar);

Answer 1

你需要抓住dayClickcallback。

然后，您将收到一个日期参数。来自doc：

日期包含所点击日期的时刻。如果是全天的点击，这一刻将是模棱两可的时间。如果一个插槽 agendaWeek或agendaDay查看已被点击，日期将有插槽的时间。

所以最后你只需要打开你的新表格 - 无论你想要什么：在一个对话框，一个模态，一个新的div中......这将取决于你的代码。

$('#calendar').fullCalendar({
    dayClick: function(date, jsEvent, view) {
        openNewForm(date);

    }
});

为了澄清您的代码，我会在您的fullCalendar配置中添加对您的方法的调用。所以，根据你的配置...

var calendar_config = {
    firstDay: 1, // Monday
    weekMode: "liquid",
    events: bookingEvents, // this can be a JSON feed (extra HTTP request)
    header: headerOptions,
    selectable: true, 
    dayClick: openNewForm   //here is where you redirect the callback
  };

function openNewForm(date, jsEvent, view){
    openNewForm(date);
}

如何在fullcalendar中点击日期？

1 个答案: