Calendar.tsx

import { CalTabs } from "./cal-content";


export function Calendar(){
let arrows = Arrows(); 
let tabs = CalTabs(); 
    return(
        <div className="cal">

    {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}
<br/>
{tabs}
        </div>
    )
}



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;  
}

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>
<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>10</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><a onClick={showEntry("february27")}><span className="active">27</span></a></li>
  <li>28</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"}}>  
<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><a onClick={showEntry("march7")}><span className="active">7</span></a></li>
  <li>8</li>
  <li>9</li>
  <li>10</li>
  <li>11</li>
  <li><a onClick={showEntry("march12")}><span className="active">12</span></a></li>
  <li>13</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><a onClick={showEntry("march19")}><span className="active">19</span></a></li>
  <li>20</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><a onClick={showEntry("march27")}><span className="active">27</span></a></li>
  <li>28</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><a onClick={showEntry("april2")}><span className="active">2</span></a></li>
  <li>3</li>
  <li><a onClick={showEntry("april4")}><span className="active">4</span></a></li>
  <li>5</li>
  <li><a onClick={showEntry("april6")}><span className="active">6</span></a></li>
  <li>7</li>
  <li>8</li>
  <li>9</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><a onClick={showEntry("april16")}><span className="active">16</span></a></li>
  <li>17</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><a onClick={showEntry("april23")}><span className="active">23</span></a></li>
  <li>24</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><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><a onClick={showEntry("may2")}><span className="active">2</span></a></li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li><a onClick={showEntry("may7")}><span className="active">7</span></a></li>
  <li>8</li>
  <li>9</li>
  <li>10</li>
  <li>11</li>
  <li>12</li>
  <li>13</li>
  <li><a onClick={showEntry("may14")}><span className="active">14</span></a></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>