ScoDoc/app/templates/calendrier.j2

<div class="calendrier">
    {% for mois,semaines in calendrier.items() %}
    <div class="mois {{'highlight' if highlight=='mois'}}">
        <h3>{{mois}}</h3>
        {% for semaine in semaines %}
        <div class="jours {{'highlight' if highlight=='semaine'}}" week_index="{{semaine}}">
            {% for jour in semaines[semaine] %}
            <div class="jour {{jour.get_class()}} {{'highlight' if highlight=='jour'}}" date="{{jour.get_date('%Y-%m-%d')}}">
                <span class="nom">{{jour.get_nom()}}</span>
                <div class="contenu">
                    {{jour.get_html() | safe}}
                </div>
            </div>
            {% endfor %}
        </div>
        {% endfor %}
    </div>
    {% endfor %}
</div>

<style>
    .calendrier {
        display: flex;
        justify-content: flex-start;
        overflow-x: scroll;
        border: 1px solid #444;
        border-radius: 12px;
        margin-bottom: 12px;
        padding: 4px;
        --color-semaine-courante: yellow;
    }

    .mois {
        flex: 1;
    }

    .mois h3 {
        text-align: center;
    }

    .jour {
        text-align: left;
        margin: 2px;
        cursor: default;
        font-size: 13px;
        position: relative;
        font-weight: normal;
        min-width: 6em;
        display: flex;
        justify-content: start;
    }

    .jour>.contenu {
        background-color: white;
        width: 100%;
    }

    .jour.jour.non-travail>.nom,
    .jour.jour.non-travail>.contenu {
        border: 0;
        background-color: #badfff;
    }

    .jour>.nom {
        width: 3em;
        min-width: 3em;

        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }

    .jour>.contenu,
    .jour>.nom {
        border: 1px solid #d5d5d5;
        position: relative;
    }

    .jour>.contenu a {
        padding: 0px 2px;
    }
    .jour>.nom {
        text-align: center;
    }
    .sem-courante{
        border-left: solid 3px var(--color-semaine-courante);
        border-right: solid 3px var(--color-semaine-courante);
    }
    div.jours:has(div.sem-courante) {
        background-color:  var(--color-semaine-courante);
    }


    .highlight:hover{
        border: solid 3px yellow;
    }

</style>