calendar-strip mobile organisé en semaine presque terminé. Attente reponse à question

assets/css/src/calendar-strip.css

@@ -15,12 +15,18 @@
   width: 10rem;
 }
 
-.calendar-strip__days {
+.calendar-strip__days,
+.calendar-strip__days .week > ul {
   display: flex;
   justify-content: space-evenly;
   width: 100%;
 }
 
+.calendar-strip__days .week,
+.calendar-strip__days .week > ul {
+  display: contents;
+}
+
 .calendar-strip__day {
   font-size: var(--font-size-s);
   transition: opacity 0.2s ease-in-out;
@@ -97,4 +103,17 @@
   .calendar-strip .next-month {
     display: none;
   }
+
+  .calendar-strip__days .week,
+  .calendar-strip__days .week > ul {
+    display: inherit;
+  }
+  .calendar-strip__days .week:not(.current) {
+    display: none;
+  }
+
+  .calendar-strip__days .week,
+  .calendar-strip__days .week > ul {
+    width: 100%;
+  }
 }

assets/js/calendar.js

@@ -169,6 +169,8 @@ function createEmptyCalendar() {
         sessions: [],
         full: currentDay.format("DD-MM-YYYY"),
         initial: dayInitial,
+        index: parseInt(currentDay.format("DD")),
+        indexInWeek: currentDay.day() === 0 ? 7 : currentDay.day(),
       };
     }
   }

site/snippets/calendar-strip.php

@@ -3,7 +3,18 @@
   @mouseleave="open = false"
   x-data="{
     calendar: createEmptyCalendar(),
-    monthNumb: dayjs().month() + 1,
+    currentMonthIndex: dayjs().month() + 1,
+    currentWeekIndex: (() => {
+      dayjs.extend(window.dayjs_plugin_weekOfYear);
+      
+      const today = dayjs();
+      const firstDayOfMonth = today.startOf('month');
+      const currentWeek = today.week();
+      const firstWeekOfMonth = firstDayOfMonth.week();
+      const currentWeekIndex = currentWeek - firstWeekOfMonth;
+
+      return currentWeekIndex;
+    })(),
     token: '<?= $site->mapadoToken() ?>',
     contractId: '<?= $site->mapadoContractId() ?>',
     targetSessions: [],
@@ -11,11 +22,29 @@
     today: dayjs().format('DD-MM-YYYY'),
 
     get monthName() {
-      return dayjs().month(this.monthNumb - 1).format('MMMM');
+      return dayjs().month(this.currentMonthIndex - 1).format('MMMM');
     },
 
     get currentMonth() {
-      return this.calendar[this.monthNumb]
+      return this.calendar[this.currentMonthIndex]
+    },
+
+    get currentWeeks() {
+      const weeks = [[]];
+      let index = 0;
+      for (let key in this.currentMonth) {
+        const date = this.currentMonth[key]
+        weeks[index].push(date)
+        if (date.indexInWeek === 7) {
+          weeks.push([])
+          index++
+        }
+      }
+      return weeks
+    },
+
+    get currentWeek() {
+      this.currentWeeks[this.currentWeekIndex];
     },
 
     async updateDates() {
@@ -29,7 +58,7 @@
         .catch(error => console.log('No saved calendar.'))
 
       const daysNode = document.querySelector('.calendar-strip__days');
-      daysNode.classList.toggle('progress');   
+      daysNode.classList.toggle('progress');
       
       this.calendar = await getCurrentSeasonCalendar();
       
@@ -51,17 +80,17 @@
     },
 
     nextMonth() {
-      if (this.monthNumb == 12) {
-        this.monthNumb = 1
+      if (this.currentMonthIndex == 12) {
+        this.currentMonthIndex = 1
       } else {
-        this.monthNumb++
+        this.currentMonthIndex++
       }
     },
     prevMonth() {
-      if (this.monthNumb == 1) {
-        this.monthNumb = 12
+      if (this.currentMonthIndex == 1) {
+        this.currentMonthIndex = 12
       } else {
-        this.monthNumb--
+        this.currentMonthIndex--
       }
     }
   }"
@@ -70,28 +99,37 @@
   x-init="updateDates()"
 >
   <div class="calendar-strip__selector">
-    <button class="prev-month" @click="prevMonth()" :disabled="monthNumb === 9">←</button>
+    <button class="prev-month" @click="prevMonth()" :disabled="currentMonthIndex === 9">←</button>
     <span x-text="monthName"></span>
-    <button class="next-month" @click="nextMonth()" :disabled="monthNumb === 8">→</button>
+    <button class="next-month" @click="nextMonth()" :disabled="currentMonthIndex === 8">→</button>
   </div>
+  
   <ul class="calendar-strip__days">
-    <template x-for="(date, index) in currentMonth">
-      <li class="calendar-strip__day" :class="targetSessions.length > 0 && open && index == targetSessions[0].day ? 'active' : ''" :style="'animation-delay: ' + index * 0.03 + 's'">
-        <button 
-        :class="!date || date.full !== today ? '' : 'today'"
-          :disabled="!date || date.sessions.length === 0 ? true : false" 
-          :title="!date || date.sessions.length === 0 ? 'Pas de représentation.' : 'Voir les représentations.'"
-          @mouseenter="handleDayHover()"
-        >
-        <template  x-if="date">
-          <span x-text="date.initial"></span>
-        </template>
-        <span x-text="index"></span>
-      </button>
+    <template x-for="(week, weekIndex) in currentWeeks">
+      <li class="week" :class="weekIndex == currentWeekIndex ? 'current' : ''">
+        <ul>
+          <template x-for="date in week">
+            <li class="calendar-strip__day" :class="targetSessions.length > 0 && open && date.index == targetSessions[0].day ? 'active' : ''" :style="'animation-delay: ' + date.index * 0.03 + 's'">
+              <button 
+              :class="!date || date.full !== today ? '' : 'today'"
+                :disabled="!date || date.sessions.length === 0 ? true : false" 
+                :title="!date || date.sessions.length === 0 ? 'Pas de représentation.' : 'Voir les représentations.'"
+                @mouseenter="handleDayHover()"
+              >
+                <template  x-if="date">
+                  <span x-text="date.initial"></span>
+                </template>
+                <span x-text="date.index"></span>
+              </button>
+            </li>
+          </template>
+        </ul>
       </li>
     </template>
   </ul>
+  
   <a href="<?= page('programme')->url() ?>" class="calendar-strip__calendar-btn">calendrier</a>
+  
   <div class="calendar-strip__date" :class="open ? 'open' : ''">
     <ul class="sessions">
       <template x-for="session in targetSessions">