Recurring events in calendar

App Building
1

Has anyone been able to get recurring events to work in the retool calendar component?

2

Hello, could you offer more detail? screenshot?

3

We have events that recur until they are cancelled, so this is the solution I came up with. We will see if it works with scale. It would be great if there was a way to mark and event as recurring and then have an action item populate the recur events when some switches views. (If I am looking at my recurring events in September, they would populate in the next month only when, I click to view it)

const oneWeek = 7 * 24 * 60 * 60 * 1000;  // milliseconds in a week

let eventIds = [];
let first_lesson = [];
let eventTitles = [];
let endTimes = [];
let groupIds = [];

const studentFirstNames = {{calq.data.student_fname}};
const studentLastNames = {{calq.data.student_lname}};
const openingTimesTo = {{calq.data.opening_time_to}};
const groupIdsByIndex = {{calq.data.opening_teacher}};

{{calq.data.first_lesson}}.forEach((dateStr, idx) => {
    let currentEventDate = new Date(dateStr);
    const endOfTheYear = new Date(currentEventDate.getFullYear() + 1, 0, 1); // January 1 of the next year

    const eventTitle = `${studentFirstNames[idx]} ${studentLastNames[idx]}`;

    while (currentEventDate < endOfTheYear) {
        eventIds.push(eventIds.length);
        first_lesson.push(currentEventDate.toISOString());
        eventTitles.push(eventTitle);

        // Create the end time
        const [hours, minutes, seconds] = openingTimesTo[idx].split(":").map(Number);
        let endTime = new Date(currentEventDate);
        endTime.setHours(hours);
        endTime.setMinutes(minutes);
        endTime.setSeconds(seconds);
        endTimes.push(endTime.toISOString());

        // Push the group ID
        groupIds.push(groupIdsByIndex[idx]);

        currentEventDate = new Date(currentEventDate.getTime() + oneWeek);
    }
});

return {
    event_ids: eventIds,
    first_lesson: first_lesson,
    event_titles: eventTitles,
    end_times: endTimes,
    group_ids: groupIds
};
4

Hi there! It looks like this needs to be done programmatically, as you've demonstrated :thinking: Thanks for sharing your current solution!

I don't see an event handler for view changes, but you could have a query that is filtered for only events that happen during the components selected view & then have it re-trigger as the view changes

5

Tess thanks for getting back = )
Totally had some help from chatGPT on that one as you can tell ; )

That approach makes a lot of sense!

1 Like