How to use react-big-calendar only for month view

Question

I'm trying to use react-big-calendar, only for viewing the month and allowing the user to press a certain date, which should trigger my own function. That is I'm not interested in (and want to remove) all the functionality related to week, day, agenda or displaying the time of a day. I simply want to show the month-view, allow the user to press a date which should trigger my function onSelectSlot .

I haven't found much on how to do this, the little I did find said to use selectable={true} and onSelectSlot={onSelectSlot} to make a function to execute ones a date has been pressed. However, this did not work. And I still wonder how to remove all the added functionalities, which I want remove as I have no use of them. Is these things possible with react-big-calender, or should I move on to trying something else? I know there are other ones out there, but I really like the look and feel of this one and would prefer to stick with it if possible.

Here is an image of how it looks, to give a better understanding of what I mean:

(So it's the things in the top right corner that I want to remove, and when a pressing a certain date I want to trigger my own function and not switch to the day-view as it does by default)

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;

Update and Solution To change the view to month and only show month-view, add the following to you calendar: view='month' views={['month']} .

The function executes using the code displayed above, however it only works when you press inside of the cell and not the number in the cell which was what I was doing. Hence why it didn't trigger initially for me. To handle pressing the number in the cell use onNavigate={onSelectSlot}

Answer 1

Add the following changes to your code.

const {views, ...otherProps} = useMemo(() => ({
    views: {
        month: true
    }
}), [])

and then add to prop

views={views}

Answer 2

as per documentation example you can pass defaultView="month" in you calendar component