CODEWITHSUNDEEP
reactjsreact-big-calendar
Maykel
Maykel

Reputation: 175

react big calendar repeated date

I am using react-big-calendar for an app, but when I am making first steps I've realized that there is something wrong...two days of the month repeated, currently march 2021 has saturday and sunday both with 13th

Can you give me a hint on how to fix this. All is fine except that

thx

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>
    )
}

Upvotes: 0

Views: 1408

Answers (1)

Steve -Cutter- Blades
Steve -Cutter- Blades

Reputation: 5432

I think that's because you didn't put the localizer prop on the Calendar component. This worked fine for me. in 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>
  );
}

Upvotes: 1

Related Questions