Estoy usando fullcalndar selectMinDistance
ejemplo inicial:
Creo que esto funciona por proporción de píxeles. He configurado esto para 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, ...Funciona muy bien porque quiero un mínimo de 3 días seleccionados. Sin embargo, cuando el usuario selecciona, luego decide que ese mismo mouse desactive la selección, luego puede anular la selección y reducirla a un día. Tipo de derrota el propósito.
¿Alguien sabe si hay algo en FullCal para evitar que esto suceda o una buena solución? No he encontrado nada en la documentación que pueda ayudarme...
Para mi aplicación, selectMinDistance no fue el mejor enfoque, y me indicaron que usara selectAllow que se encuentra aquí, que funciona muy bien.
No estoy seguro de por qué no lo encontré buscando en línea la primera vez.
Para evitar que los usuarios seleccionen fechas inferiores a un número determinado de días, utilice esta función y arroje un verdadero o falso para que el usuario pueda seleccionarla.
mi ejemplo de uso
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; } }, ...