在全日历中如何在我的自定义视图中禁止 select

Question

我正在使用全日历。我有一个自定义视图，但我不希望用户能够 select 此视图的时间范围。

            selectable: true,
            defaultView: 'multiColAgendaDay',
            events: '/events.json',
            views: {
                multiColAgendaDay:
                {
                    type: 'multiColAgenda',
                    duration: { days: 1 },
                    numColumns: gon.driver_num,
                    columnHeaders: gon.drivers_name,
                    buttonText: 'drivers'
                    // ,
                }
            },

我试图通过在 select

中添加检查来解决这个问题

            select: function (start, end, jsEvent, view) {
                if (view.name === 'multiColAgendaDay'){
                    calendar.fullCalendar('unselect');
                    alert("You can create event in week and day view.");
                    return;
                }
                $.getScript('/events/new', function () {
                    $('#event_date_range').val(moment(start).format("MM/DD/YYYY HH:mm") + ' - ' + moment(end).format("MM/DD/YYYY HH:mm"))
                    date_range_picker();
                    $('.start_hidden').val(moment(start).format('YYYY-MM-DD HH:mm'));
                    $('.end_hidden').val(moment(end).format('YYYY-MM-DD HH:mm'));
                });

                calendar.fullCalendar('unselect');
            },

我想知道其他方法。我希望有一种方法可以在特定视图中将 selectable 设置为 false。

Answer 1

您可以将 selectable: false 添加到您的视图定义中（与向其添加其他属性的方式相同）。例如

multiColAgendaDay:
{
  type: 'multiColAgenda',
  duration: { days: 1 },
  numColumns: gon.driver_num,
  columnHeaders: gon.drivers_name,
  buttonText: 'drivers',
  selectable: false
}

当您使用此视图时，它会覆盖 selectable 的顶级设置。有关文档，请参阅 https://fullcalendar.io/docs/v3/view-specific-options#v2。

只要您使用的是 fullCalendar 2.4 或更高版本，就应该可以使用。

在全日历中如何在我的自定义视图中禁止 select

In fullcalendar how to forbid select in my custom view

javascript

fullcalendar

fullcalendar-2