Add a feature to link calendar events to their details page

[ATechAdventurer]

In this ticket, we will update the Index component to add a url property to each calendar event. This will allow users to click on a calendar event and navigate to its corresponding details page. The url property will be set as /events/{calEvent.id} where {calEvent.id} is the unique identifier of the event.

Index Component:

1. Locate the getServerSideProps function in the index.tsx file.

2. Modify the fullCalEvent object within the map function to include the url property. Set the url property to /events/{calEvent.id}:

export const getServerSideProps: GetServerSideProps = async () => {
  const events = await prisma.event.findMany({});
  const conformedEvents = events.map((calEvent) => {
    const fullCalEvent: EventInput = {
      title: calEvent.title,
      start: calEvent.startTime.toISOString(),
      end: calEvent.endTime.toISOString(),
      url: `/events/${calEvent.id}`,
    };
    return fullCalEvent;
  });
  return {
    props: {
      events: conformedEvents,
    },
  };
};

By adding the url property to each fullCalEvent object, clicking on a calendar event will now navigate the user to the corresponding event details page with the URL format /events/{calEvent.id}.