Adding React Full Calendar with the RRule Plugin. I have an array of calendar events, how would I go about finding the next X number calendar events? So if today is Friday and my next two events are on Monday and Wednesday next week, I want to be able to display those on a different component. This isn't for displaying the events on the calendar, but rather on the dashboard I want to show the user what their next two events are. I can do the date comparison, I just haven't found in their docs how to get all of the upcoming events and return the objects.
useEffect(() => {
// get all calendar items, find next two events
var today = new Date().getTime();
INITIAL_EVENTS.forEach(i => {
console.log(i.rrule)
});
}, [INITIAL_EVENTS])
const INITIAL_EVENTS = [
{
id: 321,
title: 'Last Friday of every month',
color: 'orange',
rrule: {
freq: 'monthly',
interval: 1,
byweekday: [CALENDAR_ENUM.Friday],
bysetpos: -1,
dtstart: '2022-02-01',
until: '2028-06-01'
}
},
{
id: 321,
title: 'First Friday of every Third month',
color: 'pink',
rrule: {
freq: 'monthly',
interval: 3,
byweekday: [CALENDAR_ENUM.Friday],
bysetpos: 1,
dtstart: '2022-02-01',
until: '2028-06-01'
}
},
]
...
<FullCalendar
plugins={[dayGridPlugin, timeGridPlugin, interactionPlugin, rrulePlugin]}
headerToolbar={{
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay'
}}
initialView='dayGridMonth'
editable={true}
selectable={true}
selectMirror={true}
dayMaxEvents={true}
initialEvents={INITIAL_EVENTS}
select={createEventFromSelectedDate}
eventContent={renderEventContent}
eventClick={showHideAddEventHandler}
eventsSet={handleEvents}
/>
Unfortunately it seems that out of the box, FullCalendar and RRulePlugin do not have such a solution, or I have not found it. So basic filtering and mapping is the way to go.
let todayStr = new Date().toISOString().replace(/T.*$/, '')
useEffect(() => {
let calendarApi = calendarRef.current.getApi();
let events = calendarApi.getEvents(); // Get calendar events
let calendarEvents = events.map(i => i.toPlainObject()); // Convert to raw object
let filteredEvents = calendarEvents.filter(i => i.start >= todayStr); // filter against todays date
let sorted = filteredEvents.sort((a, b) => a.start.localeCompare(b.start)); // Sort
console.log(sorted.slice(0, 4)); // return
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [calendarRef]);