Skip to content

Commit

Permalink
Updates week calendar styling on homepage
Browse files Browse the repository at this point in the history
  • Loading branch information
@YB-BigSwan
YB-BigSwan committed Sep 20, 2024
1 parent 2daed1e commit ea295ac
Show file tree
Hide file tree
Showing 6 changed files with 126 additions and 137 deletions.
47 changes: 33 additions & 14 deletions components/WeekCalendar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,8 +21,27 @@ const WeekCalendar = () => {
const [minTime, setMinTime] = useState("12:00:00");
const [maxTime, setMaxTime] = useState("24:00:00");

const eventSources = [
{
googleCalendarId: process.env.NEXT_PUBLIC_CALENDAR_ID_1,
googleCalendarApiKey: process.env.NEXT_PUBLIC_GOOGLE_API_KEY,
className: "gcal-1",
},
{
googleCalendarId: process.env.NEXT_PUBLIC_CALENDAR_ID_2,
googleCalendarApiKey: process.env.NEXT_PUBLIC_GOOGLE_API_KEY,
className: "gcal-2",
},
{
googleCalendarId: process.env.NEXT_PUBLIC_CALENDAR_ID_3,
googleCalendarApiKey: process.env.NEXT_PUBLIC_GOOGLE_API_KEY,
className: "gcal-3",
},
];

// there was way too much empty space, mostly before any events,
// this should cut that out and leave a 2hr bufer on either side
// eslint-disable-next-line react-hooks/exhaustive-deps
const adjustTimeRange = useCallback(
debounce((events: EventApi[]) => {
if (events.length > 0) {
Expand All @@ -45,26 +64,26 @@ const WeekCalendar = () => {
<>
<FullCalendar
plugins={[dayGridPlugin, googleCalendarPlugin]}
eventSources={[
{
googleCalendarId: process.env.NEXT_PUBLIC_CALENDAR_ID_1,
googleCalendarApiKey: process.env.NEXT_PUBLIC_GOOGLE_API_KEY,
},
{
googleCalendarId: process.env.NEXT_PUBLIC_CALENDAR_ID_2,
googleCalendarApiKey: process.env.NEXT_PUBLIC_GOOGLE_API_KEY,
},
{
googleCalendarId: process.env.NEXT_PUBLIC_CALENDAR_ID_3,
googleCalendarApiKey: process.env.NEXT_PUBLIC_GOOGLE_API_KEY,
},
]}
eventSources={eventSources}
initialView="timeGridWeek"
locale={currentLocale}
slotMinTime={minTime}
slotMaxTime={maxTime}
eventsSet={adjustTimeRange}
contentHeight="auto"
allDaySlot={false}
eventClick={(info) => {
// Prevent the default behavior of navigating to Google Calendar
info.jsEvent.preventDefault(); // Prevent the default click behavior
}}
views={{
timeGridWeek: {
dayHeaderFormat: {
weekday: "short",
day: "2-digit",
},
},
}}
/>
<div />
</>
Expand Down
50 changes: 36 additions & 14 deletions package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

6 changes: 4 additions & 2 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@
"@directus/sdk": "^17.0.0",
"@emotion/react": "^11.11.4",
"@emotion/styled": "^11.11.5",
"@fullcalendar/bootstrap5": "^6.1.15",
"@fullcalendar/core": "^6.1.15",
"@fullcalendar/daygrid": "^6.1.15",
"@fullcalendar/google-calendar": "^6.1.15",
Expand All @@ -29,9 +30,10 @@
"@fullcalendar/resource-timeline": "^6.1.15",
"@fullcalendar/timegrid": "^6.1.15",
"@mui/material": "^5.15.20",
"@types/react-bootstrap": "^0.32.37",
"dotenv": "^16.4.5",
"embla-carousel": "^8.1.6",
"embla-carousel-react": "^8.1.6",
"embla-carousel": "^8.3.0",
"embla-carousel-react": "^8.3.0",
"formik": "^2.4.6",
"next": "^14.2.12",
"prop-types": "^15.8.1",
Expand Down
113 changes: 9 additions & 104 deletions pages/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,20 +6,11 @@ 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,
CardActionArea,
CardActions,
CardContent,
CardMedia,
Typography,
} from "@mui/material";
import { Button } from "@mui/material";
import { EmblaOptionsType } from "embla-carousel";
import { GetStaticProps } from "next";
import Head from "next/head";
import Image from "next/image";
import Link from "next/link";
import aino from "../public/aino.png";
import cAside from "../public/contact-aside.png";

Expand Down Expand Up @@ -84,6 +75,13 @@ export default function Home({ navBar }: HomePageProps) {
altText="Placeholder image"
href=""
/>
<VerticalCard
variant="yellow"
image="/Placeholder_1.png"
title="Uutiset"
altText="Placeholder image"
href=""
/>
</section>
{/* Living Info */}
<section className={styles.livingInfo}>
Expand Down Expand Up @@ -118,100 +116,7 @@ export default function Home({ navBar }: HomePageProps) {
</Button>
</article>
</section>
{/* News */}
<section className={styles.news}>
<h2>Uutisia</h2>
<span className={styles.cardContainer}>
<Card className={styles.newsCard}>
<CardActionArea>
<CardMedia
height={250}
component="img"
image="https://lh5.googleusercontent.com/bDp4TqmugenBz4t8K9J4PfQkJbnEzwef49kbULsCaJ-7BY4VZ0Jg0I4V7SYcvb4lFISHnvjeYm1ARN4WVsoRUwdEcAwB9_ogpPV90CBlRMeAkFns7XDevbB3kKlTrwlvZQ=w1280"
alt="Satakuntalainen Osakunta"
/>
<CardContent className={styles.newsCardContent}>
<Typography className={styles.cardTitle}>Title</Typography>
<Typography className={styles.cardDescription}>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Itaque, numquam magnam, eum nihil adipisci tenetur quasi vel
minima nemo ratione molestiae in ab laborum perferendis
beatae impedit dolorem iusto sunt.
</Typography>
</CardContent>
</CardActionArea>
<CardActions className={styles.cardLink}>
<Link href="" />
</CardActions>
</Card>
<Card className={styles.newsCard}>
<CardActionArea>
<CardMedia
height={250}
component="img"
image="https://lh5.googleusercontent.com/bDp4TqmugenBz4t8K9J4PfQkJbnEzwef49kbULsCaJ-7BY4VZ0Jg0I4V7SYcvb4lFISHnvjeYm1ARN4WVsoRUwdEcAwB9_ogpPV90CBlRMeAkFns7XDevbB3kKlTrwlvZQ=w1280"
alt="Satakuntalainen Osakunta"
/>
<CardContent className={styles.newsCardContent}>
<Typography className={styles.cardTitle}>Title</Typography>
<Typography className={styles.cardDescription}>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Itaque, numquam magnam, eum nihil adipisci tenetur quasi vel
minima nemo ratione molestiae in ab laborum perferendis
beatae impedit dolorem iusto sunt.
</Typography>
</CardContent>
</CardActionArea>
<CardActions className={styles.cardLink}>
<Link href="" />
</CardActions>
</Card>
<Card className={styles.newsCard}>
<CardActionArea>
<CardMedia
height={250}
component="img"
image="https://lh5.googleusercontent.com/bDp4TqmugenBz4t8K9J4PfQkJbnEzwef49kbULsCaJ-7BY4VZ0Jg0I4V7SYcvb4lFISHnvjeYm1ARN4WVsoRUwdEcAwB9_ogpPV90CBlRMeAkFns7XDevbB3kKlTrwlvZQ=w1280"
alt="Satakuntalainen Osakunta"
/>
<CardContent className={styles.newsCardContent}>
<Typography className={styles.cardTitle}>Title</Typography>
<Typography className={styles.cardDescription}>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Itaque, numquam magnam, eum nihil adipisci tenetur quasi vel
minima nemo ratione molestiae in ab laborum perferendis
beatae impedit dolorem iusto sunt.
</Typography>
</CardContent>
</CardActionArea>
<CardActions className={styles.cardLink}>
<Link href="" />
</CardActions>
</Card>
<Card className={styles.newsCard}>
<CardActionArea>
<CardMedia
height={250}
component="img"
image="https://lh5.googleusercontent.com/bDp4TqmugenBz4t8K9J4PfQkJbnEzwef49kbULsCaJ-7BY4VZ0Jg0I4V7SYcvb4lFISHnvjeYm1ARN4WVsoRUwdEcAwB9_ogpPV90CBlRMeAkFns7XDevbB3kKlTrwlvZQ=w1280"
alt="Satakuntalainen Osakunta"
/>
<CardContent className={styles.newsCardContent}>
<Typography className={styles.cardTitle}>Title</Typography>
<Typography className={styles.cardDescription}>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Itaque, numquam magnam, eum nihil adipisci tenetur quasi vel
minima nemo ratione molestiae in ab laborum perferendis
beatae impedit dolorem iusto sunt.
</Typography>
</CardContent>
</CardActionArea>
<CardActions className={styles.cardLink}>
<Link href="" />
</CardActions>
</Card>
</span>
</section>

{/* Calendar */}
<section className={styles.calendarSection}>
<span className={styles.sectionContainer}>
Expand Down
46 changes: 43 additions & 3 deletions styles/globals.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@
--fc-page-bg-color: #fff;
--fc-neutral-bg-color: rgba(208, 208, 208, 0.3);
--fc-neutral-text-color: #808080;
--fc-border-color: #ddd;
--fc-border-color: transparent;

--fc-button-text-color: #fff;
--fc-button-bg-color: #2c3e50;
Expand All @@ -31,8 +31,8 @@
--fc-button-active-bg-color: #1a252f;
--fc-button-active-border-color: #151e27;

--fc-event-bg-color: #3788d8;
--fc-event-border-color: #3788d8;
--fc-event-bg-color: var(--blue300);
--fc-event-border-color: var(--blue300);
--fc-event-text-color: #fff;
--fc-event-selected-overlay-color: rgba(0, 0, 0, 0.25);

Expand Down Expand Up @@ -251,6 +251,46 @@ h1 {
height: auto;
}

/* Week calenar */
.fc-timegrid {
display: flex;
flex-wrap: nowrap;
overflow-x: auto;
}

.fc-timegrid-col {
background-color: var(--white);
border-radius: 0.75rem;
}

.fc-timegrid-col:first-child {
background-color: transparent;
}

.fc-event {
border-radius: 0.5rem;
}

.fc table {
border-collapse: separate;
border-spacing: 0.75rem;
min-width: 60rem;
}

.gcal-1 {
background-color: #a09c44;
border-color: #a09c44;
}

.gcal-2 {
background-color: #ff8a57;
border-color: #ff8a57;
}

.gcal-3 {
background-color: var(--blue300);
}

@media (max-width: 1050px) {
.embla {
--slide-size: 40%;
Expand Down
1 change: 1 addition & 0 deletions styles/verticalCard.module.css
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
.verticalCard {
width: 15rem;
min-width: 15rem;
border-radius: 1rem;
box-shadow: none;
}
Expand Down

0 comments on commit ea295ac

Please sign in to comment.