如何仅将 react-big-calendar 用于月视图

Question

我正在尝试使用 react-big-calendar，仅用于查看月份并允许用户按某个日期，这应该会触发我自己的 function。那是我对（并且想删除）所有与周、日、议程或显示一天中的时间相关的功能。 我只是想显示月视图，允许用户按下应该触发我的 function onSelectSlot的日期。

我没有找到太多关于如何做到这一点的信息，我发现的一点点是使用selectable={true}和onSelectSlot={onSelectSlot}来制作一个 function 来执行一个日期已被按下。 但是，这没有用。 而且我仍然想知道如何删除所有添加的功能，我想删除这些功能，因为我没有使用它们。 react-big-calender 可以实现这些事情吗，还是我应该继续尝试其他事情？ 我知道还有其他的，但我真的很喜欢这个的外观和感觉，如果可能的话我宁愿坚持使用它。

这是它的外观图片，以便更好地理解我的意思：

（所以我想删除右上角的东西，当按下某个日期时我想触发我自己的 function 而不是像默认情况下那样切换到日视图）

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;

更新和解决方案要将视图更改为月视图并仅显示月视图，请将以下内容添加到您的日历中： view='month' views={['month']} 。

function 使用上面显示的代码执行，但它仅在您按下单元格内部而不是我正在执行的单元格中的数字时有效。 因此，为什么它最初没有为我触发。 要处理按下单元格中的数字，请使用onNavigate={onSelectSlot}

Answer 1

将以下更改添加到您的代码中。

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

然后添加到道具

views={views}

Answer 2

根据文档示例，您可以在日历组件中传递defaultView="month"