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)