From 579ddf607eeca8929be74d24845bb0bf9acf04cb Mon Sep 17 00:00:00 2001
From: Liliana Sanfilippo <liliana.sanfilippo@uni-bielefeld.de>
Date: Tue, 24 Sep 2024 18:24:23 +0200
Subject: [PATCH] calendar
---
src/App/App.tsx | 1 +
src/App/calendar.css | 79 +++++
src/components/Calendar.tsx | 448 +++++++++++++++++++++++++
src/contents/project-documentation.tsx | 5 +-
4 files changed, 532 insertions(+), 1 deletion(-)
create mode 100644 src/App/calendar.css
create mode 100644 src/components/Calendar.tsx
diff --git a/src/App/App.tsx b/src/App/App.tsx
index 9072b1f6..65ef9627 100644
--- a/src/App/App.tsx
+++ b/src/App/App.tsx
@@ -22,6 +22,7 @@ import { Villbuttonrow } from "../components/Buttons.tsx";
import "../utils/Highlight-functions.js";
import "./LoadingScreen.css";
import { useScroll, motion } from "framer-motion";
+import "./calendar.css"
const App = () => {
const { scrollYProgress } = useScroll({
diff --git a/src/App/calendar.css b/src/App/calendar.css
new file mode 100644
index 00000000..62241227
--- /dev/null
+++ b/src/App/calendar.css
@@ -0,0 +1,79 @@
+
+.month {
+ padding: 70px 25px;
+ width: 100%;
+ background: #1abc9c;
+ text-align: center;
+ }
+
+ .month ul {
+ margin: 0;
+ padding: 0;
+ }
+
+ .month ul li {
+ color: white;
+ font-size: 20px;
+ text-transform: uppercase;
+ letter-spacing: 3px;
+ list-style: none;
+ }
+
+ .month .prev {
+ float: left;
+ padding-top: 10px;
+ }
+
+ .month .next {
+ float: right;
+ padding-top: 10px;
+ }
+
+ .weekdays {
+ margin: 0;
+ padding: 10px 0;
+ background-color: #ddd;
+ }
+
+ .weekdays li {
+ display: inline-block;
+ width: 13.6%;
+ color: #666;
+ text-align: center;
+ }
+
+ .days {
+ padding: 10px 0;
+ background: #eee;
+ margin: 0;
+ }
+
+ .days li {
+ list-style-type: none;
+ display: inline-block;
+ width: 13.6%;
+ text-align: center;
+ margin-bottom: 5px;
+ font-size:12px;
+ color: #777;
+ }
+
+ .days li .active {
+ padding: 5px;
+ background: #1abc9c;
+ color: white !important
+ }
+
+ /* Add media queries for smaller screens */
+ @media screen and (max-width:720px) {
+ .weekdays li, .days li {width: 13.1%;}
+ }
+
+ @media screen and (max-width: 420px) {
+ .weekdays li, .days li {width: 12.5%;}
+ .days li .active {padding: 2px;}
+ }
+
+ @media screen and (max-width: 290px) {
+ .weekdays li, .days li {width: 12.2%;}
+ }
\ No newline at end of file
diff --git a/src/components/Calendar.tsx b/src/components/Calendar.tsx
new file mode 100644
index 00000000..6ef05433
--- /dev/null
+++ b/src/components/Calendar.tsx
@@ -0,0 +1,448 @@
+
+
+export function Calendar(){
+let arrows = Arrows();
+ return(
+ <>
+
+ {arrows}
+
+
+<ul className="weekdays">
+ <li>Mo</li>
+ <li>Tu</li>
+ <li>We</li>
+ <li>Th</li>
+ <li>Fr</li>
+ <li>Sa</li>
+ <li>Su</li>
+</ul>
+{Februar}
+{March}
+{April}
+{May}
+{June}
+{July}
+{August}
+{September}
+{October}
+ </>
+ )
+}
+
+
+
+function Arrows(){
+ const months = ["February", "March", "April", "May", "June", "July", "August", "September", "October"]
+ let arrows = [];
+ for (let index = 0; index < months.length; index++) {
+ if (index == 0) {
+ console.log(`months[index] = ${months[index]}` )
+ arrows.push(
+ <div className="month hideable" id={`${months[index]}-head`} style={{display: "block"}}>
+ <ul>
+ <span >
+ <li className="next">
+ <a onClick={switchTo(months[index+1])}><div>❯</div></a>
+ </li>
+ </span>
+ <li>
+ {months[index]}
+ <br/>
+ <span style={{fontSize:"18px"}}>2024</span>
+ </li>
+ </ul>
+ </div>
+ )
+ }
+ if (index == (months.length - 1)) {
+ arrows.push(
+ <div className="month hideable" id={`${months[index]}-head`} style={{display: "none"}}>
+ <ul>
+ <span>
+ <li className="prev">
+ <a onClick={switchTo(months[index-1])}><div>❮</div></a>
+ </li>
+ </span>
+ <li>
+ {months[index]}
+ <br/>
+ <span style={{fontSize:"18px"}}>2024</span>
+ </li>
+ </ul>
+ </div>
+ )
+ }
+ else{
+ arrows.push(
+ <div className="month hideable" id={`${months[index]}-head`} style={{display: "none"}}>
+ <ul>
+ <span >
+ <li className="prev">
+ <a onClick={switchTo(months[index-1])}><div>❮</div></a>
+ </li>
+ <li className="next">
+ <a onClick={switchTo(months[index+1])}><div>❯</div></a>
+ </li>
+ </span>
+ <li>
+ {months[index]}
+ <br/>
+ <span style={{fontSize:"18px"}}>2024</span>
+ </li>
+ </ul>
+ </div>
+ )
+ }
+ }
+ return arrows;
+}
+
+function switchTo(month: string){
+ console.log(`Called Next Date with ${month}`)
+ const nextdate = (_event: React.MouseEvent<HTMLElement, MouseEvent>) => {
+ console.log("nextDate open")
+ let elementsToHide = document.getElementsByClassName("hideable");
+ console.log(elementsToHide)
+ for (let index = 0; index < elementsToHide.length; index++) {
+
+ (elementsToHide[index] as HTMLElement).style.display = "none";
+ }
+
+ console.log("new month is: " + month + " and we are calling " + `${month}-name`)
+ if (document.getElementById(`${month}-dates`)) {
+ console.info("document.getElementById(`${month}-dates`); exists")
+ let newdates = document.getElementById(`${month}-dates`);
+ (newdates as HTMLElement).style.display = "block";
+ }
+ else{
+ console.error(`Element with id ${month}-dates does not exist`)
+ }
+ let newArrows = document.getElementById(`${month}-head`);
+ (newArrows as HTMLElement).style.display = "block";
+ console.log(newArrows)
+ }
+ return nextdate;
+}
+
+
+
+const Februar = <ul id="February-dates" className="days hideable">
+<li></li>
+<li></li>
+<li></li>
+ <li>1</li>
+ <li>2</li>
+ <li>3</li>
+ <li>4</li>
+ <li>5</li>
+ <li>6</li>
+ <li>7</li>
+ <li>8</li>
+ <li>9</li>
+ <li><span className="active">10</span></li>
+ <li>11</li>
+ <li>12</li>
+ <li>13</li>
+ <li>14</li>
+ <li>15</li>
+ <li>16</li>
+ <li>17</li>
+ <li>18</li>
+ <li>19</li>
+ <li>20</li>
+ <li>21</li>
+ <li>22</li>
+ <li>23</li>
+ <li>24</li>
+ <li>25</li>
+ <li>26</li>
+ <li>27</li>
+ <li>28</li>
+ <li>29</li>
+
+</ul>
+const March = <ul id="March-dates" className="days hideable" style={{display: "none"}}>
+<li></li>
+<li></li>
+<li></li>
+<li></li>
+ <li>1</li>
+ <li>2</li>
+ <li>3</li>
+ <li>4</li>
+ <li>5</li>
+ <li>6</li>
+ <li>7</li>
+ <li>8</li>
+ <li>9</li>
+ <li><span className="active">10</span></li>
+ <li>11</li>
+ <li>12</li>
+ <li>13</li>
+ <li>14</li>
+ <li>15</li>
+ <li>16</li>
+ <li>17</li>
+ <li>18</li>
+ <li>19</li>
+ <li>20</li>
+ <li>21</li>
+ <li>22</li>
+ <li>23</li>
+ <li>24</li>
+ <li>25</li>
+ <li>26</li>
+ <li>27</li>
+ <li>28</li>
+ <li>29</li>
+ <li>30</li>
+ <li>31</li>
+</ul>
+const April = <ul id="April-dates" className="days hideable" style={{display: "none"}}>
+ <li>1</li>
+ <li>2</li>
+ <li>3</li>
+ <li>4</li>
+ <li>5</li>
+ <li>6</li>
+ <li>7</li>
+ <li>8</li>
+ <li>9</li>
+ <li><span className="active">10</span></li>
+ <li>11</li>
+ <li>12</li>
+ <li>13</li>
+ <li>14</li>
+ <li>15</li>
+ <li>16</li>
+ <li>17</li>
+ <li>18</li>
+ <li>19</li>
+ <li>20</li>
+ <li>21</li>
+ <li>22</li>
+ <li>23</li>
+ <li>24</li>
+ <li>25</li>
+ <li>26</li>
+ <li>27</li>
+ <li>28</li>
+ <li>29</li>
+ <li>30</li>
+</ul>
+const May = <ul id="May-dates" className="days hideable" style={{display: "none"}}>
+<li></li>
+<li></li>
+ <li>1</li>
+ <li>2</li>
+ <li>3</li>
+ <li>4</li>
+ <li>5</li>
+ <li>6</li>
+ <li>7</li>
+ <li>8</li>
+ <li>9</li>
+ <li><span className="active">10</span></li>
+ <li>11</li>
+ <li>12</li>
+ <li>13</li>
+ <li>14</li>
+ <li>15</li>
+ <li>16</li>
+ <li>17</li>
+ <li>18</li>
+ <li>19</li>
+ <li>20</li>
+ <li>21</li>
+ <li>22</li>
+ <li>23</li>
+ <li>24</li>
+ <li>25</li>
+ <li>26</li>
+ <li>27</li>
+ <li>28</li>
+ <li>29</li>
+ <li>30</li>
+ <li>31</li>
+</ul>
+const June = <ul id="June-dates" className="days hideable" style={{display: "none"}}>
+<li></li>
+<li></li>
+<li></li>
+<li></li>
+<li></li>
+ <li>1</li>
+ <li>2</li>
+ <li>3</li>
+ <li>4</li>
+ <li>5</li>
+ <li>6</li>
+ <li>7</li>
+ <li>8</li>
+ <li>9</li>
+ <li><span className="active">10</span></li>
+ <li>11</li>
+ <li>12</li>
+ <li>13</li>
+ <li>14</li>
+ <li>15</li>
+ <li>16</li>
+ <li>17</li>
+ <li>18</li>
+ <li>19</li>
+ <li>20</li>
+ <li>21</li>
+ <li>22</li>
+ <li>23</li>
+ <li>24</li>
+ <li>25</li>
+ <li>26</li>
+ <li>27</li>
+ <li>28</li>
+ <li>29</li>
+ <li>30</li>
+</ul>
+const July = <ul id="July-dates" className="days hideable" style={{display: "none"}}>
+ <li>1</li>
+ <li>2</li>
+ <li>3</li>
+ <li>4</li>
+ <li>5</li>
+ <li>6</li>
+ <li>7</li>
+ <li>8</li>
+ <li>9</li>
+ <li><span className="active">10</span></li>
+ <li>11</li>
+ <li>12</li>
+ <li>13</li>
+ <li>14</li>
+ <li>15</li>
+ <li>16</li>
+ <li>17</li>
+ <li>18</li>
+ <li>19</li>
+ <li>20</li>
+ <li>21</li>
+ <li>22</li>
+ <li>23</li>
+ <li>24</li>
+ <li>25</li>
+ <li>26</li>
+ <li>27</li>
+ <li>28</li>
+ <li>29</li>
+ <li>30</li>
+ <li>31</li>
+</ul>
+const August = <ul id="August-dates" className="days hideable" style={{display: "none"}}>
+<li></li>
+<li></li>
+<li></li>
+ <li>1</li>
+ <li>2</li>
+ <li>3</li>
+ <li>4</li>
+ <li>5</li>
+ <li>6</li>
+ <li>7</li>
+ <li>8</li>
+ <li>9</li>
+ <li><span className="active">10</span></li>
+ <li>11</li>
+ <li>12</li>
+ <li>13</li>
+ <li>14</li>
+ <li>15</li>
+ <li>16</li>
+ <li>17</li>
+ <li>18</li>
+ <li>19</li>
+ <li>20</li>
+ <li>21</li>
+ <li>22</li>
+ <li>23</li>
+ <li>24</li>
+ <li>25</li>
+ <li>26</li>
+ <li>27</li>
+ <li>28</li>
+ <li>29</li>
+ <li>30</li>
+ <li>31</li>
+</ul>
+
+const September = <ul id="September-dates" className="days hideable" style={{display: "none"}}>
+<li></li>
+<li></li>
+<li></li>
+<li></li>
+<li></li>
+<li></li>
+ <li>1</li>
+ <li>2</li>
+ <li>3</li>
+ <li>4</li>
+ <li>5</li>
+ <li>6</li>
+ <li>7</li>
+ <li>8</li>
+ <li>9</li>
+ <li><span className="active">10</span></li>
+ <li>11</li>
+ <li>12</li>
+ <li>13</li>
+ <li>14</li>
+ <li>15</li>
+ <li>16</li>
+ <li>17</li>
+ <li>18</li>
+ <li>19</li>
+ <li>20</li>
+ <li>21</li>
+ <li>22</li>
+ <li>23</li>
+ <li>24</li>
+ <li>25</li>
+ <li>26</li>
+ <li>27</li>
+ <li>28</li>
+ <li>29</li>
+ <li>30</li>
+</ul>
+
+const October = <ul id="October-dates" className="days hideable" style={{display: "none"}}>
+<li></li>
+ <li>1</li>
+ <li>2</li>
+ <li>3</li>
+ <li>4</li>
+ <li>5</li>
+ <li>6</li>
+ <li>7</li>
+ <li>8</li>
+ <li>9</li>
+ <li><span className="active">10</span></li>
+ <li>11</li>
+ <li>12</li>
+ <li>13</li>
+ <li>14</li>
+ <li>15</li>
+ <li>16</li>
+ <li>17</li>
+ <li>18</li>
+ <li>19</li>
+ <li>20</li>
+ <li>21</li>
+ <li>22</li>
+ <li>23</li>
+ <li>24</li>
+ <li>25</li>
+ <li>26</li>
+ <li>27</li>
+ <li>28</li>
+ <li>29</li>
+ <li>30</li>
+ <li>31</li>
+</ul>
\ No newline at end of file
diff --git a/src/contents/project-documentation.tsx b/src/contents/project-documentation.tsx
index d3e28794..0f652fa7 100644
--- a/src/contents/project-documentation.tsx
+++ b/src/contents/project-documentation.tsx
@@ -1,10 +1,13 @@
+import { Calendar } from "../components/Calendar";
import { useTabNavigation } from "../utils/TabNavigation";
export function ProDesc() {
useTabNavigation();
return (
- <></>
+ <div className="col">
+ <Calendar/>
+ </div>
);
}
\ No newline at end of file
--
GitLab