to do calendar view

components/ToDoList.tsx

@@ -2,13 +2,17 @@
 import React, { useState } from 'react'
 import { Card, CardContent } from './ui/card'
 import { Tabs, TabsContent, TabsList, TabsTrigger } from './ui/tabs'
+import EventTaskCalendar from './events/EventTaskCalendar'
 
 interface Todo {
-    id: string
-    name: string
-    complete: boolean
-    dueDate?: string | null
-    notes?: string | null
+  id: string
+  name: string
+  complete: boolean
+  dueDate?: string | null
+  notes?: string | null
+  eventId: string
+  createdAt: string
+  updatedAt: string
 }
 
 interface Props {
@@ -195,8 +199,10 @@ export default function  ToDoList({ eventId, initialTodos, onUpdate }: Props) {
                         </div>
                     </TabsContent>
                     <TabsContent value='calendar'>
-                        <div className="grid grid-cols-7 gap-1 text-xs">
-                            
+                        <div className=''>
+                            <EventTaskCalendar
+                                todos={todos}
+                            />
                         </div>
                     </TabsContent>
                 </Tabs>

components/app-sidebar.tsx

@@ -19,9 +19,7 @@ import {
   IconUsers,
 } from "@tabler/icons-react"
 
-import { NavDocuments } from "@/components/nav-documents"
 import { NavMain } from "@/components/nav-main"
-import { NavSecondary } from "@/components/nav-secondary"
 import { NavUser } from "@/components/nav-user"
 import {
   Sidebar,
@@ -32,8 +30,8 @@ import {
   SidebarMenuButton,
   SidebarMenuItem,
 } from "@/components/ui/sidebar"
-import { useSession } from "next-auth/react"
 import Link from "next/link"
+import { UserContext } from "@/context/UserContext"
 
 const data = {
   navMain: [
@@ -138,8 +136,7 @@ const data = {
 }
 
 export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
-  const session = useSession()
-  const user = session.data?.user
+  const { currentUser } = React.useContext(UserContext)
   return (
     <Sidebar collapsible="offcanvas" {...props}>
       <SidebarHeader>
@@ -162,9 +159,9 @@ export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
         {/* <NavDocuments items={data.documents} />
         <NavSecondary items={data.navSecondary} className="mt-auto" /> */}
       </SidebarContent>
-      {session && (
+      {currentUser && (
         <SidebarFooter>
-          <NavUser user={user} />
+          <NavUser user={currentUser} />
         </SidebarFooter>
       )}
       

components/auth/Provider.tsx

@@ -0,0 +1,11 @@
+'use client'
+import { SessionProvider } from 'next-auth/react'
+import React from 'react'
+
+export default function Provider({ children }: { children: React.ReactNode }) {
+    return (
+        <SessionProvider>
+            {children}
+        </SessionProvider>
+    )
+}

components/events/EventDashboard.tsx

@@ -22,12 +22,13 @@ export default function EventDashboard({ event }: Props) {
         }
     }
 
+    console.log(todos)
+
     return (
         <div className='grid grid-cols-1 lg:grid-cols-3 gap-6'>
             <EventInfo event={event} />
             <div className='lg:col-span-2 space-y-4'>
                 <EventRsvpTracking eventGuests={event.eventGuests} />
-                {/* <EventToDoList tasks={event.todos} /> */}
                 <ToDoList 
                     eventId={event.id}
                     initialTodos={todos}

components/events/EventTaskCalendar.tsx

@@ -0,0 +1,35 @@
+import FullCalendar from '@fullcalendar/react'
+import dayGridPlugin from '@fullcalendar/daygrid' // a plugin!
+import type { EventInput } from '@fullcalendar/core'
+
+interface EventTodo {
+    id: string
+    name: string
+    complete: boolean
+    dueDate?: string | null
+    notes?: string | null
+    eventId: string
+    createdAt: string
+    updatedAt: string
+}
+
+export default function EventTaskCalendar({ todos }: { todos: EventTodo[] }) {
+    const calendarEvents: EventInput[] = todos
+        .filter(todo => !!todo.dueDate)
+        .map(todo => ({
+            id: todo.id,
+            title: todo.name,
+            start: todo.dueDate as string,
+            backgroundColor: todo.complete ? '#9ae6b4' : '#fbd38d',
+            borderColor: todo.complete ? '#38a169' : '#dd6b20',
+            allDay: true,
+        }))
+    return (
+        <FullCalendar
+            plugins={[ dayGridPlugin ]}
+            initialView="dayGridMonth"
+            height={650}
+            events={calendarEvents}
+        />
+    )
+}