Spaces:
Running
Running
| <html lang="fr"> | |
| <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"> | |
| <style> | |
| .calendar-day { | |
| min-height: 120px; | |
| transition: all 0.2s ease; | |
| } | |
| .calendar-day:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); | |
| } | |
| .task-item { | |
| transition: all 0.2s ease; | |
| } | |
| .task-item:hover { | |
| transform: translateX(2px); | |
| } | |
| .multi-day-selected { | |
| background-color: #e0f2fe ; | |
| } | |
| .multi-day-start { | |
| border-top-left-radius: 0.5rem; | |
| border-bottom-left-radius: 0.5rem; | |
| } | |
| .multi-day-end { | |
| border-top-right-radius: 0.5rem; | |
| border-bottom-right-radius: 0.5rem; | |
| } | |
| .multi-day-middle { | |
| border-radius: 0; | |
| } | |
| @media (max-width: 768px) { | |
| .calendar-day { | |
| min-height: 100px; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-blue-50 min-h-screen"> | |
| <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"> | |
| <span id="user-name" class="text-blue-800 font-medium"></span> | |
| </div> | |
| <div id="g_id_onload" | |
| data-client_id="YOUR_GOOGLE_CLIENT_ID" | |
| data-context="signin" | |
| data-ux_mode="popup" | |
| data-callback="handleGoogleSignIn" | |
| data-auto_prompt="false"> | |
| </div> | |
| <div class="g_id_signin" | |
| data-type="standard" | |
| data-shape="pill" | |
| data-theme="filled_blue" | |
| data-text="signin_with" | |
| data-size="medium" | |
| data-logo_alignment="left"> | |
| </div> | |
| <button id="sign-out" class="hidden bg-red-500 hover:bg-red-600 text-white px-4 py-2 rounded-full text-sm font-medium transition"> | |
| Déconnexion | |
| </button> | |
| </div> | |
| </header> | |
| <!-- Controls --> | |
| <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> | |
| <label for="import-file" class="bg-blue-100 hover:bg-blue-200 text-blue-800 px-4 py-2 rounded-lg text-sm font-medium transition flex items-center cursor-pointer"> | |
| <i class="fas fa-file-import mr-2"></i> Importer | |
| <input id="import-file" type="file" accept=".json" class="hidden"> | |
| </label> | |
| <button id="save-drive-btn" class="hidden bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded-lg text-sm font-medium transition flex items-center"> | |
| <i class="fab fa-google-drive mr-2"></i> Sauvegarder | |
| </button> | |
| </div> | |
| </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"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h3 class="text-xl font-bold text-blue-800" id="modal-date">Ajouter une tâche</h3> | |
| <button id="close-modal" class="text-gray-500 hover:text-gray-700"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| <div class="space-y-4"> | |
| <div> | |
| <label for="task-text" class="block text-sm font-medium text-gray-700 mb-1">Tâche</label> | |
| <input type="text" id="task-text" 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 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 | |
| </button> | |
| <button id="save-task" class="px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-lg transition"> | |
| Ajouter | |
| </button> | |
| </div> | |
| </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> | |
| <button id="cancel-multi-day" class="ml-4 text-blue-600 hover:text-blue-800"> | |
| <i class="fas fa-times"></i> Annuler | |
| </button> | |
| </div> | |
| </div> | |
| <script> | |
| // Global variables | |
| let currentYear = 2025; | |
| let calendarData = {}; | |
| let selectedDate = null; | |
| let multiDaySelection = false; | |
| let multiDayStart = null; | |
| let multiDayEnd = null; | |
| let currentUser = null; | |
| let isDragging = false; | |
| // Initialize the calendar | |
| document.addEventListener('DOMContentLoaded', function() { | |
| initializeCalendar(); | |
| setupEventListeners(); | |
| loadFromLocalStorage(); | |
| }); | |
| function initializeCalendar() { | |
| // Initialize empty calendar data structure | |
| for (let year = 2025; year <= 2030; year++) { | |
| calendarData[year] = {}; | |
| for (let month = 0; month < 12; month++) { | |
| calendarData[year][month] = {}; | |
| const daysInMonth = new Date(year, month + 1, 0).getDate(); | |
| for (let day = 1; day <= daysInMonth; day++) { | |
| calendarData[year][month][day] = []; | |
| } | |
| } | |
| } | |
| renderCalendar(); | |
| } | |
| 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'; | |
| const monthName = new Date(currentYear, month, 1).toLocaleString('fr-FR', { month: 'long' }); | |
| const capitalizedMonthName = monthName.charAt(0).toUpperCase() + monthName.slice(1); | |
| monthElement.innerHTML = ` | |
| <div class="bg-blue-600 text-white px-4 py-3 font-bold"> | |
| ${capitalizedMonthName} ${currentYear} | |
| </div> | |
| <div class="grid grid-cols-7 gap-px bg-gray-200 p-px"> | |
| ${['Lu', 'Ma', 'Me', 'Je', 'Ve', 'Sa', 'Di'].map(day => ` | |
| <div class="bg-blue-100 text-blue-800 text-center text-sm font-medium py-1"> | |
| ${day} | |
| </div> | |
| `).join('')} | |
| </div> | |
| <div class="grid grid-cols-7 gap-px bg-gray-200 p-px" id="month-${month}"> | |
| <!-- Days will be inserted here --> | |
| </div> | |
| `; | |
| container.appendChild(monthElement); | |
| renderMonthDays(month); | |
| } | |
| } | |
| function renderMonthDays(month) { | |
| const monthContainer = document.getElementById(`month-${month}`); | |
| const firstDay = new Date(currentYear, month, 1).getDay(); | |
| const daysInMonth = new Date(currentYear, month + 1, 0).getDate(); | |
| // Adjust for Monday as first day (French calendar) | |
| const adjustedFirstDay = firstDay === 0 ? 6 : firstDay - 1; | |
| // Add empty cells for days before the first day of the month | |
| for (let i = 0; i < adjustedFirstDay; i++) { | |
| const emptyCell = document.createElement('div'); | |
| emptyCell.className = 'bg-gray-100 h-12'; | |
| monthContainer.appendChild(emptyCell); | |
| } | |
| // Add cells for each day of the month | |
| for (let day = 1; day <= daysInMonth; day++) { | |
| const date = new Date(currentYear, month, day); | |
| const dayOfWeek = date.getDay(); | |
| const isWeekend = dayOfWeek === 0 || dayOfWeek === 6; | |
| const dayElement = document.createElement('div'); | |
| dayElement.className = `calendar-day bg-white ${isWeekend ? 'bg-blue-50' : ''} p-2 relative`; | |
| dayElement.dataset.year = currentYear; | |
| 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) { | |
| dayElement.classList.add('multi-day-selected', isMultiDay.position); | |
| } | |
| dayElement.innerHTML = ` | |
| <div class="flex justify-between items-start mb-1"> | |
| <span class="text-lg font-medium ${isWeekend ? 'text-blue-600' : 'text-gray-800'}">${day}</span> | |
| <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-20"> | |
| ${renderTasks(currentYear, month, day)} | |
| </div> | |
| `; | |
| monthContainer.appendChild(dayElement); | |
| } | |
| } | |
| function renderTasks(year, month, day) { | |
| if (!calendarData[year] || !calendarData[year][month] || !calendarData[year][month][day]) { | |
| 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(); | |
| } | |
| }); | |
| // 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), | |
| day: parseInt(dayElement.dataset.day) | |
| }; | |
| const dateStr = new Date(selectedDate.year, selectedDate.month, selectedDate.day) | |
| .toLocaleDateString('fr-FR', { weekday: 'long', day: 'numeric', month: 'long' }); | |
| document.getElementById('modal-date').textContent = `Tâche pour le ${dateStr}`; | |
| document.getElementById('task-text').value = ''; | |
| document.getElementById('task-time').value = ''; | |
| document.getElementById('task-modal').classList.remove('hidden'); | |
| } | |
| 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); | |
| const month = parseInt(dayElement.dataset.month); | |
| const day = parseInt(dayElement.dataset.day); | |
| calendarData[year][month][day].splice(taskIndex, 1); | |
| saveToLocalStorage(); | |
| renderCalendar(); | |
| } | |
| }); | |
| // Modal buttons | |
| document.getElementById('close-modal').addEventListener('click', () => { | |
| document.getElementById('task-modal').classList.add('hidden'); | |
| }); | |
| document.getElementById('cancel-task').addEventListener('click', () => { | |
| document.getElementById('task-modal').classList.add('hidden'); | |
| }); | |
| document.getElementById('save-task').addEventListener('click', () => { | |
| const taskText = document.getElementById('task-text').value.trim(); | |
| const taskTime = document.getElementById('task-time').value; | |
| if (taskText) { | |
| const newTask = { | |
| text: taskText, | |
| time: taskTime || null, | |
| user: currentUser ? currentUser.name : null | |
| }; | |
| calendarData[selectedDate.year][selectedDate.month][selectedDate.day].push(newTask); | |
| saveToLocalStorage(); | |
| renderCalendar(); | |
| document.getElementById('task-modal').classList.add('hidden'); | |
| } | |
| }); | |
| // Export/Import | |
| document.getElementById('export-btn').addEventListener('click', exportCalendar); | |
| document.getElementById('import-file').addEventListener('change', function(e) { | |
| const file = e.target.files[0]; | |
| if (!file) return; | |
| const reader = new FileReader(); | |
| reader.onload = function(e) { | |
| try { | |
| const importedData = JSON.parse(e.target.result); | |
| mergeCalendarData(importedData); | |
| saveToLocalStorage(); | |
| renderCalendar(); | |
| alert('Données importées avec succès!'); | |
| } catch (error) { | |
| alert('Erreur lors de l\'importation: ' + error.message); | |
| } | |
| }; | |
| reader.readAsText(file); | |
| e.target.value = ''; // Reset file input | |
| }); | |
| // Multi-day selection | |
| document.addEventListener('mousedown', handleDayMouseDown); | |
| document.addEventListener('mousemove', handleDayMouseMove); | |
| document.addEventListener('mouseup', handleDayMouseUp); | |
| document.addEventListener('touchstart', handleDayTouchStart, { passive: false }); | |
| document.addEventListener('touchmove', handleDayTouchMove, { passive: false }); | |
| document.addEventListener('touchend', handleDayTouchEnd); | |
| document.getElementById('cancel-multi-day').addEventListener('click', cancelMultiDaySelection); | |
| // Enable multi-day selection mode | |
| document.addEventListener('keydown', function(e) { | |
| if (e.key === 'Shift' && !multiDaySelection) { | |
| startMultiDaySelection(); | |
| } | |
| }); | |
| document.addEventListener('keyup', function(e) { | |
| if (e.key === 'Shift' && multiDaySelection) { | |
| endMultiDaySelection(); | |
| } | |
| }); | |
| } | |
| // Google Sign-In | |
| function handleGoogleSignIn(response) { | |
| const user = response.credential ? parseJWT(response.credential) : response; | |
| currentUser = { | |
| name: user.name, | |
| email: user.email, | |
| picture: user.picture | |
| }; | |
| document.getElementById('user-info').classList.remove('hidden'); | |
| document.getElementById('user-pic').src = currentUser.picture; | |
| document.getElementById('user-name').textContent = currentUser.name; | |
| document.querySelector('.g_id_signin').classList.add('hidden'); | |
| document.getElementById('sign-out').classList.remove('hidden'); | |
| document.getElementById('save-drive-btn').classList.remove('hidden'); | |
| // Load data from Google Drive if available | |
| // This would require additional Google Drive API implementation | |
| } | |
| function parseJWT(token) { | |
| const base64Url = token.split('.')[1]; | |
| const base64 = base64Url.replace(/-/g, '+').replace(/_/g, '/'); | |
| const jsonPayload = decodeURIComponent(atob(base64).split('').map(function(c) { | |
| return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2); | |
| }).join('')); | |
| return JSON.parse(jsonPayload); | |
| } | |
| document.getElementById('sign-out').addEventListener('click', function() { | |
| google.accounts.id.disableAutoSelect(); | |
| currentUser = null; | |
| document.getElementById('user-info').classList.add('hidden'); | |
| document.querySelector('.g_id_signin').classList.remove('hidden'); | |
| document.getElementById('sign-out').classList.add('hidden'); | |
| document.getElementById('save-drive-btn').classList.add('hidden'); | |
| }); | |
| // Save to Google Drive (placeholder - would need actual implementation) | |
| document.getElementById('save-drive-btn').addEventListener('click', function() { | |
| if (!currentUser) return; | |
| // In a real implementation, this would use the Google Drive API | |
| alert('Fonctionnalité de sauvegarde sur Google Drive à implémenter'); | |
| }); | |
| // Local storage | |
| function saveToLocalStorage() { | |
| localStorage.setItem('calendarData', JSON.stringify(calendarData)); | |
| } | |
| function loadFromLocalStorage() { | |
| const savedData = localStorage.getItem('calendarData'); | |
| if (savedData) { | |
| try { | |
| const parsedData = JSON.parse(savedData); | |
| // Merge with existing structure to ensure all years are present | |
| for (let year in parsedData) { | |
| if (parsedData.hasOwnProperty(year)) { | |
| if (!calendarData[year]) { | |
| calendarData[year] = {}; | |
| } | |
| for (let month in parsedData[year]) { | |
| if (parsedData[year].hasOwnProperty(month)) { | |
| if (!calendarData[year][month]) { | |
| calendarData[year][month] = {}; | |
| } | |
| for (let day in parsedData[year][month]) { | |
| if (parsedData[year][month].hasOwnProperty(day)) { | |
| calendarData[year][month][day] = parsedData[year][month][day]; | |
| } | |
| } | |
| } | |
| } | |
| } | |
| } | |
| renderCalendar(); | |
| } catch (error) { | |
| console.error('Error loading from localStorage:', error); | |
| } | |
| } | |
| } | |
| // Export/Import functions | |
| function exportCalendar() { | |
| const dataStr = JSON.stringify(calendarData, null, 2); | |
| const dataUri = 'data:application/json;charset=utf-8,' + encodeURIComponent(dataStr); | |
| const exportName = `calendrier_${currentYear}.json`; | |
| const linkElement = document.createElement('a'); | |
| linkElement.setAttribute('href', dataUri); | |
| linkElement.setAttribute('download', exportName); | |
| linkElement.click(); | |
| } | |
| function mergeCalendarData(importedData) { | |
| for (let year in importedData) { | |
| if (importedData.hasOwnProperty(year)) { | |
| if (!calendarData[year]) { | |
| calendarData[year] = {}; | |
| } | |
| for (let month in importedData[year]) { | |
| if (importedData[year].hasOwnProperty(month)) { | |
| if (!calendarData[year][month]) { | |
| calendarData[year][month] = {}; | |
| } | |
| for (let day in importedData[year][month]) { | |
| if (importedData[year][month].hasOwnProperty(day)) { | |
| if (!calendarData[year][month][day]) { | |
| calendarData[year][month][day] = []; | |
| } | |
| // Add imported tasks with user prefix if available | |
| const importedTasks = importedData[year][month][day]; | |
| for (let task of importedTasks) { | |
| if (currentUser) { | |
| task.text = `[${currentUser.name}] ${task.text}`; | |
| task.user = currentUser.name; | |
| } | |
| calendarData[year][month][day].push(task); | |
| } | |
| } | |
| } | |
| } | |
| } | |
| } | |
| } | |
| } | |
| // Multi-day selection functions | |
| function startMultiDaySelection() { | |
| multiDaySelection = true; | |
| document.getElementById('multi-day-info').classList.remove('hidden'); | |
| } | |
| function endMultiDaySelection() { | |
| multiDaySelection = false; | |
| document.getElementById('multi-day-info').classList.add('hidden'); | |
| if (multiDayStart && multiDayEnd) { | |
| // Here you would implement what happens when a multi-day selection is made | |
| // For example, create a task that spans multiple days | |
| alert(`Sélection multiple du ${formatDate(multiDayStart)} au ${formatDate(multiDayEnd)}`); | |
| } | |
| multiDayStart = null; | |
| multiDayEnd = null; | |
| renderCalendar(); | |
| } | |
| function cancelMultiDaySelection() { | |
| multiDaySelection = false; | |
| multiDayStart = null; | |
| multiDayEnd = null; | |
| document.getElementById('multi-day-info').classList.add('hidden'); | |
| renderCalendar(); | |
| } | |
| function formatDate(date) { | |
| return new Date(date.year, date.month, date.day).toLocaleDateString('fr-FR'); | |
| } | |
| function checkMultiDaySelection(year, month, day) { | |
| if (!multiDayStart || !multiDayEnd) return false; | |
| const currentDate = new Date(year, month, day).getTime(); | |
| const startDate = new Date(multiDayStart.year, multiDayStart.month, multiDayStart.day).getTime(); | |
| const endDate = new Date(multiDayEnd.year, multiDayEnd.month, multiDayEnd.day).getTime(); | |
| const minDate = Math.min(startDate, endDate); | |
| const maxDate = Math.max(startDate, endDate); | |
| if (currentDate >= minDate && currentDate <= maxDate) { | |
| if (currentDate === minDate) return { selected: true, position: 'multi-day-start' }; | |
| if (currentDate === maxDate) return { selected: true, position: 'multi-day-end' }; | |
| return { selected: true, position: 'multi-day-middle' }; | |
| } | |
| return false; | |
| } | |
| // Mouse event handlers for multi-day selection | |
| function handleDayMouseDown(e) { | |
| if (!multiDaySelection) return; | |
| const dayElement = e.target.closest('.calendar-day'); | |
| if (!dayElement) return; | |
| isDragging = true; | |
| const year = parseInt(dayElement.dataset.year); | |
| const month = parseInt(dayElement.dataset.month); | |
| const day = parseInt(dayElement.dataset.day); | |
| multiDayStart = { year, month, day }; | |
| multiDayEnd = { year, month, day }; | |
| renderCalendar(); | |
| } | |
| function handleDayMouseMove(e) { | |
| if (!isDragging || !multiDaySelection) return; | |
| const dayElement = e.target.closest('.calendar-day'); | |
| if (!dayElement) return; | |
| const year = parseInt(dayElement.dataset.year); | |
| const month = parseInt(dayElement.dataset.month); | |
| const day = parseInt(dayElement.dataset.day); | |
| multiDayEnd = { year, month, day }; | |
| renderCalendar(); | |
| } | |
| function handleDayMouseUp() { | |
| isDragging = false; | |
| } | |
| // Touch event handlers for multi-day selection | |
| function handleDayTouchStart(e) { | |
| if (!multiDaySelection) return; | |
| e.preventDefault(); | |
| const touch = e.touches[0]; | |
| const dayElement = document.elementFromPoint(touch.clientX, touch.clientY).closest('.calendar-day'); | |
| if (!dayElement) return; | |
| isDragging = true; | |
| const year = parseInt(dayElement.dataset.year); | |
| const month = parseInt(dayElement.dataset.month); | |
| const day = parseInt(dayElement.dataset.day); | |
| multiDayStart = { year, month, day }; | |
| multiDayEnd = { year, month, day }; | |
| renderCalendar(); | |
| } | |
| function handleDayTouchMove(e) { | |
| if (!isDragging || !multiDaySelection) return; | |
| e.preventDefault(); | |
| const touch = e.touches[0]; | |
| const dayElement = document.elementFromPoint(touch.clientX, touch.clientY).closest('.calendar-day'); | |
| if (!dayElement) return; | |
| const year = parseInt(dayElement.dataset.year); | |
| const month = parseInt(dayElement.dataset.month); | |
| const day = parseInt(dayElement.dataset.day); | |
| multiDayEnd = { year, month, day }; | |
| renderCalendar(); | |
| } | |
| 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> |