Auto-commit for deploy to production - 2025-12-11 15:06:01

assets/css/style.css

@@ -382,6 +382,46 @@ input[type="number"] {
   margin-bottom: 16px;
   padding-bottom: 12px;
   border-bottom: 2px solid #d9e2ec;
+  flex-wrap: wrap;
+  gap: 12px;
+}
+
+.fc-view-controls {
+  display: flex;
+  gap: 8px;
+}
+
+.fc-view-button {
+  background: #f0f4f8;
+  border: 1px solid #d9e2ec;
+  border-radius: 4px;
+  padding: 6px 12px;
+  font-size: 13px;
+  cursor: pointer;
+  color: #243b53;
+  transition: all 0.2s;
+}
+
+.fc-view-button:hover {
+  background: #d9e2ec;
+  border-color: #bcccdc;
+}
+
+.fc-view-button--active {
+  background: #243b53;
+  color: #fff;
+  border-color: #243b53;
+}
+
+.fc-view-button--active:hover {
+  background: #102a43;
+  border-color: #102a43;
+}
+
+.fc-nav-controls {
+  display: flex;
+  align-items: center;
+  gap: 12px;
 }
 
 .fc-month-header h3 {
@@ -389,6 +429,8 @@ input[type="number"] {
   font-size: 18px;
   font-weight: 600;
   color: #243b53;
+  min-width: 200px;
+  text-align: center;
 }
 
 .fc-nav-button {
@@ -504,4 +546,84 @@ input[type="number"] {
 .fc-month-table .fc-day--selected {
   background-color: #bde4ff !important;
   cursor: pointer;
+}
+
+/* === VUE 2 MOIS === */
+.fc-two-months-container {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 24px;
+}
+
+.fc-month-container {
+  width: 100%;
+}
+
+/* === VUE ANNÉE === */
+.fc-year-container {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 20px;
+}
+
+.fc-year-month {
+  background: #f8fafc;
+  border: 1px solid #d9e2ec;
+  border-radius: 6px;
+  padding: 12px;
+}
+
+.fc-year-month-title {
+  font-weight: 600;
+  font-size: 14px;
+  color: #243b53;
+  margin-bottom: 8px;
+  text-align: center;
+  padding-bottom: 8px;
+  border-bottom: 1px solid #d9e2ec;
+}
+
+.fc-year-month .fc-month-table {
+  font-size: 11px;
+}
+
+.fc-year-month .fc-month-table thead th {
+  padding: 4px 2px;
+  font-size: 10px;
+}
+
+.fc-year-month .fc-month-table tbody td {
+  padding: 4px 2px;
+  height: 32px;
+  font-size: 11px;
+}
+
+/* Responsive pour la vue année */
+@media (max-width: 1200px) {
+  .fc-year-container {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+@media (max-width: 768px) {
+  .fc-two-months-container {
+    grid-template-columns: 1fr;
+  }
+
+  .fc-year-container {
+    grid-template-columns: 1fr;
+  }
+
+  .fc-month-header {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .fc-view-controls {
+    justify-content: center;
+  }
+
+  .fc-nav-controls {
+    justify-content: center;
+  }
 }

assets/js/family-calendar.js

@@ -20,6 +20,7 @@ document.addEventListener("DOMContentLoaded", () => {
       );
       this.currentMonth = new Date();
       this.currentMonth.setDate(1); // Premier jour du mois
+      this.viewMode = "1month"; // "1month", "2months", "year"
 
       if (!this.planningBody || !this.selectionMenu) {
         console.error("planningBody ou selectionMenu manquant");
@@ -385,6 +386,15 @@ document.addEventListener("DOMContentLoaded", () => {
       if (nextBtn) {
         nextBtn.addEventListener("click", () => this.navigateMonth(1));
       }
+
+      // Boutons de changement de vue
+      const viewButtons = document.querySelectorAll(".fc-view-button");
+      viewButtons.forEach((btn) => {
+        btn.addEventListener("click", (e) => {
+          const view = e.target.dataset.view;
+          this.setViewMode(view);
+        });
+      });
     }
 
     handleMouseDown(e) {
@@ -805,24 +815,105 @@ document.addEventListener("DOMContentLoaded", () => {
     }
 
     // ================== CALENDRIER MENSUEL ==================
+    setViewMode(mode) {
+      this.viewMode = mode;
+      // Mettre à jour les boutons actifs
+      document.querySelectorAll(".fc-view-button").forEach((btn) => {
+        btn.classList.remove("fc-view-button--active");
+        if (btn.dataset.view === mode) {
+          btn.classList.add("fc-view-button--active");
+        }
+      });
+      this.renderMonthCalendar();
+    }
+
     navigateMonth(direction) {
-      this.currentMonth.setMonth(this.currentMonth.getMonth() + direction);
+      if (this.viewMode === "year") {
+        this.currentMonth.setFullYear(
+          this.currentMonth.getFullYear() + direction
+        );
+      } else if (this.viewMode === "2months") {
+        this.currentMonth.setMonth(this.currentMonth.getMonth() + direction);
+      } else {
+        this.currentMonth.setMonth(this.currentMonth.getMonth() + direction);
+      }
       this.renderMonthCalendar();
     }
 
     renderMonthCalendar() {
       if (!this.monthCalendar) return;
 
-      const year = this.currentMonth.getFullYear();
+      // Mettre à jour le titre selon le mode
-      const month = this.currentMonth.getMonth();
-      const monthName = getMonthNameFr(month);
-
-      // Mettre à jour le titre
       const monthTitle = document.getElementById("fc-current-month-year");
       if (monthTitle) {
-        monthTitle.textContent = `${monthName} ${year}`;
+        const year = this.currentMonth.getFullYear();
+        if (this.viewMode === "year") {
+          monthTitle.textContent = year;
+        } else if (this.viewMode === "2months") {
+          const month = this.currentMonth.getMonth();
+          const monthName = getMonthNameFr(month);
+          const nextMonth = new Date(year, month + 1, 1);
+          const nextMonthName = getMonthNameFr(nextMonth.getMonth());
+          monthTitle.textContent = `${monthName} - ${nextMonthName} ${year}`;
+        } else {
+          const month = this.currentMonth.getMonth();
+          const monthName = getMonthNameFr(month);
+          monthTitle.textContent = `${monthName} ${year}`;
+        }
       }
 
+      // Appeler la fonction appropriée selon le mode
+      if (this.viewMode === "year") {
+        this.renderYearView();
+      } else if (this.viewMode === "2months") {
+        this.renderTwoMonthsView();
+      } else {
+        this.renderSingleMonthView();
+      }
+    }
+
+    renderSingleMonthView() {
+      const year = this.currentMonth.getFullYear();
+      const month = this.currentMonth.getMonth();
+      this.monthCalendar.innerHTML = this.generateMonthHTML(year, month);
+    }
+
+    renderTwoMonthsView() {
+      const year = this.currentMonth.getFullYear();
+      const month = this.currentMonth.getMonth();
+      const nextMonth = month + 1;
+      const nextYear = nextMonth > 11 ? year + 1 : year;
+      const nextMonthIndex = nextMonth > 11 ? 0 : nextMonth;
+
+      let html = '<div class="fc-two-months-container">';
+      html += `<div class="fc-month-container">${this.generateMonthHTML(
+        year,
+        month
+      )}</div>`;
+      html += `<div class="fc-month-container">${this.generateMonthHTML(
+        nextYear,
+        nextMonthIndex
+      )}</div>`;
+      html += "</div>";
+      this.monthCalendar.innerHTML = html;
+    }
+
+    renderYearView() {
+      const year = this.currentMonth.getFullYear();
+      let html = '<div class="fc-year-container">';
+      for (let month = 0; month < 12; month++) {
+        html += `<div class="fc-year-month">`;
+        html += `<div class="fc-year-month-title">${getMonthNameFr(
+          month
+        )}</div>`;
+        html += this.generateMonthHTML(year, month);
+        html += `</div>`;
+      }
+      html += "</div>";
+      this.monthCalendar.innerHTML = html;
+    }
+
+    generateMonthHTML(year, month) {
       // Premier jour du mois et dernier jour
       const firstDay = new Date(year, month, 1);
       const lastDay = new Date(year, month + 1, 0);
@@ -908,7 +999,7 @@ document.addEventListener("DOMContentLoaded", () => {
       }
       html += "</tr></tbody></table>";
 
-      this.monthCalendar.innerHTML = html;
+      return html;
     }
 
     handleMonthMouseDown(e) {

family-calendar.php

@@ -97,9 +97,16 @@ require __DIR__ . '/header.php';
   <h2>Calendrier mensuel</h2>
   <div class="fc-month-calendar-wrapper">
     <div class="fc-month-header">
-      <button id="fc-prev-month" class="fc-nav-button">‹</button>
+      <div class="fc-view-controls">
-      <h3 id="fc-current-month-year"></h3>
+        <button id="fc-view-1month" class="fc-view-button fc-view-button--active" data-view="1month">1 mois</button>
-      <button id="fc-next-month" class="fc-nav-button">›</button>
+        <button id="fc-view-2months" class="fc-view-button" data-view="2months">2 mois</button>
+        <button id="fc-view-year" class="fc-view-button" data-view="year">Année</button>
+      </div>
+      <div class="fc-nav-controls">
+        <button id="fc-prev-month" class="fc-nav-button">‹</button>
+        <h3 id="fc-current-month-year"></h3>
+        <button id="fc-next-month" class="fc-nav-button">›</button>
+      </div>
     </div>
     <div id="fc-month-calendar" class="fc-month-calendar">
       <!-- Le calendrier mensuel sera généré par JavaScript -->