时间戳

首页 > 解决方案 > 反应大日历重复日期

reactjs - 反应大日历重复日期

问题描述

我正在将 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>
    )
}

标签： reactjsreact-big-calendar

解决方案

我认为那是因为您没有将localizer道具放在Calendar组件上。这对我来说很好。在 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>
  );
}

推荐阅读