Comments (7)
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))
from react-big-calendar.
One helpful library: https://github.com/jakubroztocil/rrule
from react-big-calendar.
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.
from react-big-calendar.
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?
from react-big-calendar.
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?
from react-big-calendar.
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:
- Insert a
dtstart
timestamp into your db for when the recurring events should begin. - Insert a
byweekday
array of days into your db on that same record. - 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)
})
- Then inject those
events
into your react-big-calendar.
I haven't tested this yet but it seems like it might work.
from react-big-calendar.
@corysimmons Is it the onNavigate callback that would fetch the next batch of dates?
from react-big-calendar.
Related Issues (20)
- Events are hiding if the contents are more HOT 2
- Setting event width to half day horizontally in week view instead of full
- How does event truncation work in month view? HOT 1
- Add label to all thursdays beside events in react big calendar
- New Slack Link Required
- Click the event trigger rerender timesSlotWrapper HOT 1
- Duplicate event shows up on month view when try to re-size
- Trouble in Next js HOT 6
- date overlay the modal HOT 2
- Make ResourceID available in dayPropGetter HOT 1
- Id type are missing HOT 2
- NiceToHave: Could you guys give us an API to sort events by ourself own requirements?
- Multi-day renders end day incorrectly if time is less then 00:01:00
- BUG:- resourceIdAccessor, resourceTitleAccessor not working for views (Day, Week, Work week)
- BUG:- resourceIdAccessor not working for views (Day, Week, Work week)
- TimeGrid is not exported properly. HOT 1
- Week view won't render any events if resources prop is passed in HOT 1
- How to change the language of the month and weekday labels? HOT 1
- Events Overlapping Layout Issue
- How to Make a Header Fixed on Top ?
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-big-calendar.