perco/HouseHub
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Cedric
2025-12-11 15:06:01 +01:00
parent 128a738fae
commit 4e4177d8d0
3 changed files with 231 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/css/style.css
+122
View File
@@ -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 {
@@ -505,3 +547,83 @@ input[type="number"] {
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
+99 -8
View File
@@ -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 = '<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
+10 -3
View File
@@ -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>
<h3 id="fc-current-month-year"></h3>
<button id="fc-next-month" class="fc-nav-button">›</button>
<div class="fc-view-controls">
<button id="fc-view-1month" class="fc-view-button fc-view-button--active" data-view="1month">1 mois</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 -->