¡Hola! Espero que hayas logrado resolver tu problema, de no ser así te dejo una forma para poder logralo. Dentro del callback select
tienes que hacer el cálculo de los días seleccionados y luego almacenar el cálculo en una variable global para poder hacer uso luego al hacer clic en el botón Listar.
Primero declaras la variable global en cero, de preferencia antes de iniciar el calendario:
let diasSeleccionados = 0;
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
// ...
});
Luego en el callback de select
haces el cálculo de la siguiente forma:
diasSeleccionados = ((new Date(info.endStr).getTime()) - (new Date(info.startStr).getTime())) / (1000 * 3600 * 24);
Recuerda que estás trabajando com milisegundos, es por eso que requieres de la multiplicación y división para poder obtener el tiempo en terminos de días.
Una forma más sencilla sería utilizar utilizar la función diff
de MomentJS:
diasSeleccionados = Number(moment(info.endStr).diff(moment(info.startStr), 'days'));
Luego en la función del botón puedes hacer uso de diasSeleccionados
en cualquier momento, pues es una variable global.
// ...
customButtons: {
listar: {
text: 'Listar',
click: function() {
alert(`Días seleccionados: ${diasSeleccionados}`);
diasSeleccionados = 0;
}
}
}
// ...
Puedes regresar el valor a 0
una vez hayas procesado la información para evitar problemas.
Te comparto el codepen en donde puedes ver el código completo, no lo inserto aquí debido a que los CSS de FullCalendar dan problemas (no se cargan) y sin ellos no se tiene el comportamiento deseado.