reactjsreact-big-calendar

React Big Calendar rRule

Are there any React Big Calendar settings for repeating events? I tried the following but it didn't work. I'd like to save the rRule to my DB with my event, then use it to generate the dates when the calendar is open. Right now, the rRule is totally ignored. Thank you in advance for any help.

import React from 'react';
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 App = () => {
  const events = [
    {
  title: 'Recurring Event',
  start: new Date(2023, 5, 1, 10, 0, 0),
  end: new Date(2023, 5, 1, 11, 0, 0),
  rRule: 'RRULE:FREQ=WEEKLY;BYDAY=MO,TU,FR',
  // The above rRule indicates a weekly recurrence on Mondays, Tuesdays, and Fridays
},
  ];

return (
<div style={{ height: '500px' }}>
  <Calendar localizer={localizer} events={events} startAccessor="start" 
endAccessor="end" />
</div>
);
};

export default App;
Solution

  • These are the only settings available:

    enter image description here

    The resource?: any is just to divide the events into categories, if you need recurring events you will need to calculate the dates and add them to the event list.

    More info in DOCs: https://jquense.github.io/react-big-calendar/examples/index.html?path=/docs/props--events