Club Photo - R\u00e9servation du Studio Photo<\/title>\n <style>\n \/* Styles g\u00e9n\u00e9raux *\/\n body {\n font-family: Arial, sans-serif;\n background-color: #f5f5f5;\n margin: 0;\n padding: 20px;\n }\n header {\n text-align: center;\n margin-bottom: 20px;\n }\n h1, h2 {\n color: #333;\n }\n section {\n background-color: #fff;\n padding: 15px;\n margin-bottom: 20px;\n border-radius: 8px;\n box-shadow: 0 2px 5px rgba(0,0,0,0.1);\n }\n .center {\n text-align: center;\n }\n button {\n padding: 10px;\n border: none;\n border-radius: 4px;\n background-color: #007BFF;\n color: #fff;\n cursor: pointer;\n font-size: 1em;\n }\n button:hover {\n background-color: #0056b3;\n }\n \/* Navigation du calendrier *\/\n #calendarNav {\n text-align: center;\n margin-bottom: 10px;\n }\n #calendarNav button {\n margin: 0 5px;\n }\n \/* Styles du calendrier *\/\n #calendar table {\n width: 100%;\n border-collapse: collapse;\n }\n #calendar th, #calendar td {\n border: 1px solid #ccc;\n width: 14.28%;\n height: 80px;\n vertical-align: top;\n padding: 5px;\n }\n #calendar th {\n background-color: #f0f0f0;\n }\n .date-number {\n font-weight: bold;\n }\n .event {\n font-size: 0.9em;\n background-color: #e7f3ff;\n margin: 2px 0;\n padding: 2px;\n border-radius: 3px;\n display: flex;\n align-items: center;\n justify-content: space-between;\n }\n .event button {\n font-size: 0.8em;\n color: red;\n background: transparent;\n border: none;\n cursor: pointer;\n }\n \/* Formulaire *\/\n form {\n max-width: 400px;\n margin: 0 auto;\n }\n form div {\n margin-bottom: 10px;\n }\n label {\n display: block;\n font-weight: bold;\n margin-bottom: 5px;\n }\n input, select {\n width: 100%;\n padding: 8px;\n border: 1px solid #ccc;\n border-radius: 4px;\n }\n <\/style>\n<\/head>\n<body>\n <header>\n <h1>Club Photo - R\u00e9servation du Studio Photo<\/h1>\n <\/header>\n\n \n <div class=\"center\">\n <button id=\"toggleCalendarBtn\">Afficher le calendrier<\/button>\n <\/div>\n\n \n <section id=\"calendarSection\" style=\"display: none;\">\n <h2>Vue Globale du Planning<\/h2>\n <div id=\"calendarNav\">\n <button id=\"prevMonth\">Pr\u00e9c\u00e9dent<\/button>\n <span id=\"monthYear\"><\/span>\n <button id=\"nextMonth\">Suivant<\/button>\n <\/div>\n <div id=\"calendar\"><\/div>\n <\/section>\n\n \n <section>\n <h2>R\u00e9server le Studio Photo<\/h2>\n <form id=\"reservationForm\">\n <div>\n <label for=\"nom\">Votre nom :<\/label>\n <input type=\"text\" id=\"nom\" name=\"nom\" required placeholder=\"Entrez votre nom\">\n <\/div>\n <div>\n <label for=\"date\">Date de r\u00e9servation :<\/label>\n <input type=\"date\" id=\"date\" name=\"date\" required>\n <\/div>\n <div>\n <label for=\"start\">Heure de d\u00e9but :<\/label>\n <input type=\"time\" id=\"start\" name=\"start\" required>\n <\/div>\n <div>\n <label for=\"end\">Heure de fin :<\/label>\n <input type=\"time\" id=\"end\" name=\"end\" required>\n <\/div>\n <div class=\"center\">\n <button type=\"submit\">R\u00e9server<\/button>\n <\/div>\n <\/form>\n <\/section>\n\n <script>\n \/*********************\n * Gestion de la persistance via localStorage\n *********************\/\n function loadReservations() {\n const data = localStorage.getItem('reservations');\n return data ? JSON.parse(data) : [];\n }\n function saveReservations(reservations) {\n localStorage.setItem('reservations', JSON.stringify(reservations));\n }\n let reservations = loadReservations();\n\n \/*********************\n * Variables globales pour le calendrier\n *********************\/\n let currentDate = new Date();\n let currentMonth = currentDate.getMonth(); \/\/ 0-11\n let currentYear = currentDate.getFullYear();\n\n \/\/ Fonction pour formater une date en YYYY-MM-DD\n function getFormattedDate(year, month, day) {\n let m = month + 1;\n let mm = m < 10 ? '0' + m : m;\n let dd = day < 10 ? '0' + day : day;\n return `${year}-${mm}-${dd}`;\n }\n\n \/\/ Convertir une heure (format \"HH:MM\") en minutes depuis minuit\n function timeToMinutes(timeStr) {\n const [h, m] = timeStr.split(':').map(Number);\n return h * 60 + m;\n }\n\n \/*********************\n * Fonction pour supprimer une r\u00e9servation\n *********************\/\n function deleteReservation(id) {\n reservations = reservations.filter(r => r.id !== id);\n saveReservations(reservations);\n renderCalendar(currentYear, currentMonth);\n }\n\n \/*********************\n * Fonction de rendu du calendrier\n *********************\/\n function renderCalendar(year, month) {\n const calendarDiv = document.getElementById('calendar');\n calendarDiv.innerHTML = '';\n\n \/\/ Mise \u00e0 jour de l'affichage du mois et de l'ann\u00e9e\n const monthYearSpan = document.getElementById('monthYear');\n const monthNames = ['Janvier', 'F\u00e9vrier', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Ao\u00fbt', 'Septembre', 'Octobre', 'Novembre', 'D\u00e9cembre'];\n monthYearSpan.textContent = monthNames[month] + ' ' + year;\n\n \/\/ Cr\u00e9ation du tableau du calendrier\n const table = document.createElement('table');\n\n \/\/ En-t\u00eate du tableau : jours de la semaine (lundi \u00e0 dimanche)\n const daysOfWeek = ['Lun', 'Mar', 'Mer', 'Jeu', 'Ven', 'Sam', 'Dim'];\n const thead = document.createElement('thead');\n const headerRow = document.createElement('tr');\n daysOfWeek.forEach(day => {\n const th = document.createElement('th');\n th.textContent = day;\n headerRow.appendChild(th);\n });\n thead.appendChild(headerRow);\n table.appendChild(thead);\n\n \/\/ Corps du tableau\n const tbody = document.createElement('tbody');\n\n \/\/ Calcul du premier jour du mois (en tenant compte que la semaine commence lundi)\n let firstDay = new Date(year, month, 1).getDay(); \/\/ 0 pour dimanche, 1 pour lundi, etc.\n firstDay = firstDay === 0 ? 6 : firstDay - 1; \/\/ Ajustement : lundi=0, ..., dimanche=6\n\n const daysInMonth = new Date(year, month + 1, 0).getDate();\n let date = 1;\n\n \/\/ On affiche jusqu'\u00e0 6 lignes (semaines)\n for (let i = 0; i < 6; i++) {\n const row = document.createElement('tr');\n for (let j = 0; j < 7; j++) {\n const cell = document.createElement('td');\n if (i === 0 && j < firstDay) {\n \/\/ Cellules vides avant le premier jour du mois\n cell.innerHTML = '';\n } else if (date > daysInMonth) {\n break;\n } else {\n \/\/ Affichage du num\u00e9ro de jour\n const formattedDate = getFormattedDate(year, month, date);\n const dateDiv = document.createElement('div');\n dateDiv.classList.add('date-number');\n dateDiv.textContent = date;\n cell.appendChild(dateDiv);\n\n \/\/ R\u00e9cup\u00e9ration des r\u00e9servations pour cette date\n const events = reservations.filter(r => r.date === formattedDate);\n events.forEach(event => {\n const eventDiv = document.createElement('div');\n eventDiv.classList.add('event');\n \n \/\/ Cr\u00e9ation d'un \u00e9l\u00e9ment span pour afficher le texte de la r\u00e9servation\n const textSpan = document.createElement('span');\n textSpan.textContent = event.start + \" - \" + event.end + \" : \" + event.name;\n eventDiv.appendChild(textSpan);\n \n \/\/ Bouton d'annulation\n const cancelBtn = document.createElement('button');\n cancelBtn.textContent = 'Annuler';\n cancelBtn.addEventListener('click', function(e) {\n e.stopPropagation();\n if (confirm(\"Voulez-vous annuler cette r\u00e9servation ?\")) {\n deleteReservation(event.id);\n }\n });\n eventDiv.appendChild(cancelBtn);\n \n cell.appendChild(eventDiv);\n });\n date++;\n }\n row.appendChild(cell);\n }\n tbody.appendChild(row);\n if (date > daysInMonth) break;\n }\n table.appendChild(tbody);\n calendarDiv.appendChild(table);\n }\n\n \/*********************\n * Gestion de l'affichage du calendrier\n *********************\/\n const toggleCalendarBtn = document.getElementById('toggleCalendarBtn');\n const calendarSection = document.getElementById('calendarSection');\n toggleCalendarBtn.addEventListener('click', function() {\n if (calendarSection.style.display === 'none' || calendarSection.style.display === '') {\n calendarSection.style.display = 'block';\n renderCalendar(currentYear, currentMonth);\n toggleCalendarBtn.textContent = 'Masquer le calendrier';\n } else {\n calendarSection.style.display = 'none';\n toggleCalendarBtn.textContent = 'Afficher le calendrier';\n }\n });\n\n \/\/ Navigation dans le calendrier\n document.getElementById('prevMonth').addEventListener('click', function() {\n currentMonth--;\n if (currentMonth < 0) {\n currentMonth = 11;\n currentYear--;\n }\n renderCalendar(currentYear, currentMonth);\n });\n document.getElementById('nextMonth').addEventListener('click', function() {\n currentMonth++;\n if (currentMonth > 11) {\n currentMonth = 0;\n currentYear++;\n }\n renderCalendar(currentYear, currentMonth);\n });\n\n \/*********************\n * Gestion du formulaire de r\u00e9servation\n *********************\/\n document.getElementById('reservationForm').addEventListener('submit', function(e) {\n e.preventDefault();\n const name = document.getElementById('nom').value.trim();\n const date = document.getElementById('date').value;\n const start = document.getElementById('start').value;\n const end = document.getElementById('end').value;\n\n if (!name || !date || !start || !end) {\n alert(\"Veuillez remplir tous les champs.\");\n return;\n }\n\n \/\/ V\u00e9rification que l'heure de fin est post\u00e9rieure \u00e0 l'heure de d\u00e9but\n if (start >= end) {\n alert(\"L'heure de fin doit \u00eatre post\u00e9rieure \u00e0 l'heure de d\u00e9but.\");\n return;\n }\n\n \/\/ V\u00e9rification de chevauchement pour la m\u00eame date\n const newStart = timeToMinutes(start);\n const newEnd = timeToMinutes(end);\n const chevauche = reservations.some(r => {\n if (r.date === date) {\n const existingStart = timeToMinutes(r.start);\n const existingEnd = timeToMinutes(r.end);\n return newStart < existingEnd && existingStart < newEnd;\n }\n return false;\n });\n if (chevauche) {\n alert(\"Ce cr\u00e9neau chevauche une r\u00e9servation existante pour cette date.\");\n return;\n }\n\n const newReservation = {\n id: Date.now().toString(),\n name: name,\n date: date,\n start: start,\n end: end\n };\n\n reservations.push(newReservation);\n saveReservations(reservations);\n alert(\"R\u00e9servation enregistr\u00e9e !\");\n document.getElementById('reservationForm').reset();\n\n \/\/ Mise \u00e0 jour du calendrier si visible\n if (calendarSection.style.display === 'block') {\n renderCalendar(currentYear, currentMonth);\n }\n });\n <\/script>\n<\/body>\n<\/html>\n<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>R\u00c9SERVATION DU STUDIO Club Photo – R\u00e9servation du Studio Photo Club Photo – R\u00e9servation du Studio Photo Afficher le calendrier […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"ocean_post_layout":"","ocean_both_sidebars_style":"","ocean_both_sidebars_content_width":0,"ocean_both_sidebars_sidebars_width":0,"ocean_sidebar":"","ocean_second_sidebar":"","ocean_disable_margins":"enable","ocean_add_body_class":"","ocean_shortcode_before_top_bar":"","ocean_shortcode_after_top_bar":"","ocean_shortcode_before_header":"","ocean_shortcode_after_header":"","ocean_has_shortcode":"","ocean_shortcode_after_title":"","ocean_shortcode_before_footer_widgets":"","ocean_shortcode_after_footer_widgets":"","ocean_shortcode_before_footer_bottom":"","ocean_shortcode_after_footer_bottom":"","ocean_display_top_bar":"default","ocean_display_header":"default","ocean_header_style":"","ocean_center_header_left_menu":"","ocean_custom_header_template":"","ocean_custom_logo":0,"ocean_custom_retina_logo":0,"ocean_custom_logo_max_width":0,"ocean_custom_logo_tablet_max_width":0,"ocean_custom_logo_mobile_max_width":0,"ocean_custom_logo_max_height":0,"ocean_custom_logo_tablet_max_height":0,"ocean_custom_logo_mobile_max_height":0,"ocean_header_custom_menu":"","ocean_menu_typo_font_family":"","ocean_menu_typo_font_subset":"","ocean_menu_typo_font_size":0,"ocean_menu_typo_font_size_tablet":0,"ocean_menu_typo_font_size_mobile":0,"ocean_menu_typo_font_size_unit":"px","ocean_menu_typo_font_weight":"","ocean_menu_typo_font_weight_tablet":"","ocean_menu_typo_font_weight_mobile":"","ocean_menu_typo_transform":"","ocean_menu_typo_transform_tablet":"","ocean_menu_typo_transform_mobile":"","ocean_menu_typo_line_height":0,"ocean_menu_typo_line_height_tablet":0,"ocean_menu_typo_line_height_mobile":0,"ocean_menu_typo_line_height_unit":"","ocean_menu_typo_spacing":0,"ocean_menu_typo_spacing_tablet":0,"ocean_menu_typo_spacing_mobile":0,"ocean_menu_typo_spacing_unit":"","ocean_menu_link_color":"","ocean_menu_link_color_hover":"","ocean_menu_link_color_active":"","ocean_menu_link_background":"","ocean_menu_link_hover_background":"","ocean_menu_link_active_background":"","ocean_menu_social_links_bg":"","ocean_menu_social_hover_links_bg":"","ocean_menu_social_links_color":"","ocean_menu_social_hover_links_color":"","ocean_disable_title":"default","ocean_disable_heading":"default","ocean_post_title":"","ocean_post_subheading":"","ocean_post_title_style":"","ocean_post_title_background_color":"","ocean_post_title_background":0,"ocean_post_title_bg_image_position":"","ocean_post_title_bg_image_attachment":"","ocean_post_title_bg_image_repeat":"","ocean_post_title_bg_image_size":"","ocean_post_title_height":0,"ocean_post_title_bg_overlay":0.5,"ocean_post_title_bg_overlay_color":"","ocean_disable_breadcrumbs":"default","ocean_breadcrumbs_color":"","ocean_breadcrumbs_separator_color":"","ocean_breadcrumbs_links_color":"","ocean_breadcrumbs_links_hover_color":"","ocean_display_footer_widgets":"default","ocean_display_footer_bottom":"default","ocean_custom_footer_template":"","footnotes":""},"class_list":["post-164","page","type-page","status-publish","hentry","entry","owp-thumbs-layout-horizontal","owp-btn-normal","owp-tabs-layout-horizontal","has-no-thumbnails","has-product-nav"],"_links":{"self":[{"href":"https:\/\/maquette.objectifimage-95.fr\/index.php\/wp-json\/wp\/v2\/pages\/164","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/maquette.objectifimage-95.fr\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/maquette.objectifimage-95.fr\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/maquette.objectifimage-95.fr\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/maquette.objectifimage-95.fr\/index.php\/wp-json\/wp\/v2\/comments?post=164"}],"version-history":[{"count":15,"href":"https:\/\/maquette.objectifimage-95.fr\/index.php\/wp-json\/wp\/v2\/pages\/164\/revisions"}],"predecessor-version":[{"id":524,"href":"https:\/\/maquette.objectifimage-95.fr\/index.php\/wp-json\/wp\/v2\/pages\/164\/revisions\/524"}],"wp:attachment":[{"href":"https:\/\/maquette.objectifimage-95.fr\/index.php\/wp-json\/wp\/v2\/media?parent=164"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}