如何仅使用react-big-calendar进行月视图

Question

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

onSelectSlot

。

我还没有找到太多关于如何做到这一点的信息，我发现的一点是使用

selectable={true}

和

onSelectSlot={onSelectSlot}

来创建一个函数来执行已按下日期的函数。然而，这并没有奏效。我仍然想知道如何删除所有添加的功能，我想删除这些功能，因为我没有使用它们。这些事情可以用react-big-calender实现吗，还是我应该继续尝试其他东西？我知道还有其他的，但我真的很喜欢这个的外观和感觉，并且如果可能的话更愿意坚持使用它。

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

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

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']}

。

该函数使用上面显示的代码执行，但是只有当您按单元格内部而不是单元格中的数字时它才起作用，这正是我正在做的。这就是为什么它最初没有对我触发。要处理按单元格中的数字，请使用

onNavigate={onSelectSlot}

Answer 1

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

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

然后添加到 prop

views={views}

Answer 2

如何使每月数字居中对齐。默认它们位于右上角

Answer 3

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

defaultView="month"