Skip to content
Snippets Groups Projects
Commit 579ddf60 authored by Liliana Sanfilippo's avatar Liliana Sanfilippo
Browse files

calendar

parent 3b237815
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
src/App/App.tsx
+ 1
− 0
View file @ 579ddf60
......@@ -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({
......
src/App/calendar.css 0 → 100644
+ 79
− 0
View file @ 579ddf60
.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
src/components/Calendar.tsx 0 → 100644
+ 448
− 0
View file @ 579ddf60
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>&#10095;</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>&#10094;</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>&#10094;</div></a>
</li>
<li className="next">
<a onClick={switchTo(months[index+1])}><div>&#10095;</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
src/contents/project-documentation.tsx
+ 4
− 1
View file @ 579ddf60
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
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment