Adds week veiw calendar to home page. Still needs to be styled

components/WeekCalendar.tsx

@@ -0,0 +1,31 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+// remove this later^
+import { useLanguage } from "@/lib/LanguageContext";
+import enLocale from "@fullcalendar/core/locales/en-gb";
+import fiLocale from "@fullcalendar/core/locales/fi";
+import svLocale from "@fullcalendar/core/locales/sv";
+import FullCalendar from "@fullcalendar/react";
+import dayGridPlugin from "@fullcalendar/timegrid";
+
+const WeekCalendar = () => {
+  const { language } = useLanguage();
+  const localeMap = {
+    fi: fiLocale,
+    sv: svLocale,
+    en: enLocale,
+  };
+  const currentLocale = localeMap[language] || enLocale;
+  return (
+    <>
+      <FullCalendar
+        schedulerLicenseKey={process.env.FULL_CALENDAR_KEY}
+        plugins={[dayGridPlugin]}
+        initialView="timeGridWeek"
+        locale={currentLocale}
+      />
+      <div />
+    </>
+  );
+};
+
+export default WeekCalendar;

package.json

@@ -26,6 +26,7 @@
     "@fullcalendar/resource": "^6.1.15",
     "@fullcalendar/resource-timegrid": "^6.1.15",
     "@fullcalendar/resource-timeline": "^6.1.15",
+    "@fullcalendar/timegrid": "^6.1.15",
     "@mui/material": "^5.15.20",
     "dotenv": "^16.4.5",
     "embla-carousel": "^8.1.6",

pages/index.tsx

@@ -1,7 +1,10 @@
 /* eslint-disable jsx-a11y/anchor-is-valid -- Disabled because of a lot of placeholder hrefs */
 import Carousel from "@/components/Carousel";
 import Navbar, { NavbarProps } from "@/components/Navbar";
+import WeekCalendar from "@/components/WeekCalendar";
+import createClient from "@/lib/cmsClient";
 import styles from "@/styles/Home.module.css";
+import { readItems } from "@directus/sdk";
 import {
   Button,
   Card,
@@ -16,8 +19,6 @@ import { GetStaticProps } from "next";
 import Head from "next/head";
 import Image from "next/image";
 import Link from "next/link";
-import createClient from "@/lib/cmsClient";
-import { readItems } from "@directus/sdk";
 import aino from "../public/aino.png";
 import arrowBlue from "../public/arrow_forward_blue.svg";
 import arrowWhite from "../public/arrow_forward_white.svg";
@@ -252,13 +253,13 @@ export default function Home({ navBar }: HomePageProps) {
         <section className={styles.calendarSection}>
           <span className={styles.sectionContainer}>
             <h2>Kalenteri</h2>
+            <WeekCalendar />
           </span>
         </section>
         {/* Carousel */}
         <section className={styles.karhunkierros}>
-          <h2>Osakuntalehti Karhunkierros</h2>
-
           <span className={styles.carouselContainer}>
+            <h2>Osakuntalehti Karhunkierros</h2>
             <Carousel slides={SLIDES} options={OPTIONS} />
           </span>
         </section>

styles/Home.module.css

@@ -146,7 +146,6 @@
 .calendarSection {
   background-color: var(--pink);
   width: 100%;
-  height: 50rem;
   display: flex;
   justify-content: center;
   align-items: center;
@@ -160,16 +159,21 @@
 
 /* Carousel */
 .karhunkierros {
-  width: 70%;
+  width: 100%;
   display: flex;
-  flex-direction: column;
   justify-content: center;
-  align-items: flex-start;
-  margin: 5rem 0 5rem 0;
+  align-items: center;
+  margin: 5rem 0;
 }
 
 .carouselContainer {
+  width: 70%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-start;
   margin: 1rem 0 1rem 0;
+  gap: 1rem;
 }
 
 /* Contact */

styles/globals.css

@@ -152,7 +152,7 @@ dd {
 
 /* Month calendar */
 .fc {
-  width: 70%;
+  width: 100%;
   height: auto;
 }