<?php
echo "Zoulou";
// Définir les jours fériés
$fetes = [
'2025-01-01', '2025-04-01', '2025-05-01', '2025-05-08', '2025-05-29', '2025-06-09', '2025-07-14',
'2025-08-15', '2025-11-01', '2025-11-11', '2025-12-25'
];
// Fonction pour générer les dates de l'année 2025 en excluant les jours fériés
function getDatesForYear($startDate, $endDate, $fetes) {
$dates = [];
$currentDate = strtotime($startDate);
$endDate = strtotime($endDate);
while ($currentDate <= $endDate) {
$date = date('Y-m-d', $currentDate);
if (!in_array($date, $fetes)) { // Exclure les jours fériés
$dates[] = $date;
}
$currentDate = strtotime('+1 day', $currentDate);
}
return $dates;
}
$dates = getDatesForYear('2025-01-01', '2025-12-31', $fetes);
?>
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tableau Dynamique</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
.editable {
cursor: pointer;
}
.cell {
cursor: pointer;
}
.cell.selected {
background-color: #D3D3D3; /* couleur de fond quand la cellule est sélectionnée */
}
.month-color {
background-color: #f2f2f2; /* Couleur pour le premier mois */
}
.month-color-alternate {
background-color: #e6f7ff; /* Couleur pour le deuxième mois */
}
</style>
</head>
<body>
<div class="container mt-5">
<table class="table table-bordered">
<thead>
<tr>
<th>Date</th>
<?php foreach ($dates as $date): ?>
<th class="date-cell"><?= date('d/m/Y', strtotime($date)); ?></th>
<?php endforeach; ?>
</tr>
</thead>
<tbody id="tableBody">
<!-- Aucune ligne de données au départ, juste l'en-tête avec les dates -->
</tbody>
</table>
<button class="btn btn-primary" onclick="addRow()">Add</button>
</div>
<script>
// Fonction pour éditer la cellule
function editCell(cell) {
if (cell.isContentEditable) return;
cell.contentEditable = true;
cell.focus();
}
// Fonction pour sortir du mode édition (quand on clique ailleurs ou appuie sur Entrée)
document.addEventListener('click', function(e) {
if (!e.target.closest('td.editable')) {
let editableCells = document.querySelectorAll('td.editable[contenteditable="true"]');
editableCells.forEach(cell => {
cell.contentEditable = false;
});
}
});
document.addEventListener('keydown', function(e) {
if (e.key === 'Enter') {
let editableCells = document.querySelectorAll('td.editable[contenteditable="true"]');
editableCells.forEach(cell => {
cell.contentEditable = false;
});
}
});
// Fonction pour basculer la valeur des cellules de la date
function toggleCell(cell) {
if (cell.innerText === '0') {
cell.innerText = '1';
cell.classList.add('selected');
} else {
cell.innerText = '0';
cell.classList.remove('selected');
}
}
// Fonction pour ajouter une nouvelle ligne
function addRow() {
let tableBody = document.getElementById('tableBody');
let newRow = document.createElement('tr');
newRow.classList.add('bloc_definition');
// Première cellule "To define"
let newCell = document.createElement('td');
newCell.classList.add('editable');
newCell.textContent = 'To define';
newCell.setAttribute('onclick', 'editCell(this)');
newRow.appendChild(newCell);
// Autres cellules avec valeur "0"
let cells = document.querySelectorAll('thead th'); // Sélectionner les cellules d'en-tête
cells.forEach(function() {
let newCell = document.createElement('td');
newCell.classList.add('cell');
newCell.textContent = '0';
newCell.setAttribute('onclick', 'toggleCell(this)');
newRow.appendChild(newCell);
});
tableBody.appendChild(newRow);
}
// Fonction pour appliquer une couleur différente pour chaque mois
function applyMonthColor() {
const headerCells = document.querySelectorAll('.date-cell');
let currentMonth = null;
let colorToggle = 0; // Variable pour alterner entre les couleurs
headerCells.forEach(function(cell, index) {
// Extraire la date de la cellule
let dateText = cell.innerText;
if (!dateText) return; // Ignorer les cellules vides
let date = new Date(dateText);
let monthIndex = date.getMonth(); // Récupérer le mois
// Si on passe à un autre mois, on réinitialise le compteur pour la couleur
if (monthIndex !== currentMonth) {
colorToggle = 0;
currentMonth = monthIndex;
}
// Appliquer la couleur alternée au mois en cours
if (colorToggle % 2 === 0) {
cell.classList.add('month-color');
cell.classList.remove('month-color-alternate');
} else {
cell.classList.add('month-color-alternate');
cell.classList.remove('month-color');
}
colorToggle++;
});
}
// Appliquer la couleur au chargement de la page
window.onload = function() {
applyMonthColor();
};
</script>
</body>
</html>