React-大日历问题

Question

我正在使用 React 大日历库来进行学习，无论如何，它似乎运行得不太好。我已使用 date-fns 遵循正确的步骤，但问题是未显示信息，年份显示为“yyyy”，星期几仍显示为“cccc”，此外不显示时间，以及当天的每个相应数字。

这是我的存储库，如果您愿意，可以看一下：https://github.com/K1mera/Calendar

无论如何，我也将我的代码粘贴在这里：

import { Calendar } from "react-big-calendar";
import "react-big-calendar/lib/css/react-big-calendar.css";

import { addHours } from "date-fns";
import { localizer, getMessages } from "../../helpers";

import { NavBar, CalendarEvent } from "../../calendar"


const events = [{
  title: 'bla',
  notes: 'dsfsafasdfs',
  start: new Date(),
  end: addHours( new Date(), +2),
  bgColor: '',
  user: {
    id: '22',
    name: 'Jhonny Se'
  }
}]


export const CalendarPage = () => {

  const getEventStyle = ( event, start, end, isSelected ) => {
    
  }

  return (
    <main className="bg-slate-50">
      <NavBar />
      <Calendar
        culture="en-US"
        localizer={ localizer }
        events={ events }
        startAccessor="start"
        endAccessor="end"
        style={{ height: "calc( 100vh - 80px )" }}
        messages={ getMessages() }
        eventPropGetter={ getEventStyle }
        components={{
          event: CalendarEvent,
        }}
      />
    </main>
  );
}

这是我创建的一个助手，用于清理日历组件中的代码：

import { dateFnsLocalizer } from "react-big-calendar";

import { format, parse, startOfWeek, getDay } from "date-fns";
import  enUS  from "date-fns/locale/en-US";

const locales = {
  "en-US": enUS,
};

export const localizer = dateFnsLocalizer({
  format,
  parse,
  startOfWeek,
  getDay,
  locales,
});

非常感谢您的帮助！

我尝试查找以前的问题，但没有一个与我的问题相关。聊天 gpt 建议我清理缓存，并删除 date-fns、包，但 nopthng 有效。

Answer 1

由本地化程序生成的格式是预设的。您可以通过为不同的

formats

函数提供重写方法来重写它们中的任何一个。大日历文档中有覆盖其中任何一个的示例。

// this one is using the moment localizer, so you might
// need to adjust your format tokens for the localizer
// of your choice
const { defaultDate, formats, views } = useMemo(
  () => ({
    defaultDate: new Date(2015, 3, 13),
    formats: {
      dayHeaderFormat: (date, culture, localizer) =>
        localizer.format(date, 'dddd MMMM Do', culture),
    },
    views: [Views.WEEK, Views.DAY],
  }),
  []
)