Add mulitple Google Calender IDs

[pono1012]

Hi there!

I’ve recently developed a feature to add a 'plus-button' that allows users to input multiple Google Calendar IDs. I would love to contribute this to the project!

However, I noticed that when I clone the repository or download the source from the latest release, I'm working with version 7.1.0...

Looking forward to your feedback!

[talentsache]

Hey @pono1012, thanks for this! Multiple Calendar IDs is something some users have been asking for.

You're right that the public source is at v7.1.0 - the latest release (v9.0.1) is binary-only. Source code stays a few versions behind intentionally (BSL-1.1 model).

That said, I'd love to see your implementation. Can you share a patch file, screenshots, or a description of how you approached it? If it fits cleanly, I can integrate it into the next release and credit you as a contributor.

For context, v9.0.1 has Google Calendar, Apple Calendar (CalDAV), and Outlook (Microsoft Graph) support built in. Your multi-ID addition would be a great enhancement on top of that.

[pono1012]

Here are the specific changes made:

1. Model Updates (apps/web/src/actions/calendar.ts)

Updated the CalendarConfig interface to accept an array of IDs while maintaining legacy compatibility.

// Line 11-13
export interface CalendarConfig {
    // Read-only mode: API Key only
    apiKey?: string;
    calendarId?: string;    // default: 'primary' (legacy)
    calendarIds?: string[]; // Array of extra calendar IDs

2. Concurrent Event Fetching (apps/web/src/actions/calendar.ts)

Refactored listCalendarEvents to map through all provided IDs and fetch the events using Promise.all().

// Line 99-122
let calIds = config.calendarIds && config.calendarIds.length > 0 
    ? config.calendarIds 
    : [config.calendarId || 'primary'];
calIds = calIds.map(id => encodeURIComponent(id.trim())).filter(id => id);
if (calIds.length === 0) calIds = ['primary'];

// ... setup headers ...

const allEvents: CalendarEvent[] = [];
const fetchPromises = calIds.map(async (calId) => {
    // Setup URL for current calId
    const resp = await fetch(url, { headers });
    const data = await resp.json();
    return data.items || [];
});

const results = await Promise.all(fetchPromises);
results.forEach(items => allEvents.push(...items));

allEvents.sort((a, b) => { // Sort chronologically 
    const timeA = new Date(a.start?.dateTime || a.start?.date || 0).getTime();
    return timeA - new Date(b.start?.dateTime || b.start?.date || 0).getTime();
});
return { success: true, events: allEvents };

(Note: createCalendarEvent, updateCalendarEvent, and deleteCalendarEvent (Lines 135, 167, 197) were also slightly adjusted to extract the primary ID correctly from calendarIds[0] to ensure write-operations continue working smoothly).

3. Dynamic UI List (apps/web/src/app/settings/page.tsx)

Replaced the single input field with a dynamic React map to manage the array along with an 'Add' and 'Remove' button.

// Line 4124-4152
<div className="mt-3 space-y-2">
    <div className="flex items-center justify-between">
        <label className="text-xs font-semibold" style={{ color: 'var(--text-secondary)' }}>Calendar IDs</label>
        <button type="button" onClick={() => setCalendarConfig(p => {
            const currentIds = p.calendarIds || (p.calendarId ? [p.calendarId] : ['']);
            return { ...p, calendarIds: [...currentIds, ''] };
        })} className="text-xs text-lime-500 hover:text-lime-400 font-medium">+ Add Calendar</button>
    </div>
    {(() => {
        const ids = calendarConfig.calendarIds || (calendarConfig.calendarId ? [calendarConfig.calendarId] : ['']);
        return ids.map((id, idx) => (
            <div key={idx} className="flex items-center gap-2">
                <input type="text" placeholder={idx === 0 ? "Calendar ID (default: primary)" : "Additional Calendar ID"}
                    value={id}
                    onChange={e => {
                        const newIds = [...ids];
                        newIds[idx] = e.target.value;
                        setCalendarConfig(p => ({ ...p, calendarIds: newIds, calendarId: newIds[0] }));
                    }}
                    className="flex-1 px-3 py-2 rounded-lg text-sm outline-none focus:ring-1 focus:ring-lime-500" />
                
                {ids.length > 1 && (
                    <button type="button" onClick={() => {
                        const newIds = ids.filter((_, i) => i !== idx);
                        setCalendarConfig(p => ({ ...p, calendarIds: newIds, calendarId: newIds[0] }));
                    }} className="p-2 text-red-500 transition-colors"><Trash2 size={14} /></button>
                )}
            </div>
        ));
    })()}
</div>

[talentsache]

@pono1012 This is really well done.
Clean implementation - backward compatible interface, concurrent fetching with Promise.all, and the dynamic UI with add/remove, is beautiful!

I'll integrate this into the next release and credit you as a contributor.

A few small things I'll adjust during integration:

• Error handling per calendar ID (if one fails, the others should still return)
• Rate limiting awareness (Google Calendar API has per-user quotas)

Thanks for putting in the work, I appreciate it a lot! You'll be in the contributors list, as a port Skales 🦎