How to Build a Event Calendar App with Replit

1// Prompt to type into Replit Agent:
2// Build a calendar app with Express and PostgreSQL using Drizzle ORM.
3// Create these tables in shared/schema.ts:
4// - calendars: id serial pk, user_id text not null, name text not null,
5//   color text not null default '#3B82F6',
6//   is_default boolean default false, created_at timestamp
7// - events: id serial pk, calendar_id integer references calendars,
8//   title text not null, description text, start_time timestamp not null,
9//   end_time timestamp not null, all_day boolean default false,
10//   location text, color text,
11//   recurrence_rule text (iCal RRULE format e.g. 'FREQ=WEEKLY;BYDAY=MO,WE'),
12//   recurrence_end date, recurrence_exception_date date (for single-instance edits),
13//   parent_event_id integer references events (for exception instances),
14//   created_by text not null, created_at timestamp, updated_at timestamp
15// - event_attendees: id serial pk, event_id integer references events,
16//   user_id text, email text not null,
17//   rsvp_status text default 'pending' (pending/accepted/declined/tentative),
18//   UNIQUE on (event_id, email)
19// - event_reminders: id serial pk, event_id integer references events,
20//   minutes_before integer not null default 30,
21//   method text default 'in_app' (in_app/email)
22// Install the rrule npm package. Set up Replit Auth. Bind server to 0.0.0.0.

1const { RRule, rrulestr } = require('rrule');
2const { db } = require('../db');
3const { events, calendars } = require('../../shared/schema');
4const { eq, and, lte, gte, sql } = require('drizzle-orm');
5
6router.get('/api/events', async (req, res) => {
7  const { start, end, calendarId } = req.query;
8  if (!start || !end) return res.status(400).json({ error: 'start and end query params required' });
9
10  const startDate = new Date(start);
11  const endDate = new Date(end);
12
13  const userCalendars = await db.query.calendars.findMany({
14    where: eq(calendars.userId, req.user.id)
15  });
16  const calendarIds = userCalendars.map(c => c.id);
17  if (calendarId) {
18    if (!calendarIds.includes(Number(calendarId))) {
19      return res.status(403).json({ error: 'Not your calendar' });
20    }
21  }
22
23  // Get all events that could appear in range
24  // Include events starting before range end AND
25  // recurring events that haven't ended before range start
26  const rawEvents = await db.execute(
27    sql`SELECT e.*, c.color AS calendar_color, c.name AS calendar_name
28        FROM events e
29        JOIN calendars c ON c.id = e.calendar_id
30        WHERE c.user_id = ${req.user.id}
31          AND (${calendarId ? sql`c.id = ${Number(calendarId)}` : sql`TRUE`})
32          AND e.parent_event_id IS NULL
33          AND (
34            (e.recurrence_rule IS NULL AND e.start_time < ${endDate.toISOString()} AND e.end_time > ${startDate.toISOString()})
35            OR
36            (e.recurrence_rule IS NOT NULL AND (e.recurrence_end IS NULL OR e.recurrence_end >= ${startDate.toISOString().split('T')[0]}))
37          )`
38  );
39
40  // Get exception instances (single edits of recurring events)
41  const exceptions = await db.execute(
42    sql`SELECT e.* FROM events e
43        JOIN calendars c ON c.id = e.calendar_id
44        WHERE c.user_id = ${req.user.id}
45          AND e.parent_event_id IS NOT NULL
46          AND e.start_time < ${endDate.toISOString()}
47          AND e.end_time > ${startDate.toISOString()}`
48  );
49
50  const exceptionDates = new Set(exceptions.rows.map(e => `${e.parent_event_id}-${e.recurrence_exception_date}`));
51
52  const result = [];
53
54  for (const event of rawEvents.rows) {
55    if (!event.recurrence_rule) {
56      result.push(event);
57      continue;
58    }
59
60    // Expand recurring event instances within the range
61    try {
62      const duration = new Date(event.end_time) - new Date(event.start_time);
63      const dtstart = new Date(event.start_time);
64      const ruleString = `DTSTART:${dtstart.toISOString().replace(/[-:.]/g, '').slice(0, 15)}Z\nRRULE:${event.recurrence_rule}`;
65      const rule = rrulestr(ruleString);
66      const instances = rule.between(startDate, endDate, true);
67
68      for (const instanceStart of instances) {
69        const dateKey = `${event.id}-${instanceStart.toISOString().split('T')[0]}`;
70        if (exceptionDates.has(dateKey)) continue; // skip — exception exists
71
72        result.push({
73          ...event,
74          id: `${event.id}-${instanceStart.toISOString()}`, // virtual ID for instances
75          start_time: instanceStart.toISOString(),
76          end_time: new Date(instanceStart.getTime() + duration).toISOString(),
77          is_recurring_instance: true,
78          master_event_id: event.id
79        });
80      }
81    } catch (err) {
82      console.error('RRULE parse error for event', event.id, err.message);
83    }
84  }
85
86  // Add exception instances
87  result.push(...exceptions.rows);
88
89  result.sort((a, b) => new Date(a.start_time) - new Date(b.start_time));
90  res.json(result);
91});

1// Prompt to type into Replit Agent:
2// Add these routes to server/routes/events.js:
3//
4// POST /api/events — create event
5//   Body: {calendarId, title, description, startTime, endTime, allDay,
6//          location, recurrenceRule, recurrenceEnd, attendeeEmails, reminders}
7//   Validate calendarId belongs to req.user.id
8//   Insert event row, then for each attendeeEmail:
9//     INSERT INTO event_attendees (event_id, email, rsvp_status='pending')
10//   For each reminder: INSERT INTO event_reminders (event_id, minutes_before, method)
11//   Return event with attendees
12//
13// PUT /api/events/:id — update entire event (non-recurring or all instances)
14//   Validate ownership via calendar join
15//   Update the event row, return updated event
16//
17// POST /api/events/:id/exception — edit single instance of recurring event
18//   Body: {instanceDate (the original date), title, startTime, endTime, description}
19//   Create a new event row with:
20//     parent_event_id = :id, recurrence_exception_date = instanceDate
21//     all other fields from the body
22//   The GET /api/events endpoint already checks exceptionDates to skip the original instance
23//
24// DELETE /api/events/:id — delete event (non-recurring)
25//   Cascades to attendees and reminders via ON DELETE CASCADE in schema
26//
27// POST /api/events/:id/rsvp — RSVP to event
28//   Body: {status: pending/accepted/declined/tentative}
29//   UPDATE event_attendees SET rsvp_status = status
30//   WHERE event_id = :id AND email = req.user.email
31//
32// GET /api/events/today — today's events for a widget
33//   Return events where start_time >= today 00:00 AND start_time < today+1 00:00

1// Prompt to type into Replit Agent:
2// Build the calendar frontend at client/src/pages/CalendarPage.jsx:
3//
4// 1. Install @fullcalendar/react, @fullcalendar/core, @fullcalendar/daygrid,
5//    @fullcalendar/timegrid, @fullcalendar/interaction via Replit package manager
6//
7// 2. Main CalendarPage component:
8//    - Import FullCalendar with plugins: dayGridPlugin, timeGridPlugin, interactionPlugin
9//    - initialView='dayGridMonth'
10//    - headerToolbar: { left: 'prev,next today', center: 'title',
11//      right: 'dayGridMonth,timeGridWeek,timeGridDay' }
12//    - events: async function that calls GET /api/events?start=X&end=Y with
13//      FullCalendar's start and end dates, returns the events array
14//    - eventClick: opens EventDetailModal with clicked event
15//    - dateClick: opens CreateEventModal with clicked date pre-filled
16//    - eventColor per calendar: color from calendar.color field
17//
18// 3. CreateEventModal:
19//    - Title input (required)
20//    - Date/time pickers for start and end
21//    - All-day toggle
22//    - Calendar selector (user's calendars)
23//    - Location input
24//    - Recurrence selector: None / Daily / Weekly (specific days) / Monthly
25//      When Weekly is selected, show day-of-week checkboxes (Mon-Sun)
26//      Build RRULE string: e.g. 'FREQ=WEEKLY;BYDAY=MO,WE,FR'
27//    - End recurrence date picker
28//    - Attendees: comma-separated email input
29//    - Submit → POST /api/events
30//
31// 4. Sidebar: list of user's calendars with color dot and visibility checkbox
32//    Toggle visibility hides/shows that calendar's events in FullCalendar

1// Prompt to type into Replit Agent:
2// Create scripts/sendReminders.js:
3// 1. Query events in the next 60 minutes:
4//    SELECT e.*, er.minutes_before, ea.email
5//    FROM events e
6//    JOIN event_reminders er ON er.event_id = e.id
7//    JOIN event_attendees ea ON ea.event_id = e.id
8//    WHERE er.method = 'email'
9//      AND e.start_time BETWEEN NOW() AND NOW() + interval '60 minutes'
10//      AND ea.rsvp_status != 'declined'
11// 2. For each result, check a sent_reminders table (create it: event_id, email,
12//    scheduled_at, sent_at) to avoid sending duplicates
13// 3. If not already sent, send reminder email via SendGrid:
14//    Subject: 'Reminder: {event.title} starts in {minutes_before} minutes'
15//    Body: event title, start time, location, join link if applicable
16// 4. Insert into sent_reminders to mark as sent
17//
18// Then deploy:
19// 1. Add SENDGRID_API_KEY and FROM_EMAIL to Replit Secrets (lock icon)
20// 2. Add SESSION_SECRET to Replit Secrets
21// 3. Ensure server/index.js binds to 0.0.0.0
22// 4. Deploy main app: Deploy → Autoscale
23// 5. Deploy reminder script: Deploy → Scheduled → every 15 minutes
24//    Command: node scripts/sendReminders.js