<div class="calendrier"> {% for mois,jours in calendrier.items() %} <div class="mois"> <h3>{{mois}}</h3> <div class="jours"> {% for jour in jours %} <div class="jour {{jour.get_class()}}"> <span class="nom">{{jour.get_nom()}}</span> <div class="contenu"> {{jour.get_html() | safe}} </div> </div> {% endfor %} </div> </div> {% endfor %} </div> <style> .calendrier { display: flex; justify-content: center; overflow-x: scroll; border: 1px solid #444; border-radius: 12px; margin-bottom: 12px; } .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{ --couleur : #ee752c; border-left: solid 3px var(--couleur); border-right: solid 3px var(--couleur); } </style>