Estoy tratando de usar react-big-calendar, solo para ver el mes y permitir que el usuario presione una fecha determinada, lo que debería activar mi propia función. Es decir, no estoy interesado (y quiero eliminar) todas las funciones relacionadas con la semana, el día, la agenda o mostrar la hora de un día. Simplemente quiero mostrar la vista mensual, permitir que el usuario presione una fecha que debería activar mi función onSelectSlot .

No he encontrado mucho sobre cómo hacer esto, lo poco que encontré decía usar selectable selectable={true} y onSelectSlot={onSelectSlot} para hacer una función para ejecutar las que se han presionado en una fecha. Sin embargo, esto no funcionó. Y todavía me pregunto cómo eliminar todas las funcionalidades añadidas, que quiero eliminar porque no las uso. ¿Son posibles estas cosas con react-big-calender, o debería pasar a probar otra cosa? Sé que hay otros por ahí, pero realmente me gusta la apariencia de este y preferiría quedarme con él si es posible.

Aquí hay una imagen de cómo se ve, para dar una mejor comprensión de lo que quiero decir:

(Entonces, son las cosas en la esquina superior derecha las que quiero eliminar, y cuando presiono una fecha determinada, quiero activar mi propia función y no cambiar a la vista del día como lo hace de manera predeterminada)

 import format from "date-fns/format"; import getDay from "date-fns/getDay"; import parse from "date-fns/parse"; import startOfWeek from "date-fns/startOfWeek"; import React, { useState } from "react"; import { Calendar, dateFnsLocalizer } from "react-big-calendar"; import "react-big-calendar/lib/css/react-big-calendar.css"; import DatePicker from "react-datepicker"; import "react-datepicker/dist/react-datepicker.css"; import "./calendar.css"; const locales = { "en-US": require("date-fns/locale/en-US"), }; const localizer = dateFnsLocalizer({ format, parse, startOfWeek, getDay, locales, }); const onSelectSlot = (pressedDate) => { console.log("pressed Date: ", pressedDate) }; function MyCalendar() { return ( <div className="text-center"> <h1>Calendar</h1> <Calendar localizer={localizer} selectable={true} startAccessor="start" onSelectSlot={onSelectSlot} endAccessor="end" style={{ height: 500, margin: "50px" }} /> </div> ); } export default MyCalendar;

Actualización y solución Para cambiar la vista a mes y mostrar solo la vista mensual, agregue lo siguiente a su calendario: view='month' views={['month']} .

La función se ejecuta usando el código que se muestra arriba, sin embargo, solo funciona cuando presiona dentro de la celda y no el número en la celda que era lo que estaba haciendo. Por eso no se activó inicialmente para mí. Para manejar presionar el número en la celda, use onNavigate={onSelectSlot}