Add calendar feature with mini widget and full page

fusion94 · claude · fusion94 · commit f3c1c6f134ca · 2026-02-10T09:56:59.000-06:00
Adds a community/personal event system with a sidebar mini calendar
showing event dots, and a full calendar page with month grid, event
chips, create/edit/delete dialogs, and clickable Zoom URLs. Includes
server-side CRUD endpoints with auth and visibility filtering. Seeds
11 recurring Monthly UG Zoom Call events (2nd Tue, Feb–Dec 2026).

Co-Authored-By: Claude Opus 4.6 &lt;noreply@anthropic.com&gt;
diff --git a/server/index.js b/server/index.js
@@ -102,6 +102,22 @@ db.exec(`
   )
 `);
 
+// Create calendar_events table
+db.exec(`
+  CREATE TABLE IF NOT EXISTS calendar_events (
+    id INTEGER PRIMARY KEY AUTOINCREMENT,
+    title TEXT NOT NULL,
+    event_date TEXT NOT NULL,
+    event_time TEXT,
+    description TEXT DEFAULT '',
+    location TEXT DEFAULT '',
+    visibility TEXT NOT NULL DEFAULT 'personal',
+    created_by TEXT NOT NULL,
+    created_at INTEGER NOT NULL,
+    updated_at INTEGER NOT NULL
+  )
+`);
+
 app.use(cors());
 app.use(express.json());
 app.use('/uploads', express.static(uploadsDir));
@@ -573,6 +589,106 @@ app.delete('/api/admin/invite/:token', requireAdmin, (req, res) => {
   res.json({ success: true });
 });
 
+// Calendar Events: List events for a month
+app.get('/api/events', requireAuth, (req, res) => {
+  const { month } = req.query; // YYYY-MM
+  if (!month || !/^\d{4}-\d{2}$/.test(month)) {
+    return res.status(400).json({ error: 'month query param required in YYYY-MM format' });
+  }
+  const startDate = `${month}-01`;
+  const endDate = `${month}-31`;
+  const events = db.prepare(
+    `SELECT * FROM calendar_events
+     WHERE event_date >= ? AND event_date <= ?
+       AND (visibility = 'community' OR created_by = ?)
+     ORDER BY event_date, event_time`
+  ).all(startDate, endDate, req.user.username);
+  res.json(events);
+});
+
+// Calendar Events: Get single event
+app.get('/api/events/:id', requireAuth, (req, res) => {
+  const event = db.prepare('SELECT * FROM calendar_events WHERE id = ?').get(req.params.id);
+  if (!event) {
+    return res.status(404).json({ error: 'Event not found' });
+  }
+  if (event.visibility === 'personal' && event.created_by !== req.user.username) {
+    return res.status(403).json({ error: 'Access denied' });
+  }
+  res.json(event);
+});
+
+// Calendar Events: Create
+app.post('/api/events', requireAuth, (req, res) => {
+  const { title, event_date, event_time, description, location, visibility } = req.body;
+  if (!title || !event_date) {
+    return res.status(400).json({ error: 'title and event_date are required' });
+  }
+  if (visibility && !['community', 'personal'].includes(visibility)) {
+    return res.status(400).json({ error: 'visibility must be community or personal' });
+  }
+  const now = Date.now();
+  const result = db.prepare(
+    `INSERT INTO calendar_events (title, event_date, event_time, description, location, visibility, created_by, created_at, updated_at)
+     VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?)`
+  ).run(
+    title,
+    event_date,
+    event_time || null,
+    description || '',
+    location || '',
+    visibility || 'personal',
+    req.user.username,
+    now,
+    now
+  );
+  const event = db.prepare('SELECT * FROM calendar_events WHERE id = ?').get(result.lastInsertRowid);
+  res.json(event);
+});
+
+// Calendar Events: Update
+app.put('/api/events/:id', requireAuth, (req, res) => {
+  const event = db.prepare('SELECT * FROM calendar_events WHERE id = ?').get(req.params.id);
+  if (!event) {
+    return res.status(404).json({ error: 'Event not found' });
+  }
+  if (event.created_by !== req.user.username) {
+    return res.status(403).json({ error: 'Only the event creator can edit' });
+  }
+  const { title, event_date, event_time, description, location, visibility } = req.body;
+  if (visibility && !['community', 'personal'].includes(visibility)) {
+    return res.status(400).json({ error: 'visibility must be community or personal' });
+  }
+  db.prepare(
+    `UPDATE calendar_events SET title = ?, event_date = ?, event_time = ?, description = ?, location = ?, visibility = ?, updated_at = ?
+     WHERE id = ?`
+  ).run(
+    title !== undefined ? title : event.title,
+    event_date !== undefined ? event_date : event.event_date,
+    event_time !== undefined ? (event_time || null) : event.event_time,
+    description !== undefined ? description : event.description,
+    location !== undefined ? location : event.location,
+    visibility !== undefined ? visibility : event.visibility,
+    Date.now(),
+    req.params.id
+  );
+  const updated = db.prepare('SELECT * FROM calendar_events WHERE id = ?').get(req.params.id);
+  res.json(updated);
+});
+
+// Calendar Events: Delete
+app.delete('/api/events/:id', requireAuth, (req, res) => {
+  const event = db.prepare('SELECT * FROM calendar_events WHERE id = ?').get(req.params.id);
+  if (!event) {
+    return res.status(404).json({ error: 'Event not found' });
+  }
+  if (event.created_by !== req.user.username && !req.user.isAdmin) {
+    return res.status(403).json({ error: 'Only the creator or admin can delete' });
+  }
+  db.prepare('DELETE FROM calendar_events WHERE id = ?').run(req.params.id);
+  res.json({ success: true });
+});
+
 app.listen(PORT, () => {
   console.log(`SH Underground API running on port ${PORT}`);
 });
diff --git a/src/App.jsx b/src/App.jsx
@@ -7,6 +7,7 @@ import Register from './pages/Register';
 import Profile from './pages/Profile';
 import MapView from './pages/MapView';
 import AdminDashboard from './pages/AdminDashboard';
+import CalendarPage from './pages/CalendarPage';
 
 function App() {
   return (
@@ -25,6 +26,7 @@ function App() {
         <Route index element={<Navigate to="/app/profile" replace />} />
         <Route path="profile" element={<Profile />} />
         <Route path="map" element={<MapView />} />
+        <Route path="calendar" element={<CalendarPage />} />
         <Route path="admin" element={<AdminDashboard />} />
       </Route>
       <Route path="*" element={<Navigate to="/" replace />} />
diff --git a/src/api.js b/src/api.js
@@ -210,4 +210,64 @@ export const api = {
     }
     return res.json();
   },
+
+  async getEvents(month) {
+    const res = await fetch(`${API_BASE}/events?month=${month}`, {
+      headers: getAuthHeaders(),
+    });
+    if (!res.ok) {
+      const data = await res.json();
+      throw new Error(data.error || 'Failed to get events');
+    }
+    return res.json();
+  },
+
+  async getEvent(id) {
+    const res = await fetch(`${API_BASE}/events/${id}`, {
+      headers: getAuthHeaders(),
+    });
+    if (!res.ok) {
+      const data = await res.json();
+      throw new Error(data.error || 'Failed to get event');
+    }
+    return res.json();
+  },
+
+  async createEvent(eventData) {
+    const res = await fetch(`${API_BASE}/events`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json', ...getAuthHeaders() },
+      body: JSON.stringify(eventData),
+    });
+    if (!res.ok) {
+      const data = await res.json();
+      throw new Error(data.error || 'Failed to create event');
+    }
+    return res.json();
+  },
+
+  async updateEvent(id, eventData) {
+    const res = await fetch(`${API_BASE}/events/${id}`, {
+      method: 'PUT',
+      headers: { 'Content-Type': 'application/json', ...getAuthHeaders() },
+      body: JSON.stringify(eventData),
+    });
+    if (!res.ok) {
+      const data = await res.json();
+      throw new Error(data.error || 'Failed to update event');
+    }
+    return res.json();
+  },
+
+  async deleteEvent(id) {
+    const res = await fetch(`${API_BASE}/events/${id}`, {
+      method: 'DELETE',
+      headers: getAuthHeaders(),
+    });
+    if (!res.ok) {
+      const data = await res.json();
+      throw new Error(data.error || 'Failed to delete event');
+    }
+    return res.json();
+  },
 };
diff --git a/src/components/Layout.jsx b/src/components/Layout.jsx
@@ -3,6 +3,7 @@ import { Outlet, useNavigate, useLocation } from 'react-router-dom';
 import {
   AppBar,
   Box,
+  Divider,
   Drawer,
   IconButton,
   List,
@@ -19,9 +20,11 @@ import {
 import MenuIcon from '@mui/icons-material/Menu';
 import PersonIcon from '@mui/icons-material/Person';
 import MapIcon from '@mui/icons-material/Map';
+import CalendarMonthIcon from '@mui/icons-material/CalendarMonth';
 import LogoutIcon from '@mui/icons-material/Logout';
 import AdminPanelSettingsIcon from '@mui/icons-material/AdminPanelSettings';
 import { useAuth } from '../contexts/AuthContext';
+import MiniCalendar from './MiniCalendar';
 
 const drawerWidth = 240;
 
@@ -32,6 +35,7 @@ function Layout() {
   const menuItems = [
     { text: 'Profile', icon: <PersonIcon />, path: '/app/profile' },
     { text: 'Map View', icon: <MapIcon />, path: '/app/map' },
+    { text: 'Calendar', icon: <CalendarMonthIcon />, path: '/app/calendar' },
     ...(isAdmin ? [{ text: 'Admin', icon: <AdminPanelSettingsIcon />, path: '/app/admin' }] : []),
   ];
   const navigate = useNavigate();
@@ -81,6 +85,8 @@ function Layout() {
           </ListItem>
         ))}
       </List>
+      <Divider />
+      <MiniCalendar />
     </Box>
   );
 
diff --git a/src/components/MiniCalendar.jsx b/src/components/MiniCalendar.jsx
@@ -0,0 +1,102 @@
+import { useState, useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { Box, IconButton, Typography } from '@mui/material';
+import ChevronLeftIcon from '@mui/icons-material/ChevronLeft';
+import ChevronRightIcon from '@mui/icons-material/ChevronRight';
+import { api } from '../api';
+
+const DAYS = ['S', 'M', 'T', 'W', 'T', 'F', 'S'];
+
+function MiniCalendar() {
+  const navigate = useNavigate();
+  const today = new Date();
+  const [year, setYear] = useState(today.getFullYear());
+  const [month, setMonth] = useState(today.getMonth());
+  const [eventDays, setEventDays] = useState(new Set());
+
+  const monthStr = `${year}-${String(month + 1).padStart(2, '0')}`;
+
+  useEffect(() => {
+    api.getEvents(monthStr).then((events) => {
+      const days = new Set(events.map((e) => parseInt(e.event_date.split('-')[2], 10)));
+      setEventDays(days);
+    }).catch(() => {});
+  }, [monthStr]);
+
+  const prevMonth = () => {
+    if (month === 0) { setYear(year - 1); setMonth(11); }
+    else setMonth(month - 1);
+  };
+  const nextMonth = () => {
+    if (month === 11) { setYear(year + 1); setMonth(0); }
+    else setMonth(month + 1);
+  };
+
+  const firstDay = new Date(year, month, 1).getDay();
+  const daysInMonth = new Date(year, month + 1, 0).getDate();
+  const cells = [];
+  for (let i = 0; i < firstDay; i++) cells.push(null);
+  for (let d = 1; d <= daysInMonth; d++) cells.push(d);
+
+  const isToday = (d) =>
+    d && year === today.getFullYear() && month === today.getMonth() && d === today.getDate();
+
+  const handleClick = (d) => {
+    if (!d) return;
+    const dateStr = `${year}-${String(month + 1).padStart(2, '0')}-${String(d).padStart(2, '0')}`;
+    navigate(`/app/calendar?date=${dateStr}`);
+  };
+
+  const monthName = new Date(year, month).toLocaleString('default', { month: 'long' });
+
+  return (
+    <Box sx={{ px: 1.5, py: 1 }}>
+      <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', mb: 0.5 }}>
+        <IconButton size="small" onClick={prevMonth}><ChevronLeftIcon fontSize="small" /></IconButton>
+        <Typography variant="caption" sx={{ fontWeight: 'bold', fontSize: '0.75rem' }}>
+          {monthName} {year}
+        </Typography>
+        <IconButton size="small" onClick={nextMonth}><ChevronRightIcon fontSize="small" /></IconButton>
+      </Box>
+      <Box sx={{ display: 'grid', gridTemplateColumns: 'repeat(7, 1fr)', gap: '1px', textAlign: 'center' }}>
+        {DAYS.map((d, i) => (
+          <Typography key={i} variant="caption" sx={{ fontSize: '0.65rem', color: 'text.secondary', lineHeight: '20px' }}>
+            {d}
+          </Typography>
+        ))}
+        {cells.map((d, i) => (
+          <Box
+            key={i}
+            onClick={() => handleClick(d)}
+            sx={{
+              width: 28,
+              height: 28,
+              display: 'flex',
+              flexDirection: 'column',
+              alignItems: 'center',
+              justifyContent: 'center',
+              cursor: d ? 'pointer' : 'default',
+              borderRadius: '50%',
+              border: isToday(d) ? '2px solid' : '2px solid transparent',
+              borderColor: isToday(d) ? 'primary.main' : 'transparent',
+              position: 'relative',
+              '&:hover': d ? { bgcolor: 'action.hover' } : {},
+            }}
+          >
+            <Typography variant="caption" sx={{ fontSize: '0.7rem', lineHeight: 1 }}>
+              {d || ''}
+            </Typography>
+            {d && eventDays.has(d) && (
+              <Box sx={{
+                width: 4, height: 4, borderRadius: '50%',
+                bgcolor: 'primary.main', position: 'absolute', bottom: 1,
+              }} />
+            )}
+          </Box>
+        ))}
+      </Box>
+    </Box>
+  );
+}
+
+export default MiniCalendar;
diff --git a/src/pages/CalendarPage.jsx b/src/pages/CalendarPage.jsx
