反应大日历重复日期答案

【问题标题】：react big calendar repeated date反应大日历重复日期
【发布时间】：2021-03-20 19:09:12
【问题描述】：

我正在为一个应用程序使用 react-big-calendar，但是当我迈出第一步时，我意识到出了点问题……每月有两天重复，目前 2021 年 3 月有星期六和星期日13日

你能给我一个关于如何解决这个问题的提示吗？一切都很好，除了

谢谢

import { Calendar, momentLocalizer } from 'react-big-calendar'
import moment from 'moment'
import 'react-big-calendar/lib/css/react-big-calendar.css'

const localizer = momentLocalizer(moment)

const event = [{

start: moment().toDate(),
end: moment().add(2, 'hours').toDate(),
title: 'Cumple'

}]



export const CalendarScreen = () => {
    return (
        <div>
            
            <Calendar
                
                events={event}
                startAccessor="start"
                endAccessor="end"
                style={{ height: '100vh' }}
                

            />
        </div>
    )
}

【问题讨论】：

标签： reactjs react-big-calendar

【解决方案1】：

我认为这是因为您没有将 localizer 属性放在 Calendar 组件上。这个 worked fine for me. 在 CodeSandbox 中。

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

const localizer = momentLocalizer(moment);

const event = [
  {
    start: moment('2021-03-14', 'YYYY-MM-DD').toDate(),
    end: moment('2021-03-14', 'YYYY-MM-DD').add(2, "hours").toDate(),
    title: "Cumple"
  }
];

export default function CalendarScreen() {
  // You must set explicit height on your container
  // I used `defaultDate` to target test the specific
  // date, which is DST where I am, so you see 3AM twice
  // in the TimeGrid (Day/Week views).
  return (
    <div style={{ position: "relative", height: 950 }}>
      <Calendar
        localizer={localizer}
        events={event}
        startAccessor="start"
        endAccessor="end"
        defaultDate={new Date(2021, 2, 14)}
      />
    </div>
  );
}

【讨论】：