时间戳

首页 > 解决方案 > FullCalendar 用于预订，可选择拖动/单击

fullcalendar - FullCalendar 用于预订，可选择拖动/单击

问题描述

FullCalendar 是否能够做类似 airbnb.com 日历之类的预订房屋？通过单击（而不是拖动）选择可用日期范围之间的日期？

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

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

动机：通过单击切换拖动，渲染/选择可用日期

我的问题是：我可以在被解雇dayRender时再次使用回调吗？dateClick

标签： fullcalendarfullcalendar-4

解决方案

AFAIK 没有对此功能的内置支持。但是，您可以很容易地自己实现这一点。

在一个简短的列表中：

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

那就是如果你想创建一个事件。但是你可以对这些数据做任何你想做的事情，只需调用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

推荐阅读