Recurring Events about react-big-calendar

[corysimmons]

Yeah that sounds right. My implementation is just on some personal side project so I ended up just doing

const rule = new RRule({
	freq: RRule.WEEKLY,
	byweekday: dbRecord.byweekday,
	dtstart: dbRecord.dtstart,
	until: endOfMonth(newDatePlusAMonth),
})

and

rule.all()

to generate records for the current month + the next month, but what you suggested sounds like a better solution.

You can also get a slice of events (from their docs), so I think something like this would be the best solution actually:

rule.between(dbRecord.dtstart || startOfMonth(utCDateOfCurrentlySelectedMonth), endOfMonth(dbRecord.until || utCDateOfCurrentlySelectedMonth))

[havandenberg]

One helpful library: https://github.com/jakubroztocil/rrule

[jquense]

recurring events is more of a data thing then anything else. Since we have no option on what the data or shape of your data is it doesn't make a ton of sense to try and support them directly.

Instead the Calendar provides you with hooks that let you know what dates it wants to display, you can adjust the events array on the calendar in response to that, allowing you to expand recurring events however you like. You can also implement paging/lazy loading that way.

[clustersnake]

@jquense

the Calendar provides you with hooks that let you know what dates it wants to display

could you please give an example of those hooks? Is it possible to execite some code on week change?

[aiavci]

rrule and similar scheduling libraries allow you to create large lists of recurring event dates. What's the best way to pass such large lists into react-big-calendar and achieve pagination?

I would think thatonNavigate would dynamically set the list that's passed into events or is there a better way?

[corysimmons]

I don't think you'd need to pass a huge list of hundreds/thousands of events into a React component. Really you're only ever showing a month (at max) view with any calendar, so I think maybe a good pattern would be to:

1. Insert a dtstart timestamp into your db for when the recurring events should begin.
2. Insert a byweekday array of days into your db on that same record.
3. Create the dates on the fly in the client depending on what view you're looking at:

const events = new RRule({
  freq: RRule.WEEKLY,
  interval: 5,
  byweekday: [...days_pulled_from_your_byweekday_column],
  dtstart: new Date(whatever_the_first_day_of_the_currently_selected_month_is),
  until: new Date(last_day_of_selected_month)
})

4. Then inject those events into your react-big-calendar.

I haven't tested this yet but it seems like it might work.

[aiavci]

@corysimmons Is it the onNavigate callback that would fetch the next batch of dates?