Spaces:

BitDown
/

calendrier-interactif

Running

App Files Files Community

PAUTREL Johan commited on 18 days ago

Commit

2b05c91

verified ·

1 Parent(s): 035a859

Add 1 files

Browse files

Files changed (1) hide show

index.html +457 -25

index.html CHANGED Viewed

@@ -3,7 +3,7 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Calendrier Interactif 2025-2030</title>
     <script src="https://cdn.tailwindcss.com"></script>
     <script src="https://accounts.google.com/gsi/client" async defer></script>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
@@ -36,10 +36,26 @@
         .multi-day-middle {
             border-radius: 0;
         }
         @media (max-width: 768px) {
             .calendar-day {
                 min-height: 100px;
             }
         }
     </style>
 </head>
@@ -47,7 +63,7 @@
     <div class="container mx-auto px-4 py-8">
         <!-- Header -->
         <header class="flex flex-col md:flex-row justify-between items-center mb-8">
-            <h1 class="text-3xl font-bold text-blue-800 mb-4 md:mb-0">Calendrier Interactif</h1>
             <div id="auth-section" class="flex items-center space-x-4">
                 <div id="user-info" class="hidden items-center">
                     <img id="user-pic" class="w-10 h-10 rounded-full mr-2" src="" alt="Profile">
@@ -78,15 +94,26 @@
         <div class="bg-white rounded-xl shadow-md p-6 mb-8">
             <div class="flex flex-col md:flex-row justify-between items-center space-y-4 md:space-y-0">
                 <div class="flex items-center space-x-4">
-                    <button id="prev-year" class="bg-blue-100 hover:bg-blue-200 text-blue-800 p-2 rounded-full transition">
                         <i class="fas fa-chevron-left"></i>
                     </button>
-                    <h2 id="current-year" class="text-2xl font-bold text-blue-800">2025</h2>
-                    <button id="next-year" class="bg-blue-100 hover:bg-blue-200 text-blue-800 p-2 rounded-full transition">
                         <i class="fas fa-chevron-right"></i>
                     </button>
                 </div>
                 <div class="flex items-center space-x-2">
                     <button id="export-btn" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg text-sm font-medium transition flex items-center">
                         <i class="fas fa-file-export mr-2"></i> Exporter
                     </button>
@@ -101,11 +128,51 @@
             </div>
         </div>
-        <!-- Calendar -->
-        <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4" id="calendar-container">
             <!-- Months will be inserted here by JavaScript -->
         </div>
         <!-- Task Modal -->
         <div id="task-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
             <div class="bg-white rounded-xl shadow-xl p-6 w-full max-w-md">
@@ -124,6 +191,16 @@
                         <label for="task-time" class="block text-sm font-medium text-gray-700 mb-1">Heure (optionnel)</label>
                         <input type="time" id="task-time" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
                     </div>
                     <div class="flex justify-end space-x-3 pt-2">
                         <button id="cancel-task" class="px-4 py-2 text-gray-600 hover:text-gray-800 font-medium rounded-lg transition">
                             Annuler
@@ -136,6 +213,21 @@
             </div>
         </div>
         <!-- Multi-day selection info -->
         <div id="multi-day-info" class="fixed bottom-4 left-1/2 transform -translate-x-1/2 bg-white shadow-lg rounded-lg px-4 py-2 hidden">
             <span class="text-blue-800 font-medium">Sélection multiple activée - Sélectionnez plusieurs jours</span>
@@ -148,6 +240,8 @@
     <script>
         // Global variables
         let currentYear = 2025;
         let calendarData = {};
         let selectedDate = null;
         let multiDaySelection = false;
@@ -155,12 +249,17 @@
         let multiDayEnd = null;
         let currentUser = null;
         let isDragging = false;
         // Initialize the calendar
         document.addEventListener('DOMContentLoaded', function() {
             initializeCalendar();
             setupEventListeners();
             loadFromLocalStorage();
         });
         function initializeCalendar() {
@@ -182,11 +281,17 @@
         }
         function renderCalendar() {
-            const container = document.getElementById('calendar-container');
             container.innerHTML = '';
-            document.getElementById('current-year').textContent = currentYear;
             for (let month = 0; month < 12; month++) {
                 const monthElement = document.createElement('div');
                 monthElement.className = 'bg-white rounded-xl shadow-md overflow-hidden';
@@ -215,6 +320,67 @@
             }
         }
         function renderMonthDays(month) {
             const monthContainer = document.getElementById(`month-${month}`);
             const firstDay = new Date(currentYear, month, 1).getDay();
@@ -242,6 +408,14 @@
                 dayElement.dataset.month = month;
                 dayElement.dataset.day = day;
                 // Check if this day is part of a multi-day selection
                 const isMultiDay = checkMultiDaySelection(currentYear, month, day);
                 if (isMultiDay) {
@@ -269,32 +443,128 @@
                 return '';
             }
-            return calendarData[year][month][day].map((task, index) => `
-                <div class="task-item bg-blue-100 rounded px-2 py-1 text-sm flex justify-between items-center" data-index="${index}">
                     <div>
-                        ${task.time ? `<span class="text-blue-600 font-medium">${task.time}</span> - ` : ''}
                         <span>${task.text}</span>
                         ${task.user ? `<span class="text-xs text-gray-500 ml-1">(${task.user})</span>` : ''}
                     </div>
-                    <button class="delete-task text-red-500 hover:text-red-700 text-xs p-1">
                         <i class="fas fa-trash-alt"></i>
                     </button>
                 </div>
-            `).join('');
         }
         function setupEventListeners() {
-            // Year navigation
-            document.getElementById('prev-year').addEventListener('click', () => {
-                if (currentYear > 2025) {
-                    currentYear--;
                     renderCalendar();
                 }
             });
-            document.getElementById('next-year').addEventListener('click', () => {
-                if (currentYear < 2030) {
-                    currentYear++;
                     renderCalendar();
                 }
             });
@@ -302,7 +572,7 @@
             // Task modal
             document.addEventListener('click', function(e) {
                 if (e.target.closest('.add-task-btn')) {
-                    const dayElement = e.target.closest('.calendar-day');
                     selectedDate = {
                         year: parseInt(dayElement.dataset.year),
                         month: parseInt(dayElement.dataset.month),
@@ -320,7 +590,7 @@
                 if (e.target.closest('.delete-task')) {
                     const taskItem = e.target.closest('.task-item');
-                    const dayElement = e.target.closest('.calendar-day');
                     const taskIndex = parseInt(taskItem.dataset.index);
                     const year = parseInt(dayElement.dataset.year);
@@ -350,7 +620,9 @@
                     const newTask = {
                         text: taskText,
                         time: taskTime || null,
-                        user: currentUser ? currentUser.name : null
                     };
                     calendarData[selectedDate.year][selectedDate.month][selectedDate.day].push(newTask);
@@ -406,6 +678,70 @@
                     endMultiDaySelection();
                 }
             });
         }
         // Google Sign-In
@@ -676,6 +1012,102 @@
         function handleDayTouchEnd() {
             isDragging = false;
         }
     </script>
 <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=johanpautrel/calendrier-interactif" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
 </html>

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Calendrier Premium 2025-2030</title>
     <script src="https://cdn.tailwindcss.com"></script>
     <script src="https://accounts.google.com/gsi/client" async defer></script>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
         .multi-day-middle {
             border-radius: 0;
         }
+        .week-view-day {
+            min-height: 150px;
+        }
+        .color-picker {
+            width: 24px;
+            height: 24px;
+            border-radius: 50%;
+            cursor: pointer;
+            border: 2px solid transparent;
+        }
+        .color-picker.selected {
+            border-color: #000;
+        }
         @media (max-width: 768px) {
             .calendar-day {
                 min-height: 100px;
             }
+            .week-view-day {
+                min-height: 120px;
+            }
         }
     </style>
 </head>
     <div class="container mx-auto px-4 py-8">
         <!-- Header -->
         <header class="flex flex-col md:flex-row justify-between items-center mb-8">
+            <h1 class="text-3xl font-bold text-blue-800 mb-4 md:mb-0">Calendrier Premium</h1>
             <div id="auth-section" class="flex items-center space-x-4">
                 <div id="user-info" class="hidden items-center">
                     <img id="user-pic" class="w-10 h-10 rounded-full mr-2" src="" alt="Profile">
         <div class="bg-white rounded-xl shadow-md p-6 mb-8">
             <div class="flex flex-col md:flex-row justify-between items-center space-y-4 md:space-y-0">
                 <div class="flex items-center space-x-4">
+                    <button id="prev-period" class="bg-blue-100 hover:bg-blue-200 text-blue-800 p-2 rounded-full transition">
                         <i class="fas fa-chevron-left"></i>
                     </button>
+                    <h2 id="current-period" class="text-2xl font-bold text-blue-800">Janvier 2025</h2>
+                    <button id="next-period" class="bg-blue-100 hover:bg-blue-200 text-blue-800 p-2 rounded-full transition">
                         <i class="fas fa-chevron-right"></i>
                     </button>
+                    <button id="today-btn" class="bg-blue-100 hover:bg-blue-200 text-blue-800 px-3 py-1 rounded-full text-sm transition">
+                        Aujourd'hui
+                    </button>
                 </div>
                 <div class="flex items-center space-x-2">
+                    <div class="flex space-x-1 mr-4">
+                        <button id="month-view-btn" class="bg-blue-600 text-white px-3 py-1 rounded-l-lg text-sm transition">
+                            Mois
+                        </button>
+                        <button id="week-view-btn" class="bg-blue-100 hover:bg-blue-200 text-blue-800 px-3 py-1 rounded-r-lg text-sm transition">
+                            Semaine
+                        </button>
+                    </div>
                     <button id="export-btn" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg text-sm font-medium transition flex items-center">
                         <i class="fas fa-file-export mr-2"></i> Exporter
                     </button>
             </div>
         </div>
+        <!-- Search Bar -->
+        <div class="bg-white rounded-xl shadow-md p-4 mb-8">
+            <div class="flex flex-col md:flex-row items-center space-y-2 md:space-y-0 md:space-x-4">
+                <div class="relative w-full md:w-96">
+                    <input type="text" id="search-input" placeholder="Rechercher des tâches..." class="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
+                    <i class="fas fa-search absolute left-3 top-3 text-gray-400"></i>
+                </div>
+                <div class="flex items-center space-x-2">
+                    <label for="search-category" class="text-sm text-gray-600">Catégorie:</label>
+                    <select id="search-category" class="border border-gray-300 rounded-lg px-2 py-1 text-sm focus:outline-none focus:ring-1 focus:ring-blue-500">
+                        <option value="all">Toutes</option>
+                        <option value="work">Travail</option>
+                        <option value="personal">Personnel</option>
+                        <option value="family">Famille</option>
+                        <option value="other">Autre</option>
+                    </select>
+                </div>
+                <button id="search-btn" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg text-sm font-medium transition">
+                    Rechercher
+                </button>
+                <button id="clear-search" class="text-gray-600 hover:text-gray-800 text-sm font-medium transition">
+                    Effacer
+                </button>
+            </div>
+        </div>
+        <!-- Calendar Views -->
+        <div id="month-view" class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
             <!-- Months will be inserted here by JavaScript -->
         </div>
+        <div id="week-view" class="hidden bg-white rounded-xl shadow-md overflow-hidden">
+            <div class="grid grid-cols-7 gap-px bg-gray-200 p-px">
+                <!-- Week days header -->
+                ${['Lundi', 'Mardi', 'Mercredi', 'Jeudi', 'Vendredi', 'Samedi', 'Dimanche'].map(day => `
+                    <div class="bg-blue-100 text-blue-800 text-center font-medium py-2">
+                        ${day}
+                    </div>
+                `).join('')}
+            </div>
+            <div class="grid grid-cols-7 gap-px bg-gray-200 p-px" id="week-days">
+                <!-- Week days content will be inserted here -->
+            </div>
+        </div>
         <!-- Task Modal -->
         <div id="task-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
             <div class="bg-white rounded-xl shadow-xl p-6 w-full max-w-md">
                         <label for="task-time" class="block text-sm font-medium text-gray-700 mb-1">Heure (optionnel)</label>
                         <input type="time" id="task-time" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
                     </div>
+                    <div>
+                        <label class="block text-sm font-medium text-gray-700 mb-1">Catégorie</label>
+                        <div class="flex space-x-2">
+                            <div class="color-picker bg-red-200 selected" data-color="red" data-category="work"></div>
+                            <div class="color-picker bg-blue-200" data-color="blue" data-category="personal"></div>
+                            <div class="color-picker bg-green-200" data-color="green" data-category="family"></div>
+                            <div class="color-picker bg-yellow-200" data-color="yellow" data-category="other"></div>
+                            <div class="color-picker bg-purple-200" data-color="purple" data-category="event"></div>
+                        </div>
+                    </div>
                     <div class="flex justify-end space-x-3 pt-2">
                         <button id="cancel-task" class="px-4 py-2 text-gray-600 hover:text-gray-800 font-medium rounded-lg transition">
                             Annuler
             </div>
         </div>
+        <!-- Search Results Modal -->
+        <div id="search-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
+            <div class="bg-white rounded-xl shadow-xl p-6 w-full max-w-2xl max-h-[80vh] overflow-y-auto">
+                <div class="flex justify-between items-center mb-4">
+                    <h3 class="text-xl font-bold text-blue-800">Résultats de recherche</h3>
+                    <button id="close-search-modal" class="text-gray-500 hover:text-gray-700">
+                        <i class="fas fa-times"></i>
+                    </button>
+                </div>
+                <div id="search-results" class="space-y-3">
+                    <!-- Search results will be inserted here -->
+                </div>
+            </div>
+        </div>
         <!-- Multi-day selection info -->
         <div id="multi-day-info" class="fixed bottom-4 left-1/2 transform -translate-x-1/2 bg-white shadow-lg rounded-lg px-4 py-2 hidden">
             <span class="text-blue-800 font-medium">Sélection multiple activée - Sélectionnez plusieurs jours</span>
     <script>
         // Global variables
         let currentYear = 2025;
+        let currentMonth = 0; // January
+        let currentWeek = 0; // First week of the year
         let calendarData = {};
         let selectedDate = null;
         let multiDaySelection = false;
         let multiDayEnd = null;
         let currentUser = null;
         let isDragging = false;
+        let currentView = 'month'; // 'month' or 'week'
+        let selectedColor = 'red';
+        let selectedCategory = 'work';
         // Initialize the calendar
         document.addEventListener('DOMContentLoaded', function() {
             initializeCalendar();
             setupEventListeners();
             loadFromLocalStorage();
+            updateCurrentPeriodDisplay();
+            setupColorPickers();
         });
         function initializeCalendar() {
         }
         function renderCalendar() {
+            if (currentView === 'month') {
+                renderMonthView();
+            } else {
+                renderWeekView();
+            }
+        }
+        function renderMonthView() {
+            const container = document.getElementById('month-view');
             container.innerHTML = '';
             for (let month = 0; month < 12; month++) {
                 const monthElement = document.createElement('div');
                 monthElement.className = 'bg-white rounded-xl shadow-md overflow-hidden';
             }
         }
+        function renderWeekView() {
+            const weekContainer = document.getElementById('week-days');
+            weekContainer.innerHTML = '';
+            // Get the first day of the week
+            const firstDayOfWeek = getFirstDayOfWeek(currentYear, currentWeek);
+            // Render each day of the week
+            for (let i = 0; i < 7; i++) {
+                const dayDate = new Date(firstDayOfWeek);
+                dayDate.setDate(firstDayOfWeek.getDate() + i);
+                const year = dayDate.getFullYear();
+                const month = dayDate.getMonth();
+                const day = dayDate.getDate();
+                const dayOfWeek = dayDate.getDay();
+                const isWeekend = dayOfWeek === 0 || dayOfWeek === 6;
+                const dayElement = document.createElement('div');
+                dayElement.className = `week-view-day bg-white ${isWeekend ? 'bg-blue-50' : ''} p-2 relative`;
+                dayElement.dataset.year = year;
+                dayElement.dataset.month = month;
+                dayElement.dataset.day = day;
+                const dayName = dayDate.toLocaleString('fr-FR', { weekday: 'short' });
+                const formattedDate = dayDate.toLocaleDateString('fr-FR', { day: 'numeric', month: 'short' });
+                dayElement.innerHTML = `
+                    <div class="flex justify-between items-start mb-1">
+                        <div>
+                            <span class="text-sm font-medium text-gray-500">${dayName}</span>
+                            <span class="text-lg font-medium ${isWeekend ? 'text-blue-600' : 'text-gray-800'} ml-2">${formattedDate}</span>
+                        </div>
+                        <button class="add-task-btn text-blue-500 hover:text-blue-700 text-sm p-1 rounded-full transition">
+                            <i class="fas fa-plus"></i>
+                        </button>
+                    </div>
+                    <div class="tasks-container space-y-1 overflow-y-auto max-h-32">
+                        ${renderTasks(year, month, day)}
+                    </div>
+                `;
+                weekContainer.appendChild(dayElement);
+            }
+        }
+        function getFirstDayOfWeek(year, week) {
+            const date = new Date(year, 0, 1);
+            const dayOfWeek = date.getDay();
+            const firstDay = new Date(date);
+            // Adjust for Monday as first day of week
+            const diff = dayOfWeek === 0 ? 6 : dayOfWeek - 1;
+            firstDay.setDate(date.getDate() - diff);
+            // Add the weeks
+            firstDay.setDate(firstDay.getDate() + (week * 7));
+            return firstDay;
+        }
         function renderMonthDays(month) {
             const monthContainer = document.getElementById(`month-${month}`);
             const firstDay = new Date(currentYear, month, 1).getDay();
                 dayElement.dataset.month = month;
                 dayElement.dataset.day = day;
+                // Check if this day is today
+                const today = new Date();
+                if (date.getFullYear() === today.getFullYear() &&
+                    date.getMonth() === today.getMonth() &&
+                    date.getDate() === today.getDate()) {
+                    dayElement.classList.add('border-2', 'border-blue-500');
+                }
                 // Check if this day is part of a multi-day selection
                 const isMultiDay = checkMultiDaySelection(currentYear, month, day);
                 if (isMultiDay) {
                 return '';
             }
+            return calendarData[year][month][day].map((task, index) => {
+                const colorClass = getColorClass(task.color);
+                return `
+                <div class="task-item ${colorClass} rounded px-2 py-1 text-sm flex justify-between items-center" data-index="${index}">
                     <div>
+                        ${task.time ? `<span class="font-medium">${task.time}</span> - ` : ''}
                         <span>${task.text}</span>
                         ${task.user ? `<span class="text-xs text-gray-500 ml-1">(${task.user})</span>` : ''}
                     </div>
+                    <button class="delete-task text-gray-600 hover:text-gray-800 text-xs p-1">
                         <i class="fas fa-trash-alt"></i>
                     </button>
                 </div>
+                `;
+            }).join('');
+        }
+        function getColorClass(color) {
+            switch(color) {
+                case 'red': return 'bg-red-200';
+                case 'blue': return 'bg-blue-200';
+                case 'green': return 'bg-green-200';
+                case 'yellow': return 'bg-yellow-200';
+                case 'purple': return 'bg-purple-200';
+                default: return 'bg-blue-100';
+            }
         }
         function setupEventListeners() {
+            // Period navigation
+            document.getElementById('prev-period').addEventListener('click', () => {
+                if (currentView === 'month') {
+                    if (currentYear > 2025 || (currentYear === 2025 && currentMonth > 0)) {
+                        if (currentMonth === 0) {
+                            currentYear--;
+                            currentMonth = 11;
+                        } else {
+                            currentMonth--;
+                        }
+                        updateCurrentPeriodDisplay();
+                        renderCalendar();
+                    }
+                } else {
+                    if (currentWeek > 0) {
+                        currentWeek--;
+                    } else {
+                        currentYear--;
+                        currentWeek = getWeeksInYear(currentYear) - 1;
+                    }
+                    updateCurrentPeriodDisplay();
+                    renderCalendar();
+                }
+            });
+            document.getElementById('next-period').addEventListener('click', () => {
+                if (currentView === 'month') {
+                    if (currentYear < 2030 || (currentYear === 2030 && currentMonth < 11)) {
+                        if (currentMonth === 11) {
+                            currentYear++;
+                            currentMonth = 0;
+                        } else {
+                            currentMonth++;
+                        }
+                        updateCurrentPeriodDisplay();
+                        renderCalendar();
+                    }
+                } else {
+                    const weeksInYear = getWeeksInYear(currentYear);
+                    if (currentWeek < weeksInYear - 1) {
+                        currentWeek++;
+                    } else {
+                        currentYear++;
+                        currentWeek = 0;
+                    }
+                    updateCurrentPeriodDisplay();
                     renderCalendar();
                 }
             });
+            document.getElementById('today-btn').addEventListener('click', () => {
+                const today = new Date();
+                currentYear = today.getFullYear();
+                currentMonth = today.getMonth();
+                // Calculate current week for week view
+                const firstDayOfYear = new Date(currentYear, 0, 1);
+                const pastDaysOfYear = (today - firstDayOfYear) / 86400000;
+                currentWeek = Math.floor((pastDaysOfYear + firstDayOfYear.getDay() - 1) / 7);
+                updateCurrentPeriodDisplay();
+                renderCalendar();
+            });
+            // View switching
+            document.getElementById('month-view-btn').addEventListener('click', () => {
+                if (currentView !== 'month') {
+                    currentView = 'month';
+                    document.getElementById('month-view-btn').classList.remove('bg-blue-100', 'text-blue-800');
+                    document.getElementById('month-view-btn').classList.add('bg-blue-600', 'text-white');
+                    document.getElementById('week-view-btn').classList.remove('bg-blue-600', 'text-white');
+                    document.getElementById('week-view-btn').classList.add('bg-blue-100', 'text-blue-800');
+                    document.getElementById('month-view').classList.remove('hidden');
+                    document.getElementById('week-view').classList.add('hidden');
+                    updateCurrentPeriodDisplay();
+                    renderCalendar();
+                }
+            });
+            document.getElementById('week-view-btn').addEventListener('click', () => {
+                if (currentView !== 'week') {
+                    currentView = 'week';
+                    document.getElementById('week-view-btn').classList.remove('bg-blue-100', 'text-blue-800');
+                    document.getElementById('week-view-btn').classList.add('bg-blue-600', 'text-white');
+                    document.getElementById('month-view-btn').classList.remove('bg-blue-600', 'text-white');
+                    document.getElementById('month-view-btn').classList.add('bg-blue-100', 'text-blue-800');
+                    document.getElementById('month-view').classList.add('hidden');
+                    document.getElementById('week-view').classList.remove('hidden');
+                    updateCurrentPeriodDisplay();
                     renderCalendar();
                 }
             });
             // Task modal
             document.addEventListener('click', function(e) {
                 if (e.target.closest('.add-task-btn')) {
+                    const dayElement = e.target.closest('.calendar-day, .week-view-day');
                     selectedDate = {
                         year: parseInt(dayElement.dataset.year),
                         month: parseInt(dayElement.dataset.month),
                 if (e.target.closest('.delete-task')) {
                     const taskItem = e.target.closest('.task-item');
+                    const dayElement = e.target.closest('.calendar-day, .week-view-day');
                     const taskIndex = parseInt(taskItem.dataset.index);
                     const year = parseInt(dayElement.dataset.year);
                     const newTask = {
                         text: taskText,
                         time: taskTime || null,
+                        user: currentUser ? currentUser.name : null,
+                        color: selectedColor,
+                        category: selectedCategory
                     };
                     calendarData[selectedDate.year][selectedDate.month][selectedDate.day].push(newTask);
                     endMultiDaySelection();
                 }
             });
+            // Search functionality
+            document.getElementById('search-btn').addEventListener('click', performSearch);
+            document.getElementById('clear-search').addEventListener('click', clearSearch);
+            document.getElementById('close-search-modal').addEventListener('click', () => {
+                document.getElementById('search-modal').classList.add('hidden');
+            });
+            // Allow pressing Enter in search input
+            document.getElementById('search-input').addEventListener('keypress', function(e) {
+                if (e.key === 'Enter') {
+                    performSearch();
+                }
+            });
+        }
+        function setupColorPickers() {
+            const colorPickers = document.querySelectorAll('.color-picker');
+            colorPickers.forEach(picker => {
+                picker.addEventListener('click', function() {
+                    // Remove selected class from all pickers
+                    document.querySelectorAll('.color-picker').forEach(p => {
+                        p.classList.remove('selected');
+                    });
+                    // Add selected class to clicked picker
+                    this.classList.add('selected');
+                    // Update selected color and category
+                    selectedColor = this.dataset.color;
+                    selectedCategory = this.dataset.category;
+                });
+            });
+        }
+        function updateCurrentPeriodDisplay() {
+            const periodElement = document.getElementById('current-period');
+            if (currentView === 'month') {
+                const monthName = new Date(currentYear, currentMonth, 1).toLocaleString('fr-FR', { month: 'long' });
+                const capitalizedMonthName = monthName.charAt(0).toUpperCase() + monthName.slice(1);
+                periodElement.textContent = `${capitalizedMonthName} ${currentYear}`;
+            } else {
+                const firstDayOfWeek = getFirstDayOfWeek(currentYear, currentWeek);
+                const lastDayOfWeek = new Date(firstDayOfWeek);
+                lastDayOfWeek.setDate(firstDayOfWeek.getDate() + 6);
+                const firstDayStr = firstDayOfWeek.toLocaleDateString('fr-FR', { day: 'numeric', month: 'short' });
+                const lastDayStr = lastDayOfWeek.toLocaleDateString('fr-FR', { day: 'numeric', month: 'short', year: 'numeric' });
+                periodElement.textContent = `Semaine du ${firstDayStr} au ${lastDayStr}`;
+            }
+        }
+        function getWeeksInYear(year) {
+            const firstDay = new Date(year, 0, 1);
+            const lastDay = new Date(year, 11, 31);
+            // Adjust for Monday as first day of week
+            const dayOffset = firstDay.getDay() === 0 ? 6 : firstDay.getDay() - 1;
+            firstDay.setDate(firstDay.getDate() - dayOffset);
+            const diff = lastDay - firstDay;
+            return Math.ceil(diff / (1000 * 60 * 60 * 24 * 7));
         }
         // Google Sign-In
         function handleDayTouchEnd() {
             isDragging = false;
         }
+        // Search functions
+        function performSearch() {
+            const searchTerm = document.getElementById('search-input').value.trim().toLowerCase();
+            const categoryFilter = document.getElementById('search-category').value;
+            if (!searchTerm && categoryFilter === 'all') {
+                alert('Veuillez entrer un terme de recherche ou sélectionner une catégorie');
+                return;
+            }
+            const results = [];
+            // Search through all calendar data
+            for (let year in calendarData) {
+                for (let month in calendarData[year]) {
+                    for (let day in calendarData[year][month]) {
+                        const tasks = calendarData[year][month][day];
+                        for (let task of tasks) {
+                            // Check if task matches search criteria
+                            const matchesText = searchTerm ? task.text.toLowerCase().includes(searchTerm) : true;
+                            const matchesCategory = categoryFilter === 'all' || task.category === categoryFilter;
+                            if (matchesText && matchesCategory) {
+                                results.push({
+                                    year: parseInt(year),
+                                    month: parseInt(month),
+                                    day: parseInt(day),
+                                    task: task
+                                });
+                            }
+                        }
+                    }
+                }
+            }
+            displaySearchResults(results);
+        }
+        function displaySearchResults(results) {
+            const resultsContainer = document.getElementById('search-results');
+            resultsContainer.innerHTML = '';
+            if (results.length === 0) {
+                resultsContainer.innerHTML = '<p class="text-gray-600">Aucun résultat trouvé</p>';
+            } else {
+                results.forEach(result => {
+                    const dateStr = new Date(result.year, result.month, result.day)
+                        .toLocaleDateString('fr-FR', { weekday: 'long', day: 'numeric', month: 'long', year: 'numeric' });
+                    const colorClass = getColorClass(result.task.color);
+                    const resultElement = document.createElement('div');
+                    resultElement.className = `p-3 rounded-lg ${colorClass}`;
+                    resultElement.innerHTML = `
+                        <div class="flex justify-between items-start">
+                            <div>
+                                <h4 class="font-bold">${result.task.text}</h4>
+                                <p class="text-sm">${dateStr}${result.task.time ? ` à ${result.task.time}` : ''}</p>
+                                <p class="text-xs mt-1">Catégorie: ${result.task.category}</p>
+                            </div>
+                            <button class="delete-search-result text-gray-600 hover:text-gray-800 text-sm p-1"
+                                    data-year="${result.year}" data-month="${result.month}" data-day="${result.day}" data-index="${calendarData[result.year][result.month][result.day].indexOf(result.task)}">
+                                <i class="fas fa-trash-alt"></i>
+                            </button>
+                        </div>
+                    `;
+                    resultsContainer.appendChild(resultElement);
+                });
+                // Add event listeners to delete buttons in search results
+                document.querySelectorAll('.delete-search-result').forEach(btn => {
+                    btn.addEventListener('click', function() {
+                        const year = parseInt(this.dataset.year);
+                        const month = parseInt(this.dataset.month);
+                        const day = parseInt(this.dataset.day);
+                        const index = parseInt(this.dataset.index);
+                        calendarData[year][month][day].splice(index, 1);
+                        saveToLocalStorage();
+                        performSearch(); // Refresh search results
+                        renderCalendar();
+                    });
+                });
+            }
+            document.getElementById('search-modal').classList.remove('hidden');
+        }
+        function clearSearch() {
+            document.getElementById('search-input').value = '';
+            document.getElementById('search-category').value = 'all';
+            document.getElementById('search-modal').classList.add('hidden');
+        }
     </script>
 <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=johanpautrel/calendrier-interactif" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
 </html>