-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Adds MonthCalendar.tsx using Fullcalendar with localizaiton integrat…
…ion. Still working on G cloud CalendarAPI integration.
- Loading branch information
Stephen Swanson
authored and
Stephen Swanson
committed
Aug 26, 2024
1 parent
455bb23
commit b55f0f8
Showing
8 changed files
with
338 additions
and
1 deletion.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,34 @@ | ||
| /* eslint-disable @typescript-eslint/no-unused-vars */ | ||
| // remove this later^ | ||
| import FullCalendar from "@fullcalendar/react"; | ||
| import dayGridPlugin from "@fullcalendar/daygrid"; | ||
| import resourceTimelinePlugin from "@fullcalendar/resource-timeline"; | ||
| import resourceTimeGridPlugin from "@fullcalendar/resource-timegrid"; | ||
| import interactionPlugin from "@fullcalendar/interaction"; | ||
| import { useLanguage } from "@/lib/LanguageContext"; | ||
| import fiLocale from "@fullcalendar/core/locales/fi"; | ||
| import svLocale from "@fullcalendar/core/locales/sv"; | ||
| import enLocale from "@fullcalendar/core/locales/en-gb"; | ||
|
|
||
| const MonthCalendar = () => { | ||
| 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="dayGridMonth" | ||
| locale={currentLocale} | ||
| /> | ||
| <div /> | ||
| </> | ||
| ); | ||
| }; | ||
|
|
||
| export default MonthCalendar; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,55 @@ | ||
| import Navbar, { NavbarProps } from "@/components/Navbar"; | ||
| import createClient from "@/lib/cmsClient"; | ||
| import styles from "@/styles/calendar.module.css"; | ||
| import { readItems } from "@directus/sdk"; | ||
| import { GetStaticProps } from "next"; | ||
| import Head from "next/head"; | ||
| import MonthCalendar from "@/components/MonthCalendar"; | ||
|
|
||
| export const getStaticProps: GetStaticProps<CalendarPageProps> = async () => { | ||
| const client = createClient(); | ||
| const links = await client.request(readItems("NavigationLink")); | ||
| return { | ||
| props: { | ||
| navBar: { | ||
| links, | ||
| }, | ||
| }, | ||
| }; | ||
| }; | ||
|
|
||
| type CalendarPageProps = { | ||
| navBar: NavbarProps; | ||
| }; | ||
|
|
||
| export default function News({ navBar }: CalendarPageProps) { | ||
| return ( | ||
| <> | ||
| <Head> | ||
| <title>Satakuntalainen Osakunta</title> | ||
| <link | ||
| rel="icon" | ||
| href="/new-sato-website/public/favicon.ico" | ||
| type="image/x-icon" | ||
| /> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | ||
| </Head> | ||
| <Navbar links={navBar.links} /> | ||
| <header className={styles.header}> | ||
| <div className={styles.headerContainer}> | ||
| <h1 className={styles.h1}>Kalenteri</h1> | ||
| <p className={styles.headerText}> | ||
| Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem odit | ||
| distinctio, ullam doloremque provident voluptas illo quaerat ex | ||
| saepe voluptate reiciendis rerum fuga obcaecati esse sit cum maxime, | ||
| dolorem facilis? | ||
| </p> | ||
| </div> | ||
| </header> | ||
| <main className={styles.main}> | ||
| <MonthCalendar /> | ||
| </main> | ||
| <footer className={styles.footer} /> | ||
| </> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,43 @@ | ||
| .main { | ||
| display: flex; | ||
| flex-direction: column; | ||
| justify-content: flex-start; | ||
| align-items: center; | ||
| } | ||
|
|
||
| .h3 { | ||
| font-size: 2rem; | ||
| font-weight: 600; | ||
| margin: 0.5rem 0; | ||
| color: var(--blue300); | ||
| font-family: "Raleway", sans-serif; | ||
| } | ||
|
|
||
| .header { | ||
| display: flex; | ||
| justify-content: center; | ||
| align-items: center; | ||
| padding: 5rem 0; | ||
| width: 100%; | ||
| background-color: var(--blue100); | ||
| margin-bottom: 5rem; | ||
| } | ||
|
|
||
| .headerContainer { | ||
| display: flex; | ||
| flex-direction: column; | ||
| justify-content: center; | ||
| align-items: center; | ||
| width: 70%; | ||
| } | ||
|
|
||
| .headerText { | ||
| width: 70%; | ||
| } | ||
|
|
||
| .footer { | ||
| width: 100%; | ||
| height: 20rem; | ||
| background-color: var(--blue300); | ||
| margin-top: 5rem; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters