Calendar Page

<style>
    
    /* Configurable styles */
    body {
        
        /* Uses some fonts/colors from the current Trilium theme by default */
        
        /* Text */
        --calendar-title-font-family: var(--main-font-family);
        --calendar-title-font-color: var(--main-text-color); 
        --calendar-title-font-size: 24px; 
        --day-number-font-family: var(--main-font-family);
        --day-number-font-color: var(--main-text-color);
        --day-number-font-size: 16px;
        --day-of-week-font-family: var(--main-font-family);
        --day-of-week-font-color: var(--main-text-color);
        --day-of-week-font-size: 16px;
        --event-marker-font-family: var(--main-font-family);
        --event-marker-font-color: var(--main-text-color);
        --event-marker-font-size: 14px;
        
        /* Borders */
        --border-color: var(--main-background-color); 
        --border-thickness: 4px;
        --today-border-color: #999;
        --today-border-thickness: 5px;
        
        /* Background colors */
        --header-background: var(--more-accented-background-color);
        --sun-background: var(--more-accented-background-color);
        --mon-background: var(--accented-background-color);
        --tue-background: var(--accented-background-color);
        --wed-background: var(--accented-background-color);
        --thu-background: var(--accented-background-color);
        --fri-background: var(--accented-background-color);
        --sat-background: var(--more-accented-background-color);
        
        /* Misc */
        --calendar-button-background: var(--button-background-color);
        --calendar-button-text-color: var(--button-text-color);

        --marker-font-size: 17px;
        --marker-tooltip-font-family: var(--main-font-family);
        --marker-tooltip-font-size: 15px;
        --marker-tooltip-font-color: #fff;
        --marker-tooltip-background-color: #111;
        
        --cell-height: 140px;
    }
    
</style>


<div class="container-calendar">
    
    <div id="monthAndYear"></div>
    
    <div class="button-container-calendar">
        <button id="previous" onclick="previous()">&#8249;</button>
        <button id="next" onclick="next()">&#8250;</button>
    </div>
          
    <table class="table-calendar" id="calendar">
        <thead id="thead-month"></thead>
        <tbody id="calendar-body"></tbody>
    </table>
          
    <div class="footer-container-calendar">
        <label for="month">Jump To: </label>
        <select id="month" onchange="jump()">
            <option value=0>Jan</option>
            <option value=1>Feb</option>
            <option value=2>Mar</option>
            <option value=3>Apr</option>
            <option value=4>May</option>
            <option value=5>Jun</option>
            <option value=6>Jul</option>
            <option value=7>Aug</option>
            <option value=8>Sep</option>
            <option value=9>Oct</option>
            <option value=10>Nov</option>
            <option value=11>Dec</option>
        </select>
        <select id="year" onchange="jump()"></select>       
    </div>
    
</div>


<style>
    
    /* --- General styles --- */
    
    .container-calendar {
        padding: 15px;
        position: relative;
        top: -46px; 
    }
    
    /* Title */
    #monthAndYear {
        color: var(--calendar-title-font-color);
        text-align: center;
        position: relative;
        top: 36px;
        font-size: var(--calendar-title-font-size);
        font-family: var(--calendar-title-font-family);
    }

    .table-calendar {
        border-collapse: collapse;
        width: 100%;
        border: 1px solid var(--border-color) !important;
        font-family: var(--calendar-title-font-family);
        table-layout: fixed;
    }
    
    /* --- Table cells --- */
    
    .table-calendar th {
        padding: 5px;
        border: var(--border-thickness) solid var(--border-color) !important;
        text-align: center;
        vertical-align: top;
        background-color: var(--header-background);
        font-family: var(--day-of-week-font-family);
        font-size: var(--day-of-week-font-size);
        color: var(--day-of-week-font-color);
    }
    
    .table-calendar td {
        padding: 5px;
        text-align: left;
        vertical-align: top;
        height: var(--cell-height);
        border: var(--border-thickness) solid var(--border-color) !important; 
    }

    /* Day background color depending on weekday */
    .date-picker:nth-child(1) { background-color: var(--sun-background); }
    .date-picker:nth-child(2) { background-color: var(--mon-background); }
    .date-picker:nth-child(3) { background-color: var(--tue-background); }
    .date-picker:nth-child(4) { background-color: var(--wed-background); }
    .date-picker:nth-child(5) { background-color: var(--thu-background); }
    .date-picker:nth-child(6) { background-color: var(--fri-background); }
    .date-picker:nth-child(7) { background-color: var(--sat-background); }

    /* Today's date */
    .date-picker.selected {
        border: var(--today-border-thickness) solid var(--today-border-color) !important;
    }
    
    /* Day numbers */
    .day-number {
        font-family: var(--day-number-font-family);
        color: var(--day-number-font-color);
        font-size: var(--day-number-font-size);
    }

    /* --- Event markers --- */
    
    /* Event text */
    .marker {
        font-size: var(--event-marker-font-size);
        font-family: var(--event-marker-font-family);
        color: var(--event-marker-font-color);
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
    }

    .marker:hover .marker-tooltip {
        visibility: visible;
    }
    
    .marker .marker-tooltip {
        visibility: hidden;
        background-color: var(--marker-tooltip-background-color);
        color: var(--marker-tooltip-font-color);
        font-family: var(--marker-tooltip-font-family);
        font-size: var(--marker-tooltip-font-size);
        text-align: center;
        border-radius: 6px;
        padding: 5px;
        position: absolute;
        z-index: 1;
    }

    .marker-icon {
        text-align: center !important;
        display: inline-block;
        font-size: var(--marker-font-size);
        width: 1.25em !important;
    }
    
    /* --- Buttons --- */
    
    .button-container-calendar {
        position: relative;
        margin-bottom: 1em;
        overflow: hidden;
        clear: both;
    }

    #previous {
        float: left;
    }

    #next {
        float: right;
    }

    #next, #previous {
        background-color: var(--calendar-button-background);
        color: var(--calendar-button-text-color);
        border: none;
        cursor: pointer;
        display: inline-block;
        border-radius: 4px;
        padding: 5px 10px;
    }

    .footer-container-calendar {
        margin-top: 1em;
        margin-left: 16%;
        margin-right: 16%;
        text-align: center;
    }

    .footer-container-calendar select {
        cursor: pointer;
        display: inline-block;
        border-radius: 3px;
    }

    #month, #year{
        background-color: var(--button-background) !important;
        border: none !important;
        color: var(--button-text-color) !important;
    }


</style>