diff --git a/app/forms/assiduite/ajout_assiduite_etud.py b/app/forms/assiduite/ajout_assiduite_etud.py
index 44b7f9c7e..deeec72c5 100644
--- a/app/forms/assiduite/ajout_assiduite_etud.py
+++ b/app/forms/assiduite/ajout_assiduite_etud.py
@@ -161,3 +161,30 @@ class AjoutJustificatifEtudForm(AjoutAssiOrJustForm):
         validators=[DataRequired(message="This field is required.")],
     )
     fichiers = MultipleFileField(label="Ajouter des fichiers")
+
+
+class ChoixDateForm(FlaskForm):
+    def __init__(self, *args, **kwargs):
+        "Init form, adding a filed for our error messages"
+        super().__init__(*args, **kwargs)
+        self.ok = True
+        self.error_messages: list[str] = []  # used to report our errors
+
+    def set_error(self, err_msg, field=None):
+        "Set error message both in form and field"
+        self.ok = False
+        self.error_messages.append(err_msg)
+        if field:
+            field.errors.append(err_msg)
+
+    date = StringField(
+        "Date",
+        validators=[validators.Length(max=10)],
+        render_kw={
+            "class": "datepicker",
+            "size": 10,
+            "id": "date",
+        },
+    )
+    submit = SubmitField("Enregistrer")
+    cancel = SubmitField("Annuler", render_kw={"formnovalidate": True})
diff --git a/app/models/assiduites.py b/app/models/assiduites.py
index ccfdd81e9..3d6a296cf 100644
--- a/app/models/assiduites.py
+++ b/app/models/assiduites.py
@@ -4,6 +4,7 @@
 from datetime import datetime
 from flask_login import current_user
 from flask_sqlalchemy.query import Query
+from sqlalchemy.exc import DataError
 
 from app import db, log, g, set_sco_dept
 from app.models import (
@@ -249,50 +250,58 @@ class Assiduite(ScoDocModel):
             sco_abs_notification.abs_notify(etud.id, nouv_assiduite.date_debut)
         return nouv_assiduite
 
-    def set_moduleimpl(self, moduleimpl_id: int | str) -> bool:
-        """TODO"""
-        # je ne comprend pas cette fonction WIP
-        # moduleimpl_id peut être == "autre", ce qui plante
-        # ci-dessous un fix temporaire en attendant explication de @iziram
-        if moduleimpl_id is None:
-            raise ScoValueError("invalid moduleimpl_id")
+    def set_moduleimpl(self, moduleimpl_id: int | str):
+        """Mise à jour du moduleimpl_id
+        Les valeurs du champs "moduleimpl_id" possibles sont :
+            - <int> (un id classique)
+            - <str> ("autre" ou "<id>")
+            - None (pas de moduleimpl_id)
+        Si la valeur est "autre" il faut:
+            - mettre à None assiduité.moduleimpl_id
+            - mettre à jour assiduite.external_data["module"] = "autre"
+        En fonction de la configuration du semestre la valeur `None` peut-être considérée comme invalide.
+            - Il faudra donc vérifier que ce n'est pas le cas avant de mettre à jour l'assiduité
+        """
+        moduleimpl: ModuleImpl = None
         try:
-            moduleimpl_id_int = int(moduleimpl_id)
-        except ValueError as exc:
-            raise ScoValueError("invalid moduleimpl_id") from exc
-        # /fix
-        moduleimpl: ModuleImpl = ModuleImpl.query.get(moduleimpl_id_int)
-        if moduleimpl is not None:
-            # Vérification de l'inscription de l'étudiant
+            # ne lève une erreur que si moduleimpl_id est une chaine de caractère non parsable (parseInt)
+            moduleimpl: ModuleImpl = ModuleImpl.query.get(moduleimpl_id)
+            # moduleImpl est soit :
+            #   - None si moduleimpl_id==None
+            #   - None si moduleimpl_id==<int> non reconnu
+            #   - ModuleImpl si <int|str> valide
+
+            # Vérification ModuleImpl not None (raise ScoValueError)
+            if moduleimpl is None and self._check_force_module(moduleimpl):
+                # Ici uniquement si on est autorisé à ne pas avoir de module
+                self.moduleimpl_id = None
+                return
+
+            # Vérification Inscription ModuleImpl (raise ScoValueError)
             if moduleimpl.est_inscrit(self.etudiant):
                 self.moduleimpl_id = moduleimpl.id
             else:
                 raise ScoValueError("L'étudiant n'est pas inscrit au module")
-        elif isinstance(moduleimpl_id, str):
+
+        except DataError:
+            # On arrive ici si moduleimpl_id == "autre" ou moduleimpl_id == <str> non parsé
+
+            if moduleimpl_id != "autre":
+                raise ScoValueError("Module non reconnu")
+
+            # Configuration de external_data pour Module Autre
+            # Si self.external_data None alors on créé un dictionnaire {"module": "autre"}
+            # Sinon on met à jour external_data["module"] à "autre"
+
             if self.external_data is None:
-                self.external_data = {"module": moduleimpl_id}
+                self.external_data = {"module": "autre"}
             else:
-                self.external_data["module"] = moduleimpl_id
+                self.external_data["module"] = "autre"
+
+            # Dans tous les cas une fois fait, assiduite.moduleimpl_id doit être None
             self.moduleimpl_id = None
-        else:
-            # Vérification si module forcé
-            formsemestre: FormSemestre = get_formsemestre_from_data(
-                {
-                    "etudid": self.etudid,
-                    "date_debut": self.date_debut,
-                    "date_fin": self.date_fin,
-                }
-            )
-            force: bool
 
-            if formsemestre:
-                force = is_assiduites_module_forced(formsemestre_id=formsemestre.id)
-            else:
-                force = is_assiduites_module_forced(dept_id=self.etudiant.dept_id)
-
-            if force:
-                raise ScoValueError("Module non renseigné")
-        return True
+            # Ici pas de vérification du force module car on l'a mis dans "external_data"
 
     def supprime(self):
         "Supprime l'assiduité. Log et commit."
@@ -338,6 +347,40 @@ class Assiduite(ScoDocModel):
 
         return "Non spécifié" if traduire else None
 
+    def get_saisie(self) -> str:
+        """
+        retourne le texte "saisie le <date> par <User>"
+        """
+
+        date: str = self.entry_date.strftime("%d/%m/%Y à %H:%M")
+        utilisateur: str = ""
+        if self.user != None:
+            self.user: User
+            utilisateur = f"par {self.user.get_prenomnom()}"
+
+        return f"saisie le {date} {utilisateur}"
+
+    def _check_force_module(self, moduleimpl: ModuleImpl) -> bool:
+        # Vérification si module forcé
+        formsemestre: FormSemestre = get_formsemestre_from_data(
+            {
+                "etudid": self.etudid,
+                "date_debut": self.date_debut,
+                "date_fin": self.date_fin,
+            }
+        )
+        force: bool
+
+        if formsemestre:
+            force = is_assiduites_module_forced(formsemestre_id=formsemestre.id)
+        else:
+            force = is_assiduites_module_forced(dept_id=self.etudiant.dept_id)
+
+        if force:
+            raise ScoValueError("Module non renseigné")
+
+        return True
+
 
 class Justificatif(ScoDocModel):
     """
diff --git a/app/scodoc/sco_assiduites.py b/app/scodoc/sco_assiduites.py
index 487556aba..5f8287e60 100644
--- a/app/scodoc/sco_assiduites.py
+++ b/app/scodoc/sco_assiduites.py
@@ -394,6 +394,10 @@ def get_assiduites_stats(
         if "etat" in filtered
         else ["absent", "present", "retard"]
     )
+
+    # être sur que les états sont corrects
+    etats = [etat for etat in etats if etat in ["absent", "present", "retard"]]
+
     # Préparation du dictionnaire de retour avec les valeurs du calcul
     count: dict = calculator.to_dict(only_total=False)
     for etat in etats:
diff --git a/app/static/js/assiduites.js b/app/static/js/assiduites.js
index 55d0c6afa..9f7e69e7a 100644
--- a/app/static/js/assiduites.js
+++ b/app/static/js/assiduites.js
@@ -110,11 +110,12 @@ function validateSelectors(btn) {
 
     getAssiduitesFromEtuds(true);
 
-    document.querySelector(".selectors").disabled = true;
-    $("#tl_date").datepicker("option", "disabled", true);
+    // document.querySelector(".selectors").disabled = true;
+    // $("#tl_date").datepicker("option", "disabled", true);
     generateMassAssiduites();
     generateAllEtudRow();
-    btn.remove();
+    // btn.remove();
+    btn.textContent = "Actualiser";
     onlyAbs();
   };
 
@@ -533,6 +534,7 @@ function massAction() {
  * puis on ajoute les événements associés
  */
 function generateMassAssiduites() {
+  if (readOnly || document.querySelector(".mass-selection") != null) return;
   const content = document.getElementById("content");
 
   const mass = document.createElement("div");
@@ -1411,7 +1413,8 @@ function generateEtudRow(
       assi += `<input type="checkbox" value="${abs}" name="btn_assiduites_${index}" id="rbtn_${abs}" class="rbtn ${abs}" title="${abs}">`;
     }
   });
-  const conflit = assiduite.type == "conflit" ? "conflit" : "";
+  if (readOnly) assi = "";
+  const conflit = assiduite.type == "conflit" && !readOnly ? "conflit" : "";
   const pdp_url = `${getUrl()}/api/etudiant/etudid/${etud.id}/photo?size=small`;
 
   let defdem = "";
@@ -1543,11 +1546,11 @@ function generateAllEtudRow() {
     return;
   }
 
-  if (!document.querySelector(".selectors")?.disabled) {
-    return;
-  }
-
-  document.querySelector(".etud_holder").innerHTML = "";
+  // if (!document.querySelector(".selectors")?.disabled) {
+  //   return;
+  // }
+  const etud_hodler = document.querySelector(".etud_holder");
+  if (etud_hodler) etud_hodler.innerHTML = "";
   etuds_ids = Object.keys(etuds).sort((a, b) =>
     etuds[a].nom > etuds[b].nom ? 1 : etuds[b].nom > etuds[a].nom ? -1 : 0
   );
diff --git a/app/templates/assiduites/pages/calendrier.j2 b/app/templates/assiduites/pages/calendrier.j2
deleted file mode 100644
index cd8feb583..000000000
--- a/app/templates/assiduites/pages/calendrier.j2
+++ /dev/null
@@ -1,741 +0,0 @@
-{% block pageContent %}
-{% include "assiduites/widgets/alert.j2" %}
-
-<div class="pageContent">
-    {{minitimeline | safe }}
-    <h2>Assiduité de {{sco.etud.html_link_fiche()|safe}}</h2>
-
-    <div class="options">
-        <input type="checkbox" id="show_pres" name="show_pres" class="memo"><label for="show_pres">afficher les présences</label>
-        <input type="checkbox" name="show_reta" id="show_reta" class="memo"><label for="show_reta">afficher les retards</label>
-        <input type="checkbox" name="mode_demi" id="mode_demi" class="memo" checked><label for="mode_demi">mode demi journée</label>
-    </div>
-
-    <div class="calendrier">
-
-    </div>
-    <div class="annee">
-        <span id="label-annee">Année scolaire 2022-2023</span><span id="label-changer" style="margin-left: 5px;">Changer
-            année: </span>
-        <select name="" id="annee" onchange="setterAnnee(this.value)">
-        </select>
-
-        <span id="label-nom">Assiduité de {{sco.etud.nomprenom}}</span>
-    </div>
-
-    <div class="help">
-        <h3>Calendrier</h3>
-        <p>Code couleur</p>
-        <ul class="couleurs">
-            <li><span title="Vert" class="present demo"></span> &rightarrow; présence de l'étudiant lors de la période
-            </li>
-            <li><span title="Bleu clair" class="nonwork demo"></span> &rightarrow; la période n'est pas travaillée
-            </li>
-            <li><span title="Rouge" class="absent demo"></span> &rightarrow; absence de l'étudiant lors de la période
-            </li>
-            <li><span title="Rose" class="demo color absent est_just"></span> &rightarrow; absence justifiée
-            </li>
-            <li><span title="Orange" class="retard demo"></span> &rightarrow; retard de l'étudiant lors de la période
-            </li>
-            <li><span title="Jaune clair" class="demo color retard est_just"></span> &rightarrow; retard justifié
-            </li>
-
-            <li><span title="Quart Bleu" class="est_just demo"></span> &rightarrow; la période est couverte par un
-                justificatif valide</li>
-            <li><span title="Justif. non valide" class="invalide demo"></span> &rightarrow; la période est
-                couverte par un justificatif non valide
-            </li>
-            <li><span title="Justif. en attente" class="attente demo"></span> &rightarrow; la période
-                a un justificatif en attente de validation
-            </li>
-        </ul>
-
-
-        <p>Vous pouvez passer le curseur sur les jours colorés afin de voir les informations supplémentaires</p>
-    </div>
-    <ul class="couleurs print">
-        <li><span title="Vert" class="present demo"></span> présence
-        </li>
-        <li><span title="Bleu clair" class="nonwork demo"></span> non travaillé
-        </li>
-        <li><span title="Rouge" class="absent demo"></span> absence
-        </li>
-        <li><span title="Rose" class="demo color absent est_just"></span> absence justifiée
-        </li>
-        <li><span title="Orange" class="retard demo"></span> retard
-        </li>
-        <li><span title="Jaune clair" class="demo color retard est_just"></span>retard justifié
-        </li>
-        <li><span title="Quart Bleu" class="est_just demo"></span>
-            justificatif valide</li>
-        <li><span title="Quart Violet" class="invalide demo"></span> justificatif non valide
-        </li>
-    </ul>
-</div>
-
-<style>
-    .help .couleurs {
-        grid-template-columns: 2;
-        grid-template-rows: auto;
-        display: grid;
-    }
-
-    .couleurs.print {
-        display: none;
-    }
-
-    .help .couleurs li:nth-child(odd) {
-        grid-column: 1;
-        list-style-type: none;
-    }
-
-    .help .couleurs li:nth-child(even) {
-        grid-column: 2;
-        list-style-type: none;
-    }
-
-    .color.present {
-        background-color: var(--color-present) !important;
-    }
-
-    .color.absent {
-        background-color: var(--color-absent) !important;
-    }
-
-    .color.absent.est_just {
-        background-color: var(--color-absent-justi) !important;
-    }
-    .color.retard {
-        background-color: var(--color-retard) !important;
-    }
-
-    .color.retard.est_just {
-        background-color: var(--color-retard-justi) !important;
-    }
-
-    .color.nonwork {
-        background-color: var(--color-nonwork) !important;
-    }
-
-    .color {
-        background-color: var(--color-defaut) !important;
-    }
-
-    .pageContent {
-        margin-top: 1vh;
-        max-width: var(--sco-content-max-width);
-    }
-
-    .calendrier {
-        display: flex;
-        justify-content: space-evenly;
-        flex-wrap: wrap;
-        border: 1px solid #444;
-        border-radius: 12px;
-        margin-bottom: 12px;
-    }
-
-    .month h3 {
-        text-align: center;
-    }
-
-    .day,
-    .demi .day.color.nonwork {
-        text-align: left;
-        margin: 2px;
-        cursor: default;
-        font-size: 13px;
-        position: relative;
-        font-weight: normal;
-        min-width: 6em;
-        display: flex;
-        justify-content: start;
-    }
-
-    .color.est_just.sans_etat::before {
-        content: "";
-        position: absolute;
-        width: 25%;
-        height: 100%;
-        background-color: var(--color-justi) !important;
-        right: 0;
-    }
-
-    .color.invalide::before {
-        content: "";
-        position: absolute;
-        width: 25%;
-        height: 100%;
-        right: 0;
-        background-color: var(--color-justi-invalide) !important;
-    }
-    .color.attente::before,  .color.modifie::before {
-        content: "";
-        position: absolute;
-        width: 25%;
-        height: 100%;
-        right: 0;
-        background: repeating-linear-gradient(
-            to bottom,
-            var(--color-justi-attente-stripe) 0px,
-            var(--color-justi-attente-stripe) 4px,
-            var(--color-justi-attente) 4px,
-            var(--color-justi-attente) 7px
-        )!important;
-    }
-    .demo.invalide {
-        background-color: var(--color-justi-invalide) !important;
-    }
-    .demo.attente {
-        background: repeating-linear-gradient(
-            to bottom,
-            var(--color-justi-attente-stripe) 0px,
-            var(--color-justi-attente-stripe) 4px,
-            var(--color-justi-attente) 4px,
-            var(--color-justi-attente) 7px
-        )!important;
-    }
-
-    .demo.est_just {
-        background-color: var(--color-justi) !important;
-    }
-
-
-    .demi .day.nonwork>span {
-        flex: none;
-        border: none;
-    }
-
-    .demi .day {
-        border-radius: 0;
-    }
-
-
-
-    .day .dayline {
-        position: absolute;
-        display: none;
-        top: 100%;
-        z-index: 50;
-        width: max-content;
-        height: 75px;
-        background-color: #dedede;
-        border-radius: 15px;
-        padding: 5px;
-    }
-
-    .day:hover .dayline {
-        display: block;
-    }
-
-    .dayline .mini-timeline {
-        margin-top: 10%;
-    }
-
-    .dayline-title {
-        margin: 0;
-    }
-
-    .dayline .mini_tick {
-        position: absolute;
-        text-align: center;
-        top: 0;
-        transform: translateY(-110%);
-        z-index: 50;
-    }
-
-    .dayline .mini_tick::after {
-        display: block;
-        content: "|";
-        position: absolute;
-        bottom: -69%;
-        z-index: 2;
-        transform: translateX(200%);
-    }
-
-    #label-nom,
-    #label-justi {
-        display: none;
-    }
-
-    .demi .day {
-        display: flex;
-        justify-content: space-evenly;
-    }
-
-    .demi .day>span {
-        display: block;
-        flex: 1;
-        text-align: center;
-        z-index: 1;
-        width: 100%;
-        border: 1px solid #d5d5d5;
-        position: relative;
-    }
-
-    .demi .day>span:first-of-type {
-        width: 3em;
-        min-width: 3em;
-    }
-
-    .options>* {
-        margin-right: 5px;
-    }
-
-    .options input {
-        margin-right: 6px;
-    }
-
-    .options label {
-        font-weight: normal;
-        margin-right: 16px;
-    }
-
-    @media print {
-
-        .couleurs.print {
-            display: flex;
-            justify-content: space-evenly;
-            align-items: center;
-        }
-
-        .couleurs.print li {
-            list-style-type: none !important;
-            -webkit-print-color-adjust: exact !important;
-            print-color-adjust: exact !important;
-        }
-
-        .day,
-        .demi .day.color.color.nonwork {
-            min-width: 5em;
-            font-size: 11px;
-        }
-
-        .demi .day>span:first-of-type {
-            width: 2.5em;
-            min-width: 2.5em;
-        }
-
-        .color {
-            -webkit-print-color-adjust: exact !important;
-            print-color-adjust: exact !important;
-        }
-
-        .day.est_just,
-        .demi .day span.est_just {
-            background-image: none;
-
-        }
-
-        .day.invalide,
-        .demi .day span.invalide {
-            background-image: none;
-        }
-
-        .demi .day span.est_just::before {
-            content: "J";
-        }
-
-        .demi .day span.invalide::before {
-            content: "JI";
-        }
-
-        #sidebar,
-        .help,
-        h2,
-        #annee,
-        #label-changer,
-        .options {
-            display: none;
-        }
-
-        #label-nom,
-        #label-justi {
-            display: inline;
-        }
-
-        #gtrcontent {
-            margin: 5px;
-        }
-
-        .annee {
-            display: flex;
-            justify-content: space-evenly;
-            align-items: center;
-        }
-    }
-</style>
-
-<script>
-
-    const datePivot = "{{scu.get_assiduites_time_config("pivot")}}".split(":").map((el) => Number(el))
-
-    function getDaysBetweenDates(start, end) {
-        let now = new Date(start);
-        end = new Date(end);
-        let dates = [];
-
-        while (now.isBefore(end) || now.isSame(end)) {
-            dates.push(now.clone());
-            now.add(1, "days");
-        }
-
-        return dates;
-    }
-
-    function organizeByMonth(dates) {
-        let datesByMonth = {};
-
-        dates.forEach((date) => {
-            let month = date.toLocaleString('fr-FR', { month: "short" }); // Obtenir le mois
-
-            if (!datesByMonth[month]) {
-                datesByMonth[month] = [];
-            }
-
-            datesByMonth[month].push(date);
-        });
-
-        return datesByMonth;
-    }
-
-    function organizeAssiduitiesByDay(datesByMonth, assiduities, justificatifs) {
-        let assiduitiesByDay = {};
-
-        Object.keys(datesByMonth).forEach((month) => {
-            assiduitiesByDay[month] = {};
-
-            datesByMonth[month].forEach((date) => {
-                let dayAssiduities = assiduities.filter((assiduity) => {
-                    return new Date(date).isBetween(
-                        new Date(assiduity.date_debut).startOf("day"),
-                        new Date(assiduity.date_fin).endOf("day"),
-                        "[]"
-                    )
-                });
-
-                let dayJustificatifs = justificatifs.filter((justif) => {
-                    return new Date(date).isBetween(
-                        new Date(justif.date_debut).startOf("day"),
-                        new Date(justif.date_fin).endOf("day"),
-                        "[]"
-                    )
-                });
-
-                assiduitiesByDay[month][date.toLocaleDateString("en-US")] = {
-                    assiduites: dayAssiduities,
-                    justificatifs: dayJustificatifs
-                };
-            });
-        });
-
-        return assiduitiesByDay;
-    }
-
-    function generateCalendar(assiduitiesByDay, nonWorkdays = []) {
-        // assiduitiesByDay[month][date] avec date au format m/d/y !!!
-        const calendar = document.querySelector('.calendrier')
-        const options = getOptions();
-        calendar.innerHTML = ""
-
-        const days = {
-            1: "Lun",
-            2: "Mar",
-            3: "Mer",
-            4: "Jeu",
-            5: "Ven",
-            6: "Sam",
-            0: "Dim",
-        };
-        // XXX formats de données très exotiques !
-        // XXX assiduitiesByDay["oct."]["10/12/2023"]
-        // XXX     Object { assiduites: [], justificatifs: [] }
-        Object.keys(assiduitiesByDay).forEach((month) => {
-            const monthEl = document.createElement('div')
-            monthEl.classList.add("month")
-            const title = document.createElement('h3');
-            title.textContent = `${month.capitalize()}`;
-            monthEl.appendChild(title)
-
-            const daysEl = document.createElement('div')
-            daysEl.classList.add('days');
-            if (options.mode_demi) daysEl.classList.add("demi");
-            Object.keys(assiduitiesByDay[month]).forEach((date) => {
-                let dayAssiduities = assiduitiesByDay[month][date].assiduites;
-                let dayJustificatifs = assiduitiesByDay[month][date].justificatifs;
-                let color = "sans_etat";
-
-                if (dayAssiduities.some((a) => a.etat.toLowerCase() === "absent")) color = "absent";
-                else if (dayAssiduities.some((a) => a.etat.toLowerCase() === "retard") && options.show_reta)
-                    color = "retard";
-                else if (dayAssiduities.some((a) => a.etat.toLowerCase() === "present") && options.show_pres)
-                    color = "present";
-
-
-                let est_just = ""
-                if (dayJustificatifs.some((j) => j.etat.toLowerCase() === "valide")) {
-                    est_just = "est_just";
-                } else if (dayJustificatifs.some((j) => j.etat.toLowerCase() === "attente")) {
-                        est_just = "attente";
-                } else if (dayJustificatifs.some((j) => j.etat.toLowerCase() === "modifie")) {
-                        est_just = "modifie";
-                } else if (dayJustificatifs.some((j) => j.etat.toLowerCase() !== "valide")) {
-                    est_just = "invalide";
-                }
-                const momentDate = new Date(date);
-                let dayOfMonth = momentDate.getDate();
-                let dayOfWeek = momentDate.getDay();
-                dayOfWeek = days[dayOfWeek];
-
-                let isNonWorkDayVar = nonWorkdays.includes(dayOfWeek.toLowerCase());
-                const day = document.createElement('div');
-                day.className = `day`;
-                if (isNonWorkDayVar) {
-                    color = "nonwork";
-                } else if (!options.mode_demi) {
-                    day.className = `day ${est_just}`;
-                }
-
-
-                if (options.mode_demi && !isNonWorkDayVar) {
-
-                    est_just = []
-                    // affichage n° jour + matin + aprem
-
-                    const span_jour = document.createElement("span")
-                    span_jour.textContent = dayOfWeek[0] + dayOfMonth;
-
-                    const span_matin = document.createElement("span");
-                    span_matin.classList.add("color");
-                    const matin = [new Date(date), new Date(date)]
-                    color = "sans_etat"
-                    matin[0].setHours(0, 0, 0, 0)
-                    matin[1].setHours(...datePivot)
-
-
-
-                    const assiduitesMatin = dayAssiduities.filter((el) => {
-                        const deb = new Date(el.date_debut);
-                        const fin = new Date(el.date_fin);
-                        return Date.intersect({ deb: deb, fin: fin }, { deb: matin[0], fin: matin[1] })
-                    })
-                    const justificatifsMatin = dayJustificatifs.filter((el) => {
-                        const deb = new Date(el.date_debut);
-                        const fin = new Date(el.date_fin);
-                        return Date.intersect({ deb: deb, fin: fin }, { deb: matin[0], fin: matin[1] })
-                    })
-
-                    if (assiduitesMatin.some((a) => a.etat.toLowerCase() === "absent")) color = "absent";
-                    else if (assiduitesMatin.some((a) => a.etat.toLowerCase() === "retard") && options.show_reta)
-                        color = "retard";
-                    else if (assiduitesMatin.some((a) => a.etat.toLowerCase() === "present") && options.show_pres)
-                        color = "present";
-
-                    if (color != "") {
-                        span_matin.classList.add(color);
-                    }
-
-                    if (justificatifsMatin.some((j) => j.etat.toLowerCase() === "valide")) {
-                        est_just = ["est_just"];
-                    } else if (justificatifsMatin.some((j) => j.etat.toLowerCase() === "attente")) {
-                        est_just = ["attente"];
-                    } else if (justificatifsMatin.some((j) => j.etat.toLowerCase() === "modifie")) {
-                        est_just = ["modifie"];
-                    }
-                    else if (justificatifsMatin.some((j) => j.etat.toLowerCase() !== "valide")) {
-                        est_just = ["invalide"];
-                    }
-
-                    span_matin.classList.add(...est_just)
-
-
-                    est_just = []
-                    const span_aprem = document.createElement("span");
-                    span_aprem.classList.add("color");
-                    const aprem = [new Date(date), new Date(date)]
-                    color = "sans_etat"
-                    aprem[0].setHours(...datePivot)
-                    aprem[0].add(1, "seconds")
-                    aprem[1].setHours(23, 59, 59)
-
-
-                    const assiduitesAprem = dayAssiduities.filter((el) => {
-                        const deb = new Date(el.date_debut);
-                        const fin = new Date(el.date_fin);
-                        return Date.intersect({ deb: deb, fin: fin }, { deb: aprem[0], fin: aprem[1] })
-                    })
-
-                    const justificatifsAprem = dayJustificatifs.filter((el) => {
-                        const deb = new Date(el.date_debut);
-                        const fin = new Date(el.date_fin);
-                        return Date.intersect({ deb: deb, fin: fin }, { deb: aprem[0], fin: aprem[1] })
-                    })
-
-                    if (assiduitesAprem.some((a) => a.etat.toLowerCase() === "absent")) color = "absent";
-                    else if (assiduitesAprem.some((a) => a.etat.toLowerCase() === "retard") && options.show_reta)
-                        color = "retard";
-                    else if (assiduitesAprem.some((a) => a.etat.toLowerCase() === "present") && options.show_pres)
-                        color = "present";
-
-                    if (color != "") {
-                        span_aprem.classList.add(color);
-                    }
-
-                    if (justificatifsAprem.some((j) => j.etat.toLowerCase() === "valide")) {
-                        est_just = ["est_just"];
-                    } else if (justificatifsAprem.some((j) => j.etat.toLowerCase() === "attente")) {
-                        est_just = ["attente"];
-                    } else if (justificatifsAprem.some((j) => j.etat.toLowerCase() === "modifie")) {
-                        est_just = ["modifie"];
-                    } else if (justificatifsAprem.some((j) => j.etat.toLowerCase() !== "valide")) {
-                        est_just = ["invalide"];
-                    }
-
-                    span_aprem.classList.add(...est_just)
-
-                    day.appendChild(span_jour)
-                    day.appendChild(span_matin)
-                    day.appendChild(span_aprem)
-
-
-                } else {
-                    day.classList.add("color")
-                    if (color != "") {
-                        day.classList.add(color);
-                    }
-
-                    if (isNonWorkDayVar) {
-                        const span_jour = document.createElement("span")
-                        span_jour.textContent = dayOfWeek[0] + dayOfMonth;
-                        day.appendChild(span_jour);
-                    } else {
-                        day.textContent = `${dayOfWeek} ${dayOfMonth}`;
-                    }
-
-
-                }
-
-
-                if (!nonWorkdays.includes(dayOfWeek.toLowerCase()) && dayAssiduities.length > 0) {
-                    const cache = document.createElement('div')
-                    cache.classList.add('dayline');
-                    const title = document.createElement('div')
-                    title.className = "dayline-title";
-
-                    title.innerHTML = "<span>Assiduité du </span><br>" + `<span>${formatDate(momentDate)}</span>`;
-                    cache.appendChild(title)
-                    cache.appendChild(
-                        createMiniTimeline(dayAssiduities, date)
-                    )
-                    day.appendChild(cache)
-                }
-
-
-
-                daysEl.appendChild(day);
-            });
-            monthEl.appendChild(daysEl)
-            calendar.appendChild(monthEl)
-        });
-
-    }
-
-    function getEtudAssiduites(deb, fin, callback = () => { }) {
-        const url_api =
-            getUrl() +
-            `/api/assiduites/${etudid}/query?date_debut=${deb}&date_fin=${fin}`;
-        async_get(url_api, (data) => {
-            callback(data);
-        });
-    }
-
-    function getOptions() {
-        return {
-            "show_pres": document.getElementById("show_pres").checked,
-            "show_reta": document.getElementById("show_reta").checked,
-            "mode_demi": document.getElementById("mode_demi").checked,
-        }
-    }
-
-    function getEtudJustificatifs(deb, fin) {
-        let list = [];
-        const url_api =
-            getUrl() +
-            `/api/justificatifs/${etudid}/query?date_debut=${deb}&date_fin=${fin}`;
-        sync_get(url_api, (data, status) => {
-            if (status === "success") {
-                list = data;
-            }
-        });
-
-        return list
-    }
-
-    function generate(annee) {
-        if (annee < 1999 || annee > 2999) {
-            openAlertModal("Année impossible", document.createTextNode("L'année demandé n'existe pas."));
-            return;
-        }
-        const bornes = {
-            deb: `${annee}-09-01T00:00`,
-            fin: `${annee + 1}-08-31T23:59`
-        }
-
-        let assiduities = getEtudAssiduites(bornes.deb, bornes.fin, (data) => {
-            let dates = getDaysBetweenDates(bornes.deb, bornes.fin);
-            let datesByMonth = organizeByMonth(dates);
-            const justifs = getEtudJustificatifs(bornes.deb, bornes.fin);
-            let assiduitiesByDay = organizeAssiduitiesByDay(datesByMonth, data, justifs);
-            generateCalendar(assiduitiesByDay, nonwork);
-        });
-
-    }
-
-    function setterAnnee(annee) {
-        annee = parseInt(annee);
-        document.querySelector('.annee #label-annee').textContent = `Année scolaire ${annee}-${annee + 1}`
-        generate(annee)
-
-    }
-
-    const defAnnee = {{ annee }}
-    let annees = {{ annees | safe }}
-    annees = annees.filter((x, i) => annees.indexOf(x) === i)
-    const etudid = {{ sco.etud.id }};
-    const nonwork = [{{ nonworkdays | safe }}];
-    window.onload = () => {
-        const select = document.querySelector('#annee');
-        annees.forEach((a) => {
-            const opt = document.createElement("option");
-            opt.value = a + "",
-                opt.textContent = `${a} - ${a + 1}`;
-            if (a === defAnnee) {
-                opt.selected = true;
-            }
-            select.appendChild(opt)
-        })
-
-        document.querySelectorAll(".options input").forEach((e) => {
-            e.addEventListener("click", () => {
-                setterAnnee(select.value)
-            })
-        })
-        setterAnnee(defAnnee)
-    };
-
-
-    function isCalendrier() { return true }
-
-    /* --- Mémorisation des checkbox ---- */
-    document.querySelectorAll('input[type="checkbox"].memo').forEach(checkbox => {
-        checkbox.addEventListener('change', function() {
-            localStorage.setItem(this.id, this.checked);
-    });
-    // Load the saved state
-    document.querySelectorAll('input[type="checkbox"].memo').forEach(checkbox => {
-        const checked = localStorage.getItem(checkbox.id) === 'true';
-        checkbox.checked = checked;
-    });
-});
-</script>
-{% endblock pageContent %}
diff --git a/app/templates/assiduites/pages/calendrier_assi_etud.j2 b/app/templates/assiduites/pages/calendrier_assi_etud.j2
new file mode 100644
index 000000000..3eaedb52b
--- /dev/null
+++ b/app/templates/assiduites/pages/calendrier_assi_etud.j2
@@ -0,0 +1,596 @@
+{% block pageContent %}
+{% include "assiduites/widgets/alert.j2" %}
+
+<div class="pageContent">
+    <h2>Assiduité de {{sco.etud.html_link_fiche()|safe}}</h2>
+
+    <div class="options">
+        <input type="checkbox" id="show_pres" name="show_pres" class="memo" {{'checked' if show_pres else ''}}><label for="show_pres">afficher les présences</label>
+        <input type="checkbox" name="show_reta" id="show_reta" class="memo" {{'checked' if show_reta else ''}}><label for="show_reta">afficher les retards</label>
+        <input type="checkbox" name="mode_demi" id="mode_demi" class="memo" {{'checked' if mode_demi else ''}}><label for="mode_demi">mode demi journée</label>
+    </div>
+
+    <div class="calendrier">    
+        {% for mois,jours in calendrier.items() %}  
+            <div class="month">
+                <h3>{{mois}}</h3>
+                <div class="days {{'demi' if mode_demi else ''}}">
+                    {% for jour in jours %}
+                        {% if jour.is_non_work() %}
+                        <div class="day {{jour.get_class()}}">
+                            <span>{{jour.get_nom()}}</span>
+                        {% else %}
+                        <div class="day {{jour.get_class(show_pres, show_reta) if not mode_demi else ''}}">
+                        {% endif %}
+                        {% if mode_demi %}
+                            {% if not jour.is_non_work() %}
+                            <span>{{jour.get_nom()}}</span>
+                            <span class="{{jour.get_demi_class(True, show_pres,show_reta)}}"></span>
+                            <span class="{{jour.get_demi_class(False, show_pres,show_reta)}}"></span>
+                            {% endif %}
+                        {% else %}
+                            {% if not jour.is_non_work() %}
+                            <span>{{jour.get_nom(False)}}</span>
+                            {% endif %}
+                        {% endif %}
+
+                        {% if not jour.is_non_work() and jour.has_assiduites()%}
+                        
+                        <div class="dayline">
+                            <div class="dayline-title">
+                            <span>Assiduité du</span>
+                            <br>
+                            <span>{{jour.get_date()}}</span>
+                            {{jour.generate_minitimeline() | safe}}
+                            </div>
+                        </div>
+
+                        {% endif %}
+                        </div>
+
+                    {% endfor %}
+                </div>
+            </div>
+        {% endfor %}
+    </div>
+    <div class="annee">
+        <span id="label-annee">Année scolaire 2022-2023</span><span id="label-changer" style="margin-left: 5px;">Changer
+            année: </span>
+        <select name="" id="annee">
+        </select>
+
+        <span id="label-nom">Assiduité de {{sco.etud.nomprenom}}</span>
+    </div>
+
+    <div class="help">
+        <h3>Calendrier</h3>
+        <p>Code couleur</p>
+        <ul class="couleurs">
+            <li><span title="Vert" class="present demo"></span> &rightarrow; présence de l'étudiant lors de la période
+            </li>
+            <li><span title="Bleu clair" class="nonwork demo"></span> &rightarrow; la période n'est pas travaillée
+            </li>
+            <li><span title="Rouge" class="absent demo"></span> &rightarrow; absence de l'étudiant lors de la période
+            </li>
+            <li><span title="Rose" class="demo color absent est_just"></span> &rightarrow; absence justifiée
+            </li>
+            <li><span title="Orange" class="retard demo"></span> &rightarrow; retard de l'étudiant lors de la période
+            </li>
+            <li><span title="Jaune clair" class="demo color retard est_just"></span> &rightarrow; retard justifié
+            </li>
+
+            <li><span title="Quart Bleu" class="est_just demo"></span> &rightarrow; la période est couverte par un
+                justificatif valide</li>
+            <li><span title="Justif. non valide" class="invalide demo"></span> &rightarrow; la période est
+                couverte par un justificatif non valide
+            </li>
+            <li><span title="Justif. en attente" class="attente demo"></span> &rightarrow; la période
+                a un justificatif en attente de validation
+            </li>
+        </ul>
+
+
+        <p>Vous pouvez passer le curseur sur les jours colorés afin de voir les informations supplémentaires</p>
+    </div>
+    <ul class="couleurs print">
+        <li><span title="Vert" class="present demo"></span> présence
+        </li>
+        <li><span title="Bleu clair" class="nonwork demo"></span> non travaillé
+        </li>
+        <li><span title="Rouge" class="absent demo"></span> absence
+        </li>
+        <li><span title="Rose" class="demo color absent est_just"></span> absence justifiée
+        </li>
+        <li><span title="Orange" class="retard demo"></span> retard
+        </li>
+        <li><span title="Jaune clair" class="demo color retard est_just"></span>retard justifié
+        </li>
+        <li><span title="Quart Bleu" class="est_just demo"></span>
+            justificatif valide</li>
+        <li><span title="Quart Violet" class="invalide demo"></span> justificatif non valide
+        </li>
+    </ul>
+</div>
+
+<style>
+    .help .couleurs {
+        grid-template-columns: 2;
+        grid-template-rows: auto;
+        display: grid;
+    }
+
+    .couleurs.print {
+        display: none;
+    }
+
+    .help .couleurs li:nth-child(odd) {
+        grid-column: 1;
+        list-style-type: none;
+    }
+
+    .help .couleurs li:nth-child(even) {
+        grid-column: 2;
+        list-style-type: none;
+    }
+
+    .color.present {
+        background-color: var(--color-present) !important;
+    }
+
+    .color.absent {
+        background-color: var(--color-absent) !important;
+    }
+
+    .color.absent.est_just {
+        background-color: var(--color-absent-justi) !important;
+    }
+    .color.retard {
+        background-color: var(--color-retard) !important;
+    }
+
+    .color.retard.est_just {
+        background-color: var(--color-retard-justi) !important;
+    }
+
+    .color.nonwork {
+        background-color: var(--color-nonwork) !important;
+    }
+
+    .color {
+        background-color: var(--color-defaut) !important;
+    }
+
+    .pageContent {
+        margin-top: 1vh;
+        max-width: var(--sco-content-max-width);
+    }
+
+    .calendrier {
+        display: flex;
+        justify-content: space-evenly;
+        flex-wrap: wrap;
+        border: 1px solid #444;
+        border-radius: 12px;
+        margin-bottom: 12px;
+    }
+
+    .month h3 {
+        text-align: center;
+    }
+
+    .day,
+    .demi .day.color.nonwork {
+        text-align: left;
+        margin: 2px;
+        cursor: default;
+        font-size: 13px;
+        position: relative;
+        font-weight: normal;
+        min-width: 6em;
+        display: flex;
+        justify-content: start;
+    }
+
+    .color.est_just.sans_etat::before {
+        content: "";
+        position: absolute;
+        width: 25%;
+        height: 100%;
+        background-color: var(--color-justi) !important;
+        right: 0;
+    }
+
+    .color.invalide::before {
+        content: "";
+        position: absolute;
+        width: 25%;
+        height: 100%;
+        right: 0;
+        background-color: var(--color-justi-invalide) !important;
+    }
+    .color.attente::before,  .color.modifie::before {
+        content: "";
+        position: absolute;
+        width: 25%;
+        height: 100%;
+        right: 0;
+        background: repeating-linear-gradient(
+            to bottom,
+            var(--color-justi-attente-stripe) 0px,
+            var(--color-justi-attente-stripe) 4px,
+            var(--color-justi-attente) 4px,
+            var(--color-justi-attente) 7px
+        )!important;
+    }
+    .demo.invalide {
+        background-color: var(--color-justi-invalide) !important;
+    }
+    .demo.attente {
+        background: repeating-linear-gradient(
+            to bottom,
+            var(--color-justi-attente-stripe) 0px,
+            var(--color-justi-attente-stripe) 4px,
+            var(--color-justi-attente) 4px,
+            var(--color-justi-attente) 7px
+        )!important;
+    }
+
+    .demo.est_just {
+        background-color: var(--color-justi) !important;
+    }
+
+
+    .demi .day.nonwork>span {
+        flex: none;
+        border: none;
+    }
+
+    .demi .day {
+        border-radius: 0;
+    }
+
+
+
+    .day .dayline {
+        position: absolute;
+        display: none;
+        top: 100%;
+        z-index: 50;
+        width: max-content;
+        height: 75px;
+        background-color: #dedede;
+        border-radius: 15px;
+        padding: 5px;
+    }
+
+    .day:hover .dayline {
+        display: block;
+    }
+
+    .dayline .mini-timeline {
+        margin-top: 10%;
+    }
+
+    .dayline-title {
+        margin: 0;
+    }
+
+    .dayline .mini_tick {
+        position: absolute;
+        text-align: center;
+        top: 0;
+        transform: translateY(-110%);
+        z-index: 50;
+    }
+
+    .dayline .mini_tick::after {
+        display: block;
+        content: "|";
+        position: absolute;
+        bottom: -69%;
+        z-index: 2;
+        transform: translateX(200%);
+    }
+
+    #label-nom,
+    #label-justi {
+        display: none;
+    }
+
+    .demi .day {
+        display: flex;
+        justify-content: space-evenly;
+    }
+
+    .demi .day>span {
+        display: block;
+        flex: 1;
+        text-align: center;
+        z-index: 1;
+        width: 100%;
+        border: 1px solid #d5d5d5;
+        position: relative;
+    }
+
+    .demi .day>span:first-of-type {
+        width: 3em;
+        min-width: 3em;
+    }
+
+    .options>* {
+        margin-right: 5px;
+    }
+
+    .options input {
+        margin-right: 6px;
+    }
+
+    .options label {
+        font-weight: normal;
+        margin-right: 16px;
+    }
+
+
+    /*Gestion des bubbles*/
+    .assiduite-bubble {
+        position: relative;
+        display: none;
+        background-color: #f9f9f9;
+        border-radius: 5px;
+        padding: 8px;
+        border: 3px solid #ccc;
+        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+        font-size: 12px;
+        line-height: 1.4;
+        z-index: 500;
+        min-width: max-content;
+        top: 200%;
+    }
+
+    .mini-timeline-block:hover .assiduite-bubble {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        flex-direction: column;
+    }
+
+    .assiduite-bubble::before {
+        content: "";
+        position: absolute;
+        bottom: 100%;
+        left: 50%;
+        transform: translateX(-50%);
+        border-width: 6px;
+        border-style: solid;
+        border-color: transparent transparent #f9f9f9 transparent;
+    }
+
+    .assiduite-bubble::after {
+        content: "";
+        position: absolute;
+        bottom: 100%;
+        left: 50%;
+        transform: translateX(-50%);
+        border-width: 5px;
+        border-style: solid;
+        border-color: transparent transparent #ccc transparent;
+    }
+
+    .assiduite-id,
+    .assiduite-period,
+    .assiduite-state,
+    .assiduite-user_id {
+        margin-bottom: 4px;
+    }
+
+    .assiduite-bubble.absent {
+        border-color: var(--color-absent) !important;
+    }
+
+    .assiduite-bubble.present {
+        border-color: var(--color-present) !important;
+    }
+
+    .assiduite-bubble.retard {
+        border-color: var(--color-retard) !important;
+    }
+
+    /*Gestion des minitimelines*/
+    .mini-timeline {
+        height: 7px;
+        border: 1px solid black;
+        position: relative;
+        background-color: white;
+    }
+
+    .mini-timeline.single {
+        height: 9px;
+    }
+
+    .mini-timeline-block {
+        position: absolute;
+        height: 100%;
+        z-index: 1;
+        display: flex;
+        justify-content: flex-start;
+        align-items: center;
+        flex-direction: column;
+    }
+
+    .mini-timeline-block {
+        cursor: pointer;
+    }
+
+    .mini_tick {
+        position: absolute;
+        text-align: start;
+        top: -40px;
+        transform: translateX(-50%);
+        z-index: 50;
+
+    }
+
+    .mini_tick::after {
+        display: block;
+        content: "|";
+        position: absolute;
+        bottom: -2px;
+        z-index: 2;
+    }
+
+    .mini-timeline-block.creneau {
+        outline: 3px solid var(--color-primary);
+        pointer-events: none;
+    }
+
+    .mini-timeline-block.absent {
+        background-color: var(--color-absent) !important;
+    }
+
+    .mini-timeline-block.present {
+        background-color: var(--color-present) !important;
+    }
+
+    .mini-timeline-block.retard {
+        background-color: var(--color-retard) !important;
+    }
+
+    .mini-timeline-block.justified {
+        background-image: var(--motif-justi);
+    }
+
+    .mini-timeline-block.invalid_justified {
+        background-image: var(--motif-justi-invalide);
+    }
+
+    @media print {
+
+        .couleurs.print {
+            display: flex;
+            justify-content: space-evenly;
+            align-items: center;
+        }
+
+        .couleurs.print li {
+            list-style-type: none !important;
+            -webkit-print-color-adjust: exact !important;
+            print-color-adjust: exact !important;
+        }
+
+        .day,
+        .demi .day.color.color.nonwork {
+            min-width: 5em;
+            font-size: 11px;
+        }
+
+        .demi .day>span:first-of-type {
+            width: 2.5em;
+            min-width: 2.5em;
+        }
+
+        .color {
+            -webkit-print-color-adjust: exact !important;
+            print-color-adjust: exact !important;
+        }
+
+        .day.est_just,
+        .demi .day span.est_just {
+            background-image: none;
+
+        }
+
+        .day.invalide,
+        .demi .day span.invalide {
+            background-image: none;
+        }
+
+        .demi .day span.est_just::before {
+            content: "J";
+        }
+
+        .demi .day span.invalide::before {
+            content: "JI";
+        }
+
+        #sidebar,
+        .help,
+        h2,
+        #annee,
+        #label-changer,
+        .options {
+            display: none;
+        }
+
+        #label-nom,
+        #label-justi {
+            display: inline;
+        }
+
+        #gtrcontent {
+            margin: 5px;
+        }
+
+        .annee {
+            display: flex;
+            justify-content: space-evenly;
+            align-items: center;
+        }
+    }
+</style>
+
+<script>
+    function getOptions() {
+        return {
+            "show_pres": document.getElementById("show_pres").checked,
+            "show_reta": document.getElementById("show_reta").checked,
+            "mode_demi": document.getElementById("mode_demi").checked,
+        }
+    }
+
+    
+    function updatePage(){
+        const url = new URL(location.href);
+        const options = getOptions();
+        url.searchParams.set("annee", document.getElementById('annee').value);
+        url.searchParams.set("mode_demi", options.mode_demi);
+        url.searchParams.set("show_pres", options.show_pres);
+        url.searchParams.set("show_reta", options.show_reta);
+
+        if (location.href != url.href){
+            location.href = url.href
+        }
+    }
+
+    const defAnnee = {{ annee }}
+    let annees = {{ annees | safe }}
+    annees = annees.filter((x, i) => annees.indexOf(x) === i)
+    const etudid = {{ sco.etud.id }};
+
+    const select = document.querySelector('#annee');
+    annees.forEach((a) => {
+        const opt = document.createElement("option");
+        opt.value = a + "",
+            opt.textContent = `${a} - ${a + 1}`;
+        if (a === defAnnee) {
+            opt.selected = true;
+            document.querySelector('.annee #label-annee').textContent = `Année scolaire ${a}-${a + 1}`
+
+        }
+        select.appendChild(opt)
+    })
+    
+    document.querySelectorAll('input[type="checkbox"].memo, #annee').forEach(el => {
+        el.addEventListener('change', function() {
+            updatePage();
+    })});
+    
+    document.querySelectorAll('[assi_id]').forEach((el,i) => {
+        el.addEventListener('click', ()=>{
+            const assi_id = el.getAttribute('assi_id');
+            window.open(`${SCO_URL}/Assiduites/tableau_assiduite_actions?type=assiduite&action=details&obj_id=${assi_id}`);
+        })
+    });
+    
+
+</script>
+{% endblock pageContent %}
diff --git a/app/templates/assiduites/pages/choix_date.j2 b/app/templates/assiduites/pages/choix_date.j2
new file mode 100644
index 000000000..d743ac15e
--- /dev/null
+++ b/app/templates/assiduites/pages/choix_date.j2
@@ -0,0 +1,30 @@
+{% extends "sco_page.j2" %}
+{% import 'wtf.j2' as wtf %}
+
+{% block styles %}
+    {{super()}}
+    <link rel="stylesheet" href="{{scu.STATIC_DIR}}/libjs/timepicker-1.3.5/jquery.timepicker.min.css"/>
+{% endblock %}
+
+{% block app_content %}
+    {% for err_msg in form.error_messages %}
+        <div class="wtf-error-messages">
+            {{ err_msg }}
+        </div>
+    {% endfor %}
+    <h2>La date courante n'est pas dans le semestre ({{deb}} -> {{fin}})</h2>
+    <h2>Choissez une autre date</h2>
+
+    <form action="" method="post">
+        {{ form.hidden_tag() }}
+        {{ form.date.label }}&nbsp;: {{ form.date }}
+        <div class="submit">
+        {{ form.submit }} {{ form.cancel }}
+        </div>
+    </form>
+
+{% endblock app_content %}
+{% block scripts %}
+{{ super() }}
+<script src="{{scu.STATIC_DIR}}/libjs/timepicker-1.3.5/jquery.timepicker.min.js"></script>
+{% endblock scripts %}
\ No newline at end of file
diff --git a/app/templates/assiduites/pages/signal_assiduites_etud.j2 b/app/templates/assiduites/pages/signal_assiduites_etud.j2
index 2284604a7..ea4530952 100644
--- a/app/templates/assiduites/pages/signal_assiduites_etud.j2
+++ b/app/templates/assiduites/pages/signal_assiduites_etud.j2
@@ -102,6 +102,9 @@
 
 
         setupTimeLine(() => {
+            if(document.querySelector('.etud_holder .placeholder') != null){
+                    generateAllEtudRow();
+            }
             updateJustifyBtn();
         });
 
diff --git a/app/templates/assiduites/pages/signal_assiduites_group.j2 b/app/templates/assiduites/pages/signal_assiduites_group.j2
index 15fd6a48f..238dd25c7 100644
--- a/app/templates/assiduites/pages/signal_assiduites_group.j2
+++ b/app/templates/assiduites/pages/signal_assiduites_group.j2
@@ -26,11 +26,9 @@
         </div>
     </fieldset>
 
+    {% if readonly == "false" %}
     {{timeline|safe}}
 
-
-
-    {% if readonly == "false" %}
     <div style="margin: 1vh 0;">
         <div id="forcemodule" style="display: none; margin:10px 0px;">
             Vous devez spécifier le module ! (voir réglage préférence du semestre)
@@ -40,7 +38,6 @@
     {% else %}
     {% endif %}
 
-
     {% if readonly == "true" %}
     <button id="validate_selectors" onclick="validateSelectors(this)">
         Voir l'assiduité
@@ -50,11 +47,11 @@
         Faire la saisie
     </button>
     {% endif %}
+    <p>Utilisez le bouton "Actualiser" si vous modifier la date ou le(s) groupe(s) sélectionné(s)</p>
+
 
     <div class="etud_holder">
         <p class="placeholder">
-            Veillez à choisir le groupe concerné et la date.
-            Après validation, il faudra recharger la page pour changer ces informations.
         </p>
     </div>
     <div class="legende">
@@ -84,6 +81,13 @@
 
     <script>
 
+        {% if readonly != "false" %}
+        function getPeriodValues(){
+            return [0, 23]
+        }
+        {% endif %}
+
+
         const nonWorkDays = [{{ nonworkdays| safe }}];
 
         const readOnly = {{ readonly }};
@@ -91,7 +95,13 @@
 
         setupDate();
         updateDate();
-        setupTimeLine();
+        if (!readOnly){
+            setupTimeLine(()=>{
+                if(document.querySelector('.etud_holder .placeholder') != null){
+                    generateAllEtudRow();
+                }
+            });
+        }
 
         window.forceModule = "{{ forcer_module }}"
         window.forceModule = window.forceModule == "True" ? true : false
diff --git a/app/templates/assiduites/pages/test.j2 b/app/templates/assiduites/pages/test.j2
deleted file mode 100644
index 25f23546b..000000000
--- a/app/templates/assiduites/pages/test.j2
+++ /dev/null
@@ -1,18 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Test DateUtils</title>
-    <script src="{{scu.STATIC_DIR}}/js/date_utils.js"></script>
-</head>
-
-<body>
-    <form action="" method="post">
-        <scodoc-datetime name="scodoc-datetime"></scodoc-datetime>
-        <input type="submit" value="valider">
-    </form>
-</body>
-
-</html>
\ No newline at end of file
diff --git a/app/templates/assiduites/widgets/assiduite_bubble.j2 b/app/templates/assiduites/widgets/assiduite_bubble.j2
new file mode 100644
index 000000000..3db6ea25d
--- /dev/null
+++ b/app/templates/assiduites/widgets/assiduite_bubble.j2
@@ -0,0 +1,7 @@
+<div class="assiduite-bubble {{etat}}">
+    <div class="assiduite-id">{{moduleimpl}}</div>
+    <div class="assiduite-period">{{date_debut}}</div>
+    <div class="assiduite-period">{{date_fin}}</div>
+    <div class="assiduite-state">État: {{etat}}</div>
+    <div class="assiduite-user_id">{{saisie}}</div>
+</div>
\ No newline at end of file
diff --git a/app/templates/assiduites/widgets/minitimeline.j2 b/app/templates/assiduites/widgets/minitimeline.j2
index a682f6221..8671d74a1 100644
--- a/app/templates/assiduites/widgets/minitimeline.j2
+++ b/app/templates/assiduites/widgets/minitimeline.j2
@@ -39,6 +39,7 @@
         }
 
         array.forEach((assiduité) => {
+            if(assiduité.etat == "CRENEAU" && readOnly) return;
             let startDate = new Date(Date.removeUTC(assiduité.date_debut));
             let endDate = new Date(Date.removeUTC(assiduité.date_fin));
             if (startDate.isBefore(dayStart)) {
@@ -284,7 +285,7 @@
         text-align: start;
         top: -40px;
         transform: translateX(-50%);
-        z-index: 50;
+        z-index: 1;
 
     }
 
diff --git a/app/templates/assiduites/widgets/minitimeline_simple.j2 b/app/templates/assiduites/widgets/minitimeline_simple.j2
new file mode 100644
index 000000000..5842505f8
--- /dev/null
+++ b/app/templates/assiduites/widgets/minitimeline_simple.j2
@@ -0,0 +1,7 @@
+<div class="mini-timeline">
+{% for assi in assi_blocks %}
+    <div assi_id="{{assi.id}}" class="mini-timeline-block {{assi.etat}} {{assi.est_just}}" style="left: {{assi.emplacement}}%; width:{{assi.longueur}}%;" >
+        {{assi.bubble | safe }}
+    </div>
+{% endfor %}
+</div>
\ No newline at end of file
diff --git a/app/templates/assiduites/widgets/timeline.j2 b/app/templates/assiduites/widgets/timeline.j2
index 116dd920e..24338b0c9 100644
--- a/app/templates/assiduites/widgets/timeline.j2
+++ b/app/templates/assiduites/widgets/timeline.j2
@@ -119,8 +119,6 @@
             };
             const mouseUp = () => {
                 snapHandlesToQuarters();
-                generateAllEtudRow();
-
                 timelineContainer.removeEventListener("mousemove", onMouseMove);
                 handleMoving = false;
                 func_call();
@@ -264,6 +262,7 @@
     }
 
     createTicks();
+
     setPeriodValues(t_start, t_start + period_default);
 
     {% if heures %}
@@ -271,6 +270,7 @@
     if (heure_deb != '' && heure_fin != '') {
         heure_deb = fromTime(heure_deb);
         heure_fin = fromTime(heure_fin);
+        console.warn(heure_deb, heure_fin)
         setPeriodValues(heure_deb, heure_fin)
     }
     {% endif %}
diff --git a/app/views/assiduites.py b/app/views/assiduites.py
index 73f997901..9b064d86a 100644
--- a/app/views/assiduites.py
+++ b/app/views/assiduites.py
@@ -43,6 +43,7 @@ from app.forms.assiduite.ajout_assiduite_etud import (
     AjoutAssiOrJustForm,
     AjoutAssiduiteEtudForm,
     AjoutJustificatifEtudForm,
+    ChoixDateForm,
 )
 from app.models import (
     Assiduite,
@@ -80,6 +81,7 @@ from app.scodoc.sco_exceptions import ScoValueError
 from app.tables.visu_assiduites import TableAssi, etuds_sorted_from_ids
 from app.scodoc.sco_archives_justificatifs import JustificatifArchiver
 
+from flask_sqlalchemy.query import Query
 
 CSSSTYLES = html_sco_header.BOOTSTRAP_MULTISELECT_CSS
 
@@ -170,7 +172,7 @@ class HTMLBuilder:
 
 
 @bp.route("/")
-@bp.route("/BilanDept")
+@bp.route("/bilan_dept")
 @scodoc
 @permission_required(Permission.AbsChange)
 def bilan_dept():
@@ -837,19 +839,11 @@ def calendrier_assi_etud():
     if etud.dept_id != g.scodoc_dept_id:
         abort(404, "étudiant inexistant dans ce département")
 
-    # Préparation de la page
-    header: str = html_sco_header.sco_header(
-        page_title="Calendrier de l'assiduité",
-        init_qtip=True,
-        javascripts=[
-            "js/assiduites.js",
-            "js/date_utils.js",
-        ],
-        cssstyles=CSSSTYLES
-        + [
-            "css/assiduites.css",
-        ],
-    )
+    # Options
+    mode_demi: bool = scu.to_bool(request.args.get("mode_demi", "t"))
+    show_pres: bool = scu.to_bool(request.args.get("show_pres", "f"))
+    show_reta: bool = scu.to_bool(request.args.get("show_reta", "f"))
+    annee: int = int(request.args.get("annee", scu.annee_scolaire()))
 
     # Récupération des années d'étude de l'étudiant
     annees: list[int] = []
@@ -866,20 +860,88 @@ def calendrier_assi_etud():
         annees_str += f"{ann},"
     annees_str += "]"
 
+    # Préparation de la page
+    header: str = html_sco_header.sco_header(
+        page_title="Calendrier de l'assiduité",
+        init_qtip=True,
+        javascripts=[
+            "js/assiduites.js",
+            "js/date_utils.js",
+        ],
+        cssstyles=CSSSTYLES
+        + [
+            "css/assiduites.css",
+        ],
+    )
+
+    calendrier = generate_calendar(etud, annee)
     # Peuplement du template jinja
     return HTMLBuilder(
         header,
         render_template(
-            "assiduites/pages/calendrier.j2",
+            "assiduites/pages/calendrier_assi_etud.j2",
             sco=ScoData(etud),
-            annee=scu.annee_scolaire(),
+            annee=annee,
             nonworkdays=_non_work_days(),
-            minitimeline=_mini_timeline(),
             annees=annees_str,
+            calendrier=calendrier,
+            mode_demi=mode_demi,
+            show_pres=show_pres,
+            show_reta=show_reta,
         ),
     ).build()
 
 
+@bp.route("/choix_date", methods=["GET", "POST"])
+@scodoc
+@permission_required(Permission.AbsChange)
+def choix_date() -> str:
+    formsemestre_id = request.args.get("formsemestre_id")
+    formsemestre: FormSemestre = FormSemestre.query.get_or_404(formsemestre_id)
+
+    group_ids = request.args.get("group_ids")
+    moduleimpl_id = request.args.get("moduleimpl_id")
+    form = ChoixDateForm(request.form)
+
+    if form.validate_on_submit():
+        if form.cancel.data:
+            return redirect(url_for("scodoc.index"))
+        # Vérifier si date dans semestre
+        ok: bool = False
+        try:
+            date: datetime.date = datetime.datetime.strptime(
+                form.date.data, "%d/%m/%Y"
+            ).date()
+            if date < formsemestre.date_debut or date > formsemestre.date_fin:
+                form.set_error(
+                    "La date sélectionnée n'est pas dans le semestre.", form.date
+                )
+            else:
+                ok = True
+        except ValueError:
+            form.set_error("Date invalide", form.date)
+
+        if ok:
+            return redirect(
+                url_for(
+                    "assiduites.signal_assiduites_group",
+                    scodoc_dept=g.scodoc_dept,
+                    formsemestre_id=formsemestre_id,
+                    group_ids=group_ids,
+                    moduleimpl_id=moduleimpl_id,
+                    jour=date.isoformat(),
+                )
+            )
+
+    return render_template(
+        "assiduites/pages/choix_date.j2",
+        form=form,
+        sco=ScoData(formsemestre=formsemestre),
+        deb=formsemestre.date_debut.strftime("%d/%m/%Y"),
+        fin=formsemestre.date_fin.strftime("%d/%m/%Y"),
+    )
+
+
 @bp.route("/signal_assiduites_group")
 @scodoc
 @permission_required(Permission.AbsChange)
@@ -951,15 +1013,15 @@ def signal_assiduites_group():
     real_date = scu.is_iso_formated(date, True).date()
 
     if real_date < formsemestre.date_debut or real_date > formsemestre.date_fin:
-        # Si le jour est hors semestre, indiquer une erreur
-
-        # Formatage des dates pour le message d'erreur
-        real_str = real_date.strftime("%d/%m/%Y")
-        form_deb = formsemestre.date_debut.strftime("%d/%m/%Y")
-        form_fin = formsemestre.date_fin.strftime("%d/%m/%Y")
-        raise ScoValueError(
-            f"Impossible de saisir l'assiduité pour le {real_str}"
-            + f" : Jour en dehors du semestre ( {form_deb} → {form_fin}) "
+        # Si le jour est hors semestre, renvoyer vers choix date
+        return redirect(
+            url_for(
+                "assiduites.choix_date",
+                formsemestre_id=formsemestre_id,
+                group_ids=group_ids,
+                moduleimpl_id=moduleimpl_id,
+                scodoc_dept=g.scodoc_dept,
+            )
         )
 
     # --- Restriction en fonction du moduleimpl_id ---
@@ -1040,7 +1102,7 @@ def signal_assiduites_group():
     ).build()
 
 
-@bp.route("/VisuAssiduiteGr")
+@bp.route("/visu_assiduites_group")
 @scodoc
 @permission_required(Permission.ScoView)
 def visu_assiduites_group():
@@ -1559,20 +1621,10 @@ def _action_modifier_assiduite(assi: Assiduite):
     # Gestion de la description
     assi.description = form["description"]
 
-    module: str = form["moduleimpl_select"]
+    possible_moduleimpl_id: str = form["moduleimpl_select"]
 
-    if module == "":
-        module = None
-    else:
-        try:
-            module = int(module)
-        except ValueError:
-            pass
-    # TODO revoir, documenter (voir set_moduleimpl)
-    # ne pas appeler module ici un paramètre qui s'appelle moduleimpl_id dans la fonction
-    # module == instance de Module
-    # moduleimpl_id : id, toujours integer
-    assi.set_moduleimpl(module)
+    # Raise ScoValueError (si None et force module | Etudiant non inscrit | Module non reconnu)
+    assi.set_moduleimpl(possible_moduleimpl_id)
 
     db.session.add(assi)
     db.session.commit()
@@ -1978,16 +2030,6 @@ def generate_bul_list(etud: Identite, semestre: FormSemestre) -> str:
     )
 
 
-@bp.route("/testDate", methods=["GET", "POST"])
-@scodoc
-@permission_required(Permission.ScoView)
-def testDateutils():
-    """XXX fonction de test a retirer"""
-    if request.method == "POST":
-        print("test date_utils : ", request.form)
-    return render_template("assiduites/pages/test.j2")
-
-
 # --- Fonctions internes ---
 
 
@@ -2239,3 +2281,352 @@ def _get_etuds_dem_def(formsemestre) -> str:
         )
         + "}"
     )
+
+
+# --- Gestion du calendrier ---
+
+
+def generate_calendar(
+    etudiant: Identite,
+    annee: int = None,
+):
+    # Si pas d'année alors on prend l'année scolaire en cours
+    if annee is None:
+        annee = scu.annee_scolaire()
+
+    # On prend du 01/09 au 31/08
+    date_debut: datetime.datetime = datetime.datetime(annee, 9, 1, 0, 0)
+    date_fin: datetime.datetime = datetime.datetime(annee + 1, 8, 31, 23, 59)
+
+    # Filtrage des assiduités et des justificatifs en fonction de la periode / année
+    etud_assiduites: Query = scass.filter_by_date(
+        etudiant.assiduites,
+        Assiduite,
+        date_deb=date_debut,
+        date_fin=date_fin,
+    )
+    etud_justificatifs: Query = scass.filter_by_date(
+        etudiant.justificatifs,
+        Justificatif,
+        date_deb=date_debut,
+        date_fin=date_fin,
+    )
+
+    # Récupération des jours de l'année et de leurs assiduités/justificatifs
+    annee_par_mois: dict[int, list[datetime.date]] = _organize_by_month(
+        _get_dates_between(
+            deb=date_debut.date(),
+            fin=date_fin.date(),
+        ),
+        etud_assiduites,
+        etud_justificatifs,
+    )
+
+    return annee_par_mois
+
+
+WEEKDAYS = {
+    0: "Lun ",
+    1: "Mar ",
+    2: "Mer ",
+    3: "Jeu ",
+    4: "Ven ",
+    5: "Sam ",
+    6: "Dim ",
+}
+
+MONTHS = {
+    1: "Janv.",
+    2: "Févr.",
+    3: "Mars",
+    4: "Avr.",
+    5: "Mai",
+    6: "Juin",
+    7: "Juil.",
+    8: "Août",
+    9: "Sept.",
+    10: "Oct.",
+    11: "Nov.",
+    12: "Déc.",
+}
+
+
+class Jour:
+    """Jour
+    Jour du calendrier
+    get_nom : retourne le numéro et le nom du Jour (ex: M19 / Mer 19)
+    """
+
+    def __init__(self, date: datetime.date, assiduites: Query, justificatifs: Query):
+        self.date = date
+        self.assiduites = assiduites
+        self.justificatifs = justificatifs
+
+    def get_nom(self, mode_demi: bool = True) -> str:
+        str_jour: str = WEEKDAYS.get(self.date.weekday())
+        return f"{str_jour[0] if mode_demi or self.is_non_work() else str_jour}{self.date.day}"
+
+    def get_date(self) -> str:
+        return self.date.strftime("%d/%m/%Y")
+
+    def get_class(self, show_pres: bool = False, show_reta: bool = False) -> str:
+        etat = ""
+        est_just = ""
+
+        if self.is_non_work():
+            return "color nonwork"
+
+        etat = self._get_color_assiduites_cascade(
+            self._get_etats_from_assiduites(self.assiduites),
+            show_pres=show_pres,
+            show_reta=show_reta,
+        )
+
+        est_just = self._get_color_justificatifs_cascade(
+            self._get_etats_from_justificatifs(self.justificatifs),
+        )
+
+        return f"color {etat} {est_just}"
+
+    def get_demi_class(
+        self, matin: bool, show_pres: bool = False, show_reta: bool = False
+    ) -> str:
+        # Transformation d'une heure "HH:MM" en time(h,m)
+        STR_TIME = lambda x: datetime.time(*list(map(int, x.split(":"))))
+
+        heure_midi = STR_TIME(ScoDocSiteConfig.get("assi_lunch_time", "13:00"))
+
+        if matin:
+            heure_matin = STR_TIME(ScoDocSiteConfig.get("assi_morning_time", "08:00"))
+            matin = (
+                # date debut
+                scu.localize_datetime(
+                    datetime.datetime.combine(self.date, heure_matin)
+                ),
+                # date fin
+                scu.localize_datetime(datetime.datetime.combine(self.date, heure_midi)),
+            )
+            assiduites_matin = [
+                assi
+                for assi in self.assiduites
+                if scu.is_period_overlapping((assi.date_debut, assi.date_fin), matin)
+            ]
+            justificatifs_matin = [
+                justi
+                for justi in self.justificatifs
+                if scu.is_period_overlapping((justi.date_debut, justi.date_fin), matin)
+            ]
+
+            etat = self._get_color_assiduites_cascade(
+                self._get_etats_from_assiduites(assiduites_matin),
+                show_pres=show_pres,
+                show_reta=show_reta,
+            )
+
+            est_just = self._get_color_justificatifs_cascade(
+                self._get_etats_from_justificatifs(justificatifs_matin),
+            )
+
+            return f"color {etat} {est_just}"
+
+        heure_soir = STR_TIME(ScoDocSiteConfig.get("assi_afternoon_time", "17:00"))
+
+        # séparation en demi journées
+        aprem = (
+            # date debut
+            scu.localize_datetime(datetime.datetime.combine(self.date, heure_midi)),
+            # date fin
+            scu.localize_datetime(datetime.datetime.combine(self.date, heure_soir)),
+        )
+
+        assiduites_aprem = [
+            assi
+            for assi in self.assiduites
+            if scu.is_period_overlapping((assi.date_debut, assi.date_fin), aprem)
+        ]
+
+        justificatifs_aprem = [
+            justi
+            for justi in self.justificatifs
+            if scu.is_period_overlapping((justi.date_debut, justi.date_fin), aprem)
+        ]
+
+        etat = self._get_color_assiduites_cascade(
+            self._get_etats_from_assiduites(assiduites_aprem),
+            show_pres=show_pres,
+            show_reta=show_reta,
+        )
+
+        est_just = self._get_color_justificatifs_cascade(
+            self._get_etats_from_justificatifs(justificatifs_aprem),
+        )
+
+        return f"color {etat} {est_just}"
+
+    def has_assiduites(self) -> bool:
+        return self.assiduites.count() > 0
+
+    def generate_minitimeline(self) -> str:
+        # Récupérer le référenciel de la timeline
+        STR_TIME = lambda x: _time_to_timedelta(
+            datetime.time(*list(map(int, x.split(":"))))
+        )
+
+        heure_matin: datetime.timedelta = STR_TIME(
+            ScoDocSiteConfig.get("assi_morning_time", "08:00")
+        )
+        heure_midi: datetime.timedelta = STR_TIME(
+            ScoDocSiteConfig.get("assi_lun_time", "13:00")
+        )
+        heure_soir: datetime.timedelta = STR_TIME(
+            ScoDocSiteConfig.get("assi_afternoon_time", "17:00")
+        )
+        # longueur_timeline =  heure_soir - heure_matin
+        longueur_timeline: datetime.timedelta = heure_soir - heure_matin
+
+        # chaque block d'assiduité est défini par:
+        # longueur = ( (fin-deb) / longueur_timeline ) * 100
+        # emplacement = ( (deb - heure_matin) / longueur_timeline ) * 100
+
+        assiduite_blocks: list[dict[str, float | str]] = []
+
+        for assi in self.assiduites:
+            deb: datetime.timedelta = _time_to_timedelta(
+                assi.date_debut.time()
+                if assi.date_debut.date() == self.date
+                else heure_matin
+            )
+            fin: datetime.timedelta = _time_to_timedelta(
+                assi.date_fin.time()
+                if assi.date_fin.date() == self.date
+                else heure_soir
+            )
+
+            longueur: float = ((fin - deb) / longueur_timeline) * 100
+            emplacement: float = ((deb - heure_matin) / longueur_timeline) * 100
+            etat: str = scu.EtatAssiduite(assi.etat).name.lower()
+            est_just: str = "est_just" if assi.est_just else ""
+
+            assiduite_blocks.append(
+                {
+                    "longueur": longueur,
+                    "emplacement": emplacement,
+                    "etat": etat,
+                    "est_just": est_just,
+                    "bubble": _generate_assiduite_bubble(assi),
+                    "id": assi.assiduite_id,
+                }
+            )
+
+        return render_template(
+            "assiduites/widgets/minitimeline_simple.j2",
+            assi_blocks=assiduite_blocks,
+        )
+
+    def is_non_work(self):
+        return self.date.weekday() in scu.NonWorkDays.get_all_non_work_days(
+            dept_id=g.scodoc_dept_id
+        )
+
+    def _get_etats_from_assiduites(self, assiduites: Query) -> list[scu.EtatAssiduite]:
+        return list(set([scu.EtatAssiduite(assi.etat) for assi in assiduites]))
+
+    def _get_etats_from_justificatifs(
+        self, justificatifs: Query
+    ) -> list[scu.EtatJustificatif]:
+        return list(set([scu.EtatJustificatif(justi.etat) for justi in justificatifs]))
+
+    def _get_color_assiduites_cascade(
+        self,
+        etats: list[scu.EtatAssiduite],
+        show_pres: bool = False,
+        show_reta: bool = False,
+    ) -> str:
+        if scu.EtatAssiduite.ABSENT in etats:
+            return "absent"
+        if scu.EtatAssiduite.RETARD in etats and show_reta:
+            return "retard"
+        if scu.EtatAssiduite.PRESENT in etats and show_pres:
+            return "present"
+
+        return "sans_etat"
+
+    def _get_color_justificatifs_cascade(
+        self,
+        etats: list[scu.EtatJustificatif],
+    ) -> str:
+        if scu.EtatJustificatif.VALIDE in etats:
+            return "est_just"
+        if scu.EtatJustificatif.ATTENTE in etats:
+            return "attente"
+        if scu.EtatJustificatif.MODIFIE in etats:
+            return "modifie"
+        if scu.EtatJustificatif.NON_VALIDE in etats:
+            return "invalide"
+
+        return ""
+
+
+def _get_dates_between(deb: datetime.date, fin: datetime.date) -> list[datetime.date]:
+    resultat = []
+    date_actuelle = deb
+    while date_actuelle <= fin:
+        resultat.append(date_actuelle)
+        date_actuelle += datetime.timedelta(days=1)
+    return resultat
+
+
+def _organize_by_month(days, assiduites, justificatifs):
+    """
+    Organiser les dates par mois.
+    """
+    organized = {}
+    for date in days:
+        # Utiliser le numéro du mois comme clé
+        month = MONTHS.get(date.month)
+        # Ajouter le jour à la liste correspondante au mois
+        if month not in organized:
+            organized[month] = []
+
+        date_assiduites: Query = scass.filter_by_date(
+            assiduites,
+            Assiduite,
+            date_deb=datetime.datetime.combine(date, datetime.time(0, 0)),
+            date_fin=datetime.datetime.combine(date, datetime.time(23, 59, 59)),
+        )
+
+        date_justificatifs: Query = scass.filter_by_date(
+            justificatifs,
+            Justificatif,
+            date_deb=datetime.datetime.combine(date, datetime.time(0, 0)),
+            date_fin=datetime.datetime.combine(date, datetime.time(23, 59, 59)),
+        )
+        # On génère un `Jour` composé d'une date, et des assiduités/justificatifs du jour
+        jour: Jour = Jour(date, date_assiduites, date_justificatifs)
+
+        organized[month].append(jour)
+
+    return organized
+
+
+def _time_to_timedelta(t: datetime.time) -> datetime.timedelta:
+    if isinstance(t, datetime.timedelta):
+        return t
+    return datetime.timedelta(hours=t.hour, minutes=t.minute, seconds=t.second)
+
+
+def _generate_assiduite_bubble(assiduite: Assiduite) -> str:
+    # Récupérer informations modules impl
+    moduleimpl_infos: str = assiduite.get_module(traduire=True)
+
+    # Récupérer informations saisie
+    saisie: str = assiduite.get_saisie()
+
+    return render_template(
+        "assiduites/widgets/assiduite_bubble.j2",
+        moduleimpl=moduleimpl_infos,
+        etat=scu.EtatAssiduite(assiduite.etat).name.lower(),
+        date_debut=assiduite.date_debut.strftime("%d/%m/%Y %H:%M"),
+        date_fin=assiduite.date_fin.strftime("%d/%m/%Y %H:%M"),
+        saisie=saisie,
+    )