From 4e4177d8d00397d85058732b592ae9de8b9cd68a Mon Sep 17 00:00:00 2001 From: Cedric Date: Thu, 11 Dec 2025 15:06:01 +0100 Subject: [PATCH] Auto-commit for deploy to production - 2025-12-11 15:06:01 --- assets/css/style.css | 122 +++++++++++++++++++++++++++++++++++ assets/js/family-calendar.js | 107 +++++++++++++++++++++++++++--- family-calendar.php | 13 +++- 3 files changed, 231 insertions(+), 11 deletions(-) diff --git a/assets/css/style.css b/assets/css/style.css index e8bf6ef..66626e5 100644 --- a/assets/css/style.css +++ b/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; + } } \ No newline at end of file diff --git a/assets/js/family-calendar.js b/assets/js/family-calendar.js index 0250e45..cb7c105 100644 --- a/assets/js/family-calendar.js +++ b/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(); - const month = this.currentMonth.getMonth(); - const monthName = getMonthNameFr(month); - - // Mettre à jour le titre + // Mettre à jour le titre selon le mode 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 = '
'; + html += `
${this.generateMonthHTML( + year, + month + )}
`; + html += `
${this.generateMonthHTML( + nextYear, + nextMonthIndex + )}
`; + html += "
"; + this.monthCalendar.innerHTML = html; + } + + renderYearView() { + const year = this.currentMonth.getFullYear(); + let html = '
'; + for (let month = 0; month < 12; month++) { + html += `
`; + html += `
${getMonthNameFr( + month + )}
`; + html += this.generateMonthHTML(year, month); + html += `
`; + } + html += "
"; + 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 += ""; - this.monthCalendar.innerHTML = html; + return html; } handleMonthMouseDown(e) { diff --git a/family-calendar.php b/family-calendar.php index 9b9c4ca..34b4ef8 100644 --- a/family-calendar.php +++ b/family-calendar.php @@ -97,9 +97,16 @@ require __DIR__ . '/header.php';

Calendrier mensuel

- -

- +
+ + + +
+
+ +

+ +