cal

src/App/calendar.css

@@ -2,9 +2,31 @@
 .month {
     padding: 70px 25px;
     width: 100%;
-    background: #1abc9c;
+    margin-top: 40px;
+    background: var(--mediumpurple);
     text-align: center;
+    border-radius: 10px;
   }
+
+.cal-entry{
+  border-color: var(--text-primary);
+  border-radius: 10px;
+  border-width: 2px;
+  border-style: dotted; 
+}
+
+.entry-body{
+  padding: 2vw 4vw;
+  
+}
+ 
+.entry-header{
+  background-color: var(--darkerbeige);
+  padding: 15px;
+  border-bottom-color: var(--text-primary);
+  border-bottom-width: 1px;
+  border-bottom-style: solid; 
+}
   
   .month ul {
     margin: 0;
@@ -12,13 +34,16 @@
   }
   
   .month ul li {
-    color: white;
+    color: white !important;
     font-size: 20px;
     text-transform: uppercase;
     letter-spacing: 3px;
     list-style: none;
   }
   
+  .prev a, .next a{
+    color: white !important;
+  }
   .month .prev {
     float: left;
     padding-top: 10px;
@@ -30,6 +55,7 @@
   }
   
   .weekdays {
+    border-radius: 10px;
     margin: 0;
     padding: 10px 0;
     background-color: #ddd;
@@ -43,6 +69,7 @@
   }
   
   .days {
+    border-radius: 10px;
     padding: 10px 0;
     background: #eee;
     margin: 0;

src/components/Calendar.tsx → src/components/Calendar/Calendar.tsx

+import { CalTabs } from "./cal-content";
 
 
 export function Calendar(){
 let arrows = Arrows(); 
+let tabs = CalTabs(); 
     return(
-        <>
+        <div className="cal">
 
     {arrows}
  
@@ -26,7 +28,9 @@ let arrows = Arrows();
 {August}
 {September}
 {October}
-        </>
+<br/>
+{tabs}
+        </div>
     )
 }
 
@@ -125,7 +129,18 @@ function switchTo(month: string){
       return nextdate;  
 }
 
-
+function showEntry(entry:string){
+    const showentry = (_event: React.MouseEvent<HTMLElement, MouseEvent>) => {
+        let elementsToHide = document.getElementsByClassName("cal-entry"); 
+        for (let index = 0; index < elementsToHide.length; index++) {
+           
+            (elementsToHide[index] as HTMLElement).style.display = "none";  
+        } 
+        let entryBlock = document.getElementById(entry);
+        (entryBlock as HTMLElement).style.display = "block";
+    }
+    return showentry; 
+}
 
 const Februar = <ul id="February-dates" className="days hideable">  
 <li></li>
@@ -140,7 +155,7 @@ const Februar = <ul id="February-dates" className="days hideable">
   <li>7</li>
   <li>8</li>
   <li>9</li>
-  <li><span className="active">10</span></li>
+  <li>10</li>
   <li>11</li>
   <li>12</li>
   <li>13</li>
@@ -157,9 +172,9 @@ const Februar = <ul id="February-dates" className="days hideable">
   <li>24</li>
   <li>25</li>
   <li>26</li>
-  <li>27</li>
+  <li><a onClick={showEntry("february27")}><span className="active">27</span></a></li>
   <li>28</li>
-  <li>29</li>
+  <li><a onClick={showEntry("february29")}><span className="active">29</span></a></li>
 
 </ul>
 const March = <ul id="March-dates" className="days hideable" style={{display: "none"}}>  
@@ -173,81 +188,81 @@ const March = <ul id="March-dates" className="days hideable" style={{display: "n
   <li>4</li>
   <li>5</li>
   <li>6</li>
-  <li>7</li>
+  <li><a onClick={showEntry("march7")}><span className="active">7</span></a></li>
   <li>8</li>
   <li>9</li>
-  <li><span className="active">10</span></li>
+  <li>10</li>
   <li>11</li>
-  <li>12</li>
+  <li><a onClick={showEntry("march12")}><span className="active">12</span></a></li>
   <li>13</li>
-  <li>14</li>
+  <li><a onClick={showEntry("march14")}><span className="active">14</span></a></li>
   <li>15</li>
   <li>16</li>
   <li>17</li>
   <li>18</li>
-  <li>19</li>
+  <li><a onClick={showEntry("march19")}><span className="active">19</span></a></li>
   <li>20</li>
-  <li>21</li>
+  <li><a onClick={showEntry("march21")}><span className="active">21</span></a></li>
   <li>22</li>
   <li>23</li>
   <li>24</li>
   <li>25</li>
   <li>26</li>
-  <li>27</li>
+  <li><a onClick={showEntry("march27")}><span className="active">27</span></a></li>
   <li>28</li>
-  <li>29</li>
+  <li><a onClick={showEntry("march29")}><span className="active">29</span></a></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><a onClick={showEntry("april2")}><span className="active">2</span></a></li>
   <li>3</li>
-  <li>4</li>
+  <li><a onClick={showEntry("april4")}><span className="active">4</span></a></li>
   <li>5</li>
-  <li>6</li>
+  <li><a onClick={showEntry("april6")}><span className="active">6</span></a></li>
   <li>7</li>
   <li>8</li>
   <li>9</li>
-  <li><span className="active">10</span></li>
-  <li>11</li>
+  <li>10</li>
+  <li><a onClick={showEntry("april11")}><span className="active">11</span></a></li>
   <li>12</li>
   <li>13</li>
   <li>14</li>
   <li>15</li>
-  <li>16</li>
+  <li><a onClick={showEntry("april16")}><span className="active">16</span></a></li>
   <li>17</li>
-  <li>18</li>
+  <li><a onClick={showEntry("april18")}><span className="active">18</span></a></li>
   <li>19</li>
   <li>20</li>
   <li>21</li>
   <li>22</li>
-  <li>23</li>
+  <li><a onClick={showEntry("april23")}><span className="active">23</span></a></li>
   <li>24</li>
-  <li>25</li>
+  <li><a onClick={showEntry("april25")}><span className="active">25</span></a></li>
   <li>26</li>
   <li>27</li>
   <li>28</li>
   <li>29</li>
-  <li>30</li>
+  <li><a onClick={showEntry("april30")}><span className="active">30</span></a></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><a onClick={showEntry("may2")}><span className="active">2</span></a></li>
   <li>3</li>
   <li>4</li>
   <li>5</li>
   <li>6</li>
-  <li>7</li>
+  <li><a onClick={showEntry("may7")}><span className="active">7</span></a></li>
   <li>8</li>
   <li>9</li>
-  <li><span className="active">10</span></li>
+  <li>10</li>
   <li>11</li>
   <li>12</li>
   <li>13</li>
-  <li>14</li>
+  <li><a onClick={showEntry("may14")}><span className="active">14</span></a></li>
   <li>15</li>
   <li>16</li>
   <li>17</li>
@@ -445,4 +460,6 @@ const October = <ul id="October-dates" className="days hideable" style={{display
   <li>29</li>
   <li>30</li>
   <li>31</li>
-</ul>
+</ul>
\ No newline at end of file
+
+

src/contents/project-documentation.tsx

-import { Calendar } from "../components/Calendar";
+import { Calendar } from "../components/Calendar/Calendar";
 import { useTabNavigation } from "../utils/TabNavigation";