CODEWITHSUNDEEP
fullcalendar
Doug H.
Doug H.

Reputation: 295

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 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?

Upvotes: 14

Views: 19619

Answers (10)

Marc Garcia
Marc Garcia

Reputation: 1458

I could do this using validRange:

https://fullcalendar.io/docs/validRange

Upvotes: 0

Healyhatman
Healyhatman

Reputation: 1659

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

Upvotes: 1

basfest
basfest

Reputation: 609

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

Upvotes: 2

MOUNIR BRAHAM
MOUNIR BRAHAM

Reputation: 11

simply :

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

Upvotes: 1

Dev Oskii
Dev Oskii

Reputation: 929

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

Upvotes: 3

EstebanAT
EstebanAT

Reputation: 1

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

Upvotes: 0

Saurav Dangol
Saurav Dangol

Reputation: 904

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

Upvotes: 20

S. Emmer
S. Emmer

Reputation: 93

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

Upvotes: 3

fritz
fritz

Reputation: 151

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/

Upvotes: 6

Femi
Femi

Reputation: 64700

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

Upvotes: -1

Related Questions