Fullcalendar - limit selectable to a single day

Question

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 a single day

Answer 1

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/

Answer 2

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).

Answer 3

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

Answer 4

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
    }
},
// ...

Answer 5

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', 
    },

Answer 6

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;
   }
}