Search code examples
javascriptfullcalendarfullcalendar-2

In fullcalendar how to forbid select in my custom view


I'm using fullcalendar. I have a custom view, but I don't want users to be able to select a time range on this view.

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


I tried to solve this by adding a check in 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');
            },

I would like to know other approaches. I hope there is a way to set selectable to false in a specific view.


Solution

  • You can add selectable: false to your view definition (the same way you add other properties to it). e.g.

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

    When you're using this view, this overrides the top-level setting for selectable. See https://fullcalendar.io/docs/v3/view-specific-options#v2 for documentation.

    As long as you're using fullCalendar 2.4 or above, this should work.