FullCalendar.js how to restrict date select to one day on Month View

0
votes

I am using FullCalendar.js for a date selector on my web page.

I want to limit the range of selectable dates on my full calendar widget to one day only (the default is to drag for multiple dates, or click for a single date). I'd like to effectively disable the drag functionality for selecting multiple dates, either by:

  1. Disabling the native drag event (probably incorrect)
  2. Restrict the date range of selectable dates to one day (this feels more sensible)

This question has answers on how to limit date selection to one day using the week view by specifying start and end in the selectConstraint option. However, the same solution does not work for the month view.

How can I limit the date selection range to one day for month view?

My Code:

var calendar = new FullCalendar.Calendar(calendarEl, {
    plugins: [ 'interaction', 'dayGrid', 'timeGrid' ],
    selectable: true,
    header: {
      left: 'prev,next ',
      center: 'title',
      right: ''
    },
    validRange: {
      start: today
    },
    selectConstraint:{
      start: '00:01', 
      end: '23:59', 
    },
    dateClick: function(info) {
      custom_date = true;
      $("#start_date").val(info.dateStr);
      $("#end_date").val(info.dateStr);
    }
});
1
javascriptjqueryfullcalendar

1 Answers

3
votes

Turns out you can use the selectAllow function.

First convert the date strings into seconds with getTime() / 1000.

Compare the start time and the end time to the number of seconds in a day 86400. If it is less than or equal to that number, only one day was selected.

Working code: 

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