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