I am using fullcalndar selectMinDistance
example init:
I think this works by pixels ratio. I've set this to selectMinDistance: 155
var calendar = new FullCalendar.Calendar(calendarEl, {
initialView: 'dayGridMonth',
selectable: true,
eventOverlap: true,
selectOverlap: true,
validRange: {
start: year + '-05-20',
end: year + '-11-15'
},
selectMinDistance: 155,
...
It works great because i want a minimum of 3 days selected. However, when the user selects, then decides on that same mouse down to unselect, he can then unselect and bring it down to one day. Kind of defeats the purpose.
Does anyone know if there is something in FullCal to prevent this from happening or a good fix? I have not found anything in the docs that can help me...
For my application selectMinDistance was not the best approach, and I was pointed out to use selectAllow found here instead that works great.
I'm not sure why I didn't find it searching online the first time.
To prevent users from selecting dates lower than a set count of days, you use this function and throw a true or false for it to be selectable to the user
my example usage
var year = new Date().getFullYear();
var calendar = new FullCalendar.Calendar(calendarEl, {
initialView: 'dayGridMonth',
selectable: true,
eventOverlap: true,
selectOverlap: true,
validRange: {
start: year + '-05-20',
end: year + '-11-15'
},
// selectMinDistance: 155, this will not work for deselecting
selectAllow: function(selectInfo){
console.log(selectInfo);
// create a day
var oneDay = 24 * 60 * 60 * 1000;
var startDay = selectInfo.start;
// FullCalendar always gives next next day of select end day, so do minus one day
var endDay = selectInfo.end - oneDay;
var count = Math.round(Math.abs((startDay - endDay) / oneDay));
// starts at 0, so add to start at 1
var dayCount = (count + 1);
if(dayCount >= 3){
return true;
}else{
return false;
}
},
...