so I created a calendar wherein I need to show the current data in that day, like a filter function, but the problem I’m encountering right now, is I don’t know how can I pass the data from client side to server side in NextJS. What I’m trying to achieve is when the client press a certain day, it will pass to the backend.

Card.tsx

export default async function  Home() {
  const eventToday = await getDataNotDryRun()
  return (
    <div className="h-full flex max-h-[650px] overflow-y-auto flex-col gap-y-2 flex-grow ">
        <CardEvent data={eventToday} />
    </div>

)}

Now what I’m going to do is I need to pass it to my prisma.

export async function getDataHasDryRun(): Promise<Events[]> {
  try {
    const data = await db.appoinmentSchedule.findMany({
      where: {
        dateOfEvent: ????
      }
    });

    return data;
  } catch (error) {
    throw error
  }
}

Now what will happen is when I click to a certain date, that date will be pass to my prisma call and then it will render the card

Calendar

export function CalendarDemo() {
  const [date, setDate] = React.useState<Date | undefined>(new Date())
 
  return (
    <Calendar
      mode="single"
      selected={date}
      onSelect={setDate}
      className="rounded-md border"
    />
  )
}