Static Fullcalendar visible

client/src/components/App.js

@@ -5,6 +5,7 @@ import { Switch, Route } from 'react-router-dom';
 // import ProductList from './ProductList';
 import AppointmentList from './AppointmentList';
 import Login from './Login';
+import Calendar from './Calendar';
 
 const App = () => {
   return (
@@ -16,6 +17,7 @@ const App = () => {
           <Route exact path="/" component={AppointmentList} />
           <Route exact path="/create" component={CreateAppointment} />
           <Route exact path="/login" component={Login} />
+          <Route exact path="/calendar" component={Calendar} />
         </Switch>
       </div>
     </div>

client/src/components/AppointmentList.js

@@ -7,8 +7,6 @@ export const APPOINTMENTS_QUERY = gql`
     allAppointments{
       title
       description
-      # dateStart
-      # dateEnd
       timeStart
       timeEnd
     }

client/src/components/Calendar.js

@@ -0,0 +1,45 @@
+import React from 'react'
+import FullCalendar from '@fullcalendar/react'
+import dayGridPlugin from '@fullcalendar/daygrid'
+import interactionPlugin from "@fullcalendar/interaction";
+import { useQuery, gql } from '@apollo/client';
+import { APPOINTMENTS_QUERY } from './AppointmentList';
+
+// function renderEventContent() {
+//     const { loading, error, data } = useQuery(APPOINTMENTS_QUERY, {
+//         variables: { language: 'english' },
+//     });
+//     if (loading) return <p>Loading ...</p>;
+
+//     return (
+//         <>
+//             <b>{eventInfo.timeText}</b>
+//             <i>{eventInfo.event.title}</i>
+//         </>
+//     )
+//     // return <h1>Hello {data.greeting.message}!</h1>;
+// }
+
+export default class Calendar extends React.Component {
+
+    handleDateClick = (arg) => { // bind with an arrow function
+        alert(arg.dateStr)
+    }
+
+    render() {
+
+        return (
+            <FullCalendar
+                plugins={[dayGridPlugin, interactionPlugin]}
+                initialView="dayGridMonth"
+                weekends={true}
+                eventClick={this.handleDateClick}
+                // eventContent={renderEventContent}
+                events={[
+                    { title: 'event 1', start: '2021-01-03 13:45:00', end: '2021-01-03 16:15:00' },
+                    { title: 'event 2', start: '2021-01-05 09:00:00', end: '2021-01-03 10:30:00' }
+                ]}
+            />
+        )
+    }
+}

client/src/index.js

@@ -15,7 +15,7 @@ import {
 } from '@apollo/client';
 
 const httpLink = createHttpLink({
-  uri: 'http://localhost:4000/graphql'
+  uri: 'http://localhost:4000/djhb58fytkh476dk45yh49'
 });
 
 const authLink = setContext((_, { headers }) => {