Estoy creando un calendario de citas de ventas usando React Big Calendar. Cuando un usuario hace clic en un día, me gustaría crear un mapa con todas las ubicaciones de citas para ese día. Pero para hacer eso, necesito una lista de eventos específicos para ese día. Sé que podría escribir una función que filtre la lista de eventos proporcionados al componente de calendario, pero preferiría no hacerlo si React Big Calendar ya viene con esa funcionalidad.
Aquí está mi código para el componente Calendario:
<Calendar localizer={localizer} events={events} startAccessor='start' endAccessor='end' style={{ height: 500 }} onSelectSlot={(slotInfo) => { console.log(slotInfo) }} selectable popup={true} eventPropGetter={(eventStyleGetter)} />Como puede ver, he intentado usar onSelectSlot prop, cuya consola registra slotInfo. Aquí está el resultado en la consola cuando selecciono una ranura que tiene múltiples eventos:
{ "slots": [ "2022-02-16T08:00:00.000Z" ], "start": "2022-02-16T08:00:00.000Z", "end": "2022-02-17T08:00:00.000Z", "action": "click", "box": { "x": 769, "y": 491, "clientX": 769, "clientY": 491 } }Estoy confundido por qué solo hay una ranura en la matriz de ranuras si hay varios eventos. ¿Hay alguna manera de obtener todos los eventos de ese día sin escribir una función para filtrar la matriz de eventos?
Agregar el accesorio selectable significa que los usuarios pueden usar el mouse para hacer clic y arrastrar para seleccionar un rango de veces. La matriz de slots no le dará todos los eventos del día, o para el rango seleccionado; más bien, le dará solo el rango seleccionado.
Si hace clic en un día, el (único) valor en la matriz de slots será la fecha correspondiente al inicio del día. Puede usar las propiedades de start y end para ver cuándo comienza y cuándo termina el día (exclusivo).
Si hace clic y arrastra, la slots de intervalos contendrá todos los intervalos de tiempo arrastrados, donde la duración de un intervalo de tiempo está determinada por los steps prop.
Si desea obtener una lista de todos los elementos para un día en particular cuando se hace clic en el día, puede filtrar los eventos que no coinciden dentro de la devolución de llamada onSelectSlot o pasar objetos de eventos que contienen una referencia a una matriz que contiene todos los eventos para ese día. Requiere un poco de código de su parte, pero eso no es algo que deba temer.
const { start, end } = slotInfo; const eventsForThisDay = events.filter( event => event.start >= start && event.start < end );