Question

我每天都有不同的可用时间范围，例如：

星期一4点从9点到14点
星期一4点16:00至18:00
星期四5点从9点30分到15点
周三6点从10点到12点
周三6日16:00至18:00
...
星期一11日12:00至14:00
星期一11日15:00至17:30
...

这些范围可能会从一天变为另一天。它们存储在数据库中，我使用＆＃34;渲染：背景＆＃34;在日历上渲染它们。属性。

用户只能在这些范围内创建活动。当用户点击＆＃34;渲染：背景＆＃34;范围他们可以看到一个模态窗口，提示用户创建一个新事件。

我的问题是：当我点击＆＃34;渲染：背景＆＃34;之外的日历时slot -let说在星期一4点14：30h显示模态窗口。我怎么能避免这个？当用户在非允许的插槽外部点击时，我希望他们显示错误消息，而不是模态窗口。

这是我的代码：

$('#calendar').fullCalendar({
        // put your options and callbacks here
        height: 1055,
        //aspectRatio: 0.5,
        allDaySlot: false,
        slotEventOverlap: false,
        header: {
            left: '',
            center: '',
            right: ''
        },
        columnHeader: false,
        columnFormat: 'Class type',
        defaultView: 'agendaDay',
        weekends: false,
        selectable: true,
        eventRender: my_render_function,
        },
        select: function (start, end, jsEvent) {  // click on empty time slot
        // code to show my modal for creating a new event
        ...
        ...
        $('#myModal').modal('show');
        },
        selectOverlap: function (event) {
            // Here you will get all background events which are on same time.
            return event.rendering === 'background';
        },
        businessHours: {
            // days of week. an array of zero-based day of week integers (0=Sunday)
            dow: [1, 2, 3, 4, 5], // Monday - Thursday
            start: '09:00', // a start time (10am in this example)
            end: '18:00', // an end time (6pm in this example)
        },
        minTime: '09:00:00',
        maxTime: '18:00:00',
        eventSources: [
            {
                url: '/agenda/my_existent_events'
                }
            },
            {
                url: '/agenda/mybackground_events_with_colors'
            }
        ],
    })

我已经测试了这个解决方案，但它对我不起作用： Detect click on background event 任何建议都将受到欢迎。提前谢谢！

Answer 1

您可以使用SelectAllow选项。

它为您提供了对用户可以选择的位置的精确编程控制。

function(selectInfo)

当用户拖动时，将为每个新的潜在选择调用此回调。

回调函数会收到有关用户尝试选择的位置的信息（selectInfo），并且必须返回true或false。

selectInfo对象将具有以下属性：

start（a Moment）

end独家结束日期/时间（片刻）

如果您使用Resource View

，请

resourceId

此外，您可以查看与选择here

如何检查fullcalendar上的不可选插槽

1 个答案: