Fullcalendar - limit selectable to a single day

By default if you enable the 'selectable' attribute it will allow you to click and drag and select several days. I would like to only allow the user to select开发者_StackOverflow中文版 a single day, not drag over multiple. Is there a way to have 'selectable' enabled, but disable the dragging feature that comes along with it?

If you want to limit highlight to a single day in agenda week view you can use following:

  selectConstraint:{
      start: '00:01', 
      end: '23:59', 
    },

if you want to limit the event you can use

eventConstraint:{
      start: '00:00', 
      end: '24:00', 
    },

in the select callback, adding the following does the trick: (fullcalendar 2 using moment.js)

if (start.add('days', 1).date() != end.date() )
  $scope.eventCal.fullCalendar('unselect');

resources:

http://arshaw.com/fullcalendar/docs/selection/select_callback/ http://arshaw.com/fullcalendar/docs/selection/unselect_method/

You can select a single date or time by passing fullcalendar's 'select' method to the dayClick event listener:

$('#myCalendar').fullcalendar({
    dayClick: function(date,jsEvent,view) {
        $('#myCalendar').fullcalendar('select', date);
    }
});

Note you will also need to fire the 'unselect' method on your next callback (or dayClick).

Why not use selectAllow?

Start by converting the start and end times to seconds. Compare that to the number of seconds in a day.

Working Solution Without Using Moment.js:

selectAllow: function (e) {
   if (e.end.getTime() / 1000 - e.start.getTime() / 1000 <= 86400) {
       return true;
   }
}

This configuration setting worked for me on FullCalendar v5:

selectAllow: function(selectionInfo) {
    let startDate = selectionInfo.start;
    let endDate = selectionInfo.end;
    endDate.setSeconds(endDate.getSeconds() - 1);  // allow full day selection
    if (startDate.getDate() === endDate.getDate()) {
        return true;
    } else {
        return false;
    }
}

simply :

selectAllow: function (selectInfo) {
    return selectInfo.end.diff(selectInfo.start, 'days') == 1;
}

For me using the selectAllow option like this worked

selectAllow: function(selectionInfo) {
        // Don't allow creation of events over more than 1 day
        return moment(selectionInfo.start).utcOffset(false).isSame(moment(selectionInfo.end).subtract(1, 'second').utcOffset(false), 'day');
    },

I used utcOffset(false) because for whatever reason it doesn't work reliably without it and I used subtract(1, 'second') because the end date is inclusive, so without it you can't select the end of the day

This will be executed only when the user selects a day

// ...
select: function(start, end){
    if(moment(start._d).add(1, 'days').format('YYYY-MM-DD')==moment(end._d).format('YYYY-MM-DD')){
            //  just select one day
    }
},
// ...

I could do this using validRange:

https://fullcalendar.io/docs/validRange

Not at this time: the range of selectable days can not be customized without modifying the source.