FullCalendar 用于预订，可选择拖动/单击答案

【问题标题】：FullCalendar for bookings, selectable drag/clickFullCalendar 用于预订，可选择拖动/单击
【发布时间】：2020-05-30 07:36:49
【问题描述】：

FullCalendar 是否可以使用 airbnb.com 日历之类的方式来预订房屋？通过单击（而不是拖动）在可用日期范围内选择日期？

我创建了一个日历，您可以通过从头到尾拖动来选择日期，selectable: true 和 selectMinDistance: 2。

示例：https://codepen.io/khurramishaque/pen/dyyPyVX（来自：FullCalendar disable select day if is not allowed in selectAllow callback）

动机：通过点击切换拖动，呈现/选择可用日期

我的问题是：当dateClick 被触发时，我可以再次使用dayRender 回调吗？

【问题讨论】：

dateClick 不会触发 dayRender，不会。重新绘制视图时触发 dayRender。但是，您为什么要关心它是单击还是拖动？你没有解释你希望从中获得什么优势。
但是，您可以相当简单地完成选择 - 按照您的建议处理 dateClick。这使您可以访问单击日期的 HTML 元素，因此您可以轻松更改其颜色以将其标记为选中（我假设这是您想要 dayRender 的动机）。然后，您可以维护自己的数组（在 fullCalendar 之外），其中包含用户单击的所有日期的列表。
如果您需要能够选择特定时间，您仍然可以使用“选择”功能来做同样的事情（尽管我认为保持选择颜色可能会更棘手。这个答案： stackoverflow.com/a/29212500/5947043 提出了一种通过创建临时事件源来覆盖选定区域来处理该问题的方法（代码适用于旧版本的日历，但这个概念仍然有效）
P.S 似乎存在一个关于添加对多选的内置支持的未解决问题。也许你想给它投票：github.com/fullcalendar/fullcalendar/issues/4387

标签： fullcalendar fullcalendar-4

【解决方案1】：

AFAIK 没有对此功能的内置支持。但是，您可以自己轻松实现。

在一个简短的列表中：

禁用 selectable，因为它在这里对您没有帮助
绑定到dateClickevent并保存返回的开始日期
在处理dateClick事件的同一函数中，如果您保存了开始日期，则获取结束日期并使用addEvent手动创建事件function

如果你想创建一个事件。但是您可以对这些数据执行任何其他操作，只需在日历对象上调用 render。

例如：

var startDate = false;
var calendar = new Calendar(calendarEl, {
    selectable: false,
    dateClick: function (info) {
        if (startDate !== false) { // startDate has been selected, create event
            this.addEvent({
                title: "An event title",
                start: startDate,
                end: info.date
            });
            startDate = false;
        } else { // No start date, set it
            startDate = info.date;
        }
    }
});

注意：我没有测试上面的代码。您可能需要先初始化calendar，然后绑定dateClick 事件并将this 替换为calendar

【讨论】：