DEV Community

Cover image for Day 22: Building a Workspace-Centric Calendar System
Nader Fkih Hassen
Nader Fkih Hassen

Posted on

Day 22: Building a Workspace-Centric Calendar System

๐Ÿ—“๏ธ Why Calendars Matter in a Lawyer Management System
Lura, the app weโ€™re building during my internship, is built around workspaces where legal professionals manage cases, documents, and more. One thing they all needed? A centralized, collaborative calendar.

But itโ€™s not just about putting dates on a page โ€” itโ€™s about communication, accountability, and structure.

๐Ÿ’ก Feature Goals for the Calendar:

  • Create and edit case-related events (meetings, court dates, deadlines)
  • Events should be linked to a workspace, not globally shared
  • Only workspace members can view and manage their calendar
  • Support recurring events (future enhancement)
  • Simple, intuitive UI

๐Ÿ”ง Technical Breakdown
๐Ÿ“ฆ Backend (NestJS + Prisma)
Created an Event model:

ts
model Event {
  id          String   @id @default(uuid())
  title       String
  description String?
  date        DateTime
  workspaceId String
  createdBy   String
  createdAt   DateTime @default(now())
}
Enter fullscreen mode Exit fullscreen mode
  • Added routes for:

    • POST /events: Create a new event
    • GET /workspaces/:id/events: List events per workspace
    • PUT /events/๐Ÿ†” Edit event
    • DELETE /events/๐Ÿ†” Delete event
  • Used class-validator to handle input DTOs with proper date formatting.

๐Ÿ’ป Frontend (Next.js + FullCalendar)

  • Integrated FullCalendar to render a beautiful, interactive calendar.
  • Used React hooks and context to handle user roles and event permissions.
  • Built a modal form to add/edit events and hook into API routes.
tsx
const handleSubmit = async () => {
  const res = await fetch('/api/events', {
    method: 'POST',
    body: JSON.stringify({ title, date }),
    headers: { 'Content-Type': 'application/json' },
  });
  const data = await res.json();
  mutate(); // refresh event list
};
Enter fullscreen mode Exit fullscreen mode

๐Ÿ” Role-Based Access

  • Only workspace members can view/edit calendar events.
  • Admins and Super Admins can delete any event.
  • Used middleware on the backend to validate token and role on each action.

โœ… Key Takeaways

  • ๐Ÿ“† Calendars look simple but hide lots of edge cases (time zones, ownership, validation).
  • ๐Ÿ‘จโ€๐Ÿ’ป FullCalendar is a powerful library, but integrating with custom APIs takes care.
  • ๐Ÿ” Role-based logic really adds value to team collaboration features.
  • ๐Ÿง  Legal apps need precision and traceability โ€” even in UI elements like calendars.

โ“Question for You
How do you usually handle shared calendar systems in your apps? Do you prefer an in-app solution or integrations like Google Calendar?

Thanks for following along this journey โ€” weโ€™re nearing the finish line! ๐Ÿ’ช
Stay tuned for Day 23.

Top comments (0)