calendar page added. Still need to link events to page

components/event-calendar.js

@@ -0,0 +1,132 @@
+import React, { useState } from 'react';
+import { Container, Row, Col, Button } from 'react-bootstrap';
+
+const EventCalendar = () => {
+  const [currentDate, setCurrentDate] = useState(new Date());
+  const [selectedDate, setSelectedDate] = useState(null);
+
+  const daysOfWeek = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
+  const months = [
+    'January',
+    'February',
+    'March',
+    'April',
+    'May',
+    'June',
+    'July',
+    'August',
+    'September',
+    'October',
+    'November',
+    'December',
+  ];
+
+  const getDaysInMonth = () => {
+    const year = currentDate.getFullYear();
+    const month = currentDate.getMonth();
+    const daysInMonth = new Date(year, month + 1, 0).getDate();
+    return daysInMonth;
+  };
+
+  const handleDayClick = (day) => {
+    if (day !== '') {
+      setSelectedDate(new Date(currentDate.getFullYear(), currentDate.getMonth(), day));
+    }
+  };
+
+  const handleMonthChange = (direction) => {
+    const newMonth = currentDate.getMonth() + direction;
+    setCurrentDate(new Date(currentDate.getFullYear(), newMonth, 1));
+    setSelectedDate(null); // Reset the selectedDate when the month changes
+  };
+
+  const generateCalendar = () => {
+    const daysInMonth = getDaysInMonth();
+    const month = months[currentDate.getMonth()];
+    const year = currentDate.getFullYear();
+    const firstDay = new Date(year, currentDate.getMonth(), 1);
+    const dayOfWeek = firstDay.getDay(); // Adjust the day of the week
+
+    const days = [];
+    for (let i = 0; i < dayOfWeek; i++) {
+      days.push('');
+    }
+    for (let i = 1; i <= daysInMonth; i++) {
+      days.push(i);
+    }
+    while (days.length % 7 !== 0) {
+      days.push('');
+    }
+
+    const weeks = [];
+    let week = [];
+    for (let i = 0; i < days.length; i++) {
+      week.push(days[i]);
+      if ((i + 1) % 7 === 0) {
+        weeks.push(week);
+        week = [];
+      }
+    }
+    const cellStyle = {
+      width: '40px',
+      height: '40px',
+      cursor: 'pointer',
+      '@media (min-width: 768px)': {
+        height: '80px',
+      },
+    };
+
+    return (
+      <div>
+        <h2>
+          {month} {year}
+        </h2>
+        <table className="table table-bordered">
+          <thead>
+            <tr>
+              {daysOfWeek.map((day, index) => (
+                <th key={`header-${index}`} className="text-center" style={{ width: '40px', height: '40px' }}>
+                  {day}
+                </th>
+              ))}
+            </tr>
+          </thead>
+          <tbody>
+            {weeks.map((week, weekIndex) => (
+              <tr key={`week-${weekIndex}`}>
+                {week.map((day, dayIndex) => (
+                  <td
+                    key={`day-${weekIndex}-${dayIndex}`}
+                    className={`text-center position-relative ${selectedDate && selectedDate.getDate() === day ? 'bg-primary text-white' : ''}`}
+                    style={{ width: '40px', height: '70px', cursor: 'pointer' }}
+                    onClick={() => handleDayClick(day)}
+                  >
+                    {day !== '' && (
+                      <div className="day-number position-absolute" style={{ top: '2px', left: '2px', fontSize: '0.8rem' }}>
+                        {day}
+                      </div>
+                    )}
+                    {/* Placeholder for event names */}
+                    {day !== '' && <div style={{ marginTop: '0.5rem', fontSize: '0.6rem' }}>Event Name</div>}
+                  </td>
+                ))}
+              </tr>
+            ))}
+          </tbody>
+        </table>
+        <div>
+          <Button variant="primary" onClick={() => handleMonthChange(-1)}>
+            Previous
+          </Button>
+          <Button variant="primary" onClick={() => handleMonthChange(1)} className="ml-2">
+            Next
+          </Button>
+        </div>
+      </div>
+    );
+  };
+
+  return <div>{generateCalendar()}</div>;
+};
+
+export default EventCalendar;

components/nav/common.js

@@ -347,6 +347,17 @@ export function Sorts ({ sub, prefix, className }) {
             <Nav.Link eventKey='top' className={styles.navLink}>top</Nav.Link>
           </Link>
         </Nav.Item>}
+      {sub !== 'jobs' &&
+        <Nav.Item className={className}>
+          <Link
+            href={{
+              pathname: '/~/events',
+              query: { type: 'events', when: 'forever', sub }
+            }} as={prefix + '/events'} passHref legacyBehavior
+          >
+            <Nav.Link eventKey='top' className={styles.navLink}>events</Nav.Link>
+          </Link>
+        </Nav.Item>}
     </>
   )
 }

pages/~/events/index.js

@@ -0,0 +1,39 @@
+import Layout from '@/components/layout'
+import Items from '@/components/items'
+import EventCalendar from '@/components/event-calendar'
+import { getGetServerSideProps } from '@/api/ssrApollo'
+import RecentHeader from '@/components/recent-header'
+import { useRouter } from 'next/router'
+import { SUB_FULL, SUB_ITEMS } from '@/fragments/subs'
+import { COMMENT_TYPE_QUERY } from '@/lib/constants'
+import { useQuery } from '@apollo/client'
+import PageLoading from '@/components/page-loading'
+
+const staticVariables = { sort: 'recent' }
+const variablesFunc = vars =>
+  ({ includeComments: COMMENT_TYPE_QUERY.includes(vars.type), ...staticVariables, ...vars })
+export const getServerSideProps = getGetServerSideProps({
+  query: SUB_ITEMS,
+  variables: variablesFunc,
+  notFound: (data, vars) => vars.sub && !data.sub
+})
+
+export default function Index ({ ssrData }) {
+  const router = useRouter()
+  const variables = variablesFunc(router.query)
+  const { data } = useQuery(SUB_FULL, { variables })
+
+  if (!data && !ssrData) return <PageLoading />
+  const { sub } = data || ssrData
+
+  return (
+    <Layout sub={sub?.name}>
+      {/* <RecentHeader sub={sub} /> */}
+      <EventCalendar
+        ssrData={ssrData}
+        query={SUB_ITEMS}
+        variables={variables}
+      />
+    </Layout>
+  )
+}

styles/calendar.module.css

@@ -0,0 +1,20 @@
+.calendar-header {
+    width: 40px;
+    height: 40px;
+  }
+
+  .calendar-cell {
+    width: 40px;
+    height: 40px;
+    cursor: pointer;
+  }
+
+  @media (min-width: 768px) {
+    .calendar-header {
+      height: 80px;
+    }
+
+    .calendar-cell {
+      height: 80px;
+    }
+  }