{"id":437,"date":"2025-10-20T19:38:56","date_gmt":"2025-10-20T19:38:56","guid":{"rendered":"https:\/\/compagnie-arc-ermont.fr\/?page_id=437"},"modified":"2025-10-22T16:53:43","modified_gmt":"2025-10-22T16:53:43","slug":"evenements-concours","status":"publish","type":"page","link":"https:\/\/compagnie-arc-ermont.fr\/index.php\/evenements-concours\/","title":{"rendered":"\u00c9v\u00e9nements"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"437\" class=\"elementor elementor-437\">\n\t\t\t\t<div class=\"elementor-element elementor-element-ebfd0b4 e-flex e-con-boxed e-con e-parent\" data-id=\"ebfd0b4\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-602b9bc elementor-widget elementor-widget-html\" data-id=\"602b9bc\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- Calendrier dynamique (colles ce bloc dans un \"HTML personnalis\u00e9\") -->\n<div id=\"cal-wrapper\"><\/div>\n\n<script>\n\/* ---------------------------\n  CONFIG : remplis ton tableau d'\u00e9v\u00e9nements ici\n  format: { date: \"YYYY-MM-DD\", title: \"Texte\", time: \"HH:MM\" (optionnel), desc: \"...\" (optionnel) }\n-----------------------------*\/\nconst events = [\n  \/\/ --- Novembre 2025 ---\n  { date: \"2025-11-08\", title: \"Salle \u2013 DD1 \u2013 Eragny\" },\n  { date: \"2025-11-09\", title: \"Salle \u2013 DD1 \u2013 Eragny\" },\n  { date: \"2025-11-15\", title: \"Salle \u2013 Loisirs \u2013 Le Plessis Bouchard\" },\n  { date: \"2025-11-22\", title: \"Salle \u2013 DDj2 \u2013 Osny\" },\n  { date: \"2025-11-23\", title: \"Salle \u2013 DDj2 \u2013 Osny\" },\n  { date: \"2025-11-29\", title: \"Salle \u2013 Pontoise\" },\n  { date: \"2025-11-30\", title: \"Salle \u2013 Pontoise\" },\n\n  \/\/ --- D\u00e9cembre 2025 ---\n  { date: \"2025-12-06\", title: \"Salle \u2013 Target \u2013 Montmorency\" },\n  { date: \"2025-12-07\", title: \"Salle \u2013 Target \u2013 Montmorency\" },\n  { date: \"2025-12-06\", title: \"P.G. \u2013 Marly la Ville\" },\n  { date: \"2025-12-07\", title: \"P.G. \u2013 Marly la Ville\" },\n  { date: \"2025-12-07\", title: \"Salle \u2013 Michel Vicomte \u2013 Eragny\" },\n  { date: \"2025-12-13\", title: \"Salle \u2013 Viarmes\" },\n  { date: \"2025-12-14\", title: \"Salle \u2013 Viarmes\" },\n  { date: \"2025-12-20\", title: \"Salle \u2013 Target \u2013 Ermont\" },\n  { date: \"2025-12-21\", title: \"Salle \u2013 Target \u2013 Ermont\" },\n\n  \/\/ --- Janvier 2026 ---\n  { date: \"2026-01-10\", title: \"Salle \u2013 St Ouen l\u2019Aum\u00f4ne\" },\n  { date: \"2026-01-11\", title: \"Salle \u2013 St Ouen l\u2019Aum\u00f4ne\" },\n  { date: \"2026-01-17\", title: \"Salle \u2013 DD2 \u2013 Villiers le Bel\" },\n  { date: \"2026-01-18\", title: \"Salle \u2013 DD2 \u2013 Villiers le Bel\" },\n  { date: \"2026-01-25\", title: \"Salle \u2013 Loisirs Duels \u2013 Montigny les Cormeilles\" },\n  { date: \"2026-01-31\", title: \"Salle \u2013 CD95 \u2013 Le Plessis Bouchard\" },\n\n  \/\/ --- F\u00e9vrier 2026 ---\n  { date: \"2026-02-01\", title: \"Salle \u2013 CD95 \u2013 Le Plessis Bouchard\" },\n\n  \/\/ --- Mars 2026 ---\n  { date: \"2026-03-01\", title: \"Salle \u2013 Loisirs Vegas \u2013 Ermont\" },\n  { date: \"2026-03-07\", title: \"Salle \u2013 Troph\u00e9e des mixtes \u2013 Marly\" },\n  { date: \"2026-03-08\", title: \"Nature \u2013 Viarmes\" },\n  { date: \"2026-03-14\", title: \"Beursault \u2013 Villiers le Bel\" },\n  { date: \"2026-03-15\", title: \"Beursault \u2013 Villiers le Bel\" },\n  { date: \"2026-03-14\", title: \"Campagne \u2013 CD95 \u2013 Viarmes\" },\n  { date: \"2026-03-15\", title: \"Campagne \u2013 CD95 \u2013 Viarmes\" },\n  { date: \"2026-03-21\", title: \"Beursault \u2013 Pontoise\" },\n  { date: \"2026-03-22\", title: \"Beursault \u2013 Pontoise\" },\n  { date: \"2026-03-21\", title: \"D\u00e9butants \u2013 Saint Brice sous For\u00eat\" },\n  { date: \"2026-03-22\", title: \"D\u00e9butants \u2013 Saint Brice sous For\u00eat\" },\n  { date: \"2026-03-28\", title: \"Beursault \u2013 CD95 \u2013 Montmorency\" },\n  { date: \"2026-03-29\", title: \"Beursault \u2013 CD95 \u2013 Montmorency\" }\n];\n\n\/* ---------------------------\n  FIN CONFIG\n-----------------------------*\/\n\n(function(){\n  \/\/ create container and styles (scoped under .cal-box)\n  const wrapper = document.getElementById('cal-wrapper');\n  wrapper.innerHTML = `\n  <style>\n    .cal-box { font-family: \"Segoe UI\", Roboto, Arial, sans-serif; max-width:920px; margin:18px auto; color:#031557; }\n    .cal-header { display:flex; gap:12px; align-items:center; justify-content:space-between; margin-bottom:10px; }\n    .cal-title { display:flex; gap:10px; align-items:center; }\n    .cal-title h3 { margin:0; color:#031557; font-size:1.15rem; }\n    .cal-controls { display:flex; gap:8px; align-items:center; }\n    .btn { background:#d8a63b; color:#031557; padding:8px 10px; border-radius:6px; border:0; cursor:pointer; font-weight:600; }\n    .btn:active{ transform:translateY(1px); }\n    .select { \n  padding:7px 8px; \n  border-radius:6px; \n  border:1px solid #dfe7f5; \n  background:#fff; \n  color:#031557; \n  width:150px; \/* \u2705 largeur augment\u00e9e du s\u00e9lecteur *\/\n}\n    .calendar { display:grid; grid-template-columns: repeat(7, 1fr); gap:6px; }\n    .weekday { text-align:center; font-size:0.85rem; color:#51607f; padding:6px 4px; }\n    .day { background:#fff; min-height:80px; border-radius:8px; padding:8px; box-shadow:0 1px 4px rgba(0,0,0,0.06); position:relative; display:flex; flex-direction:column; gap:6px; }\n    .day.other { opacity:0.38; }\n    .day .date-num { font-weight:700; color:#031557; }\n    .event-dot { display:inline-block; width:8px; height:8px; border-radius:50%; background:#d8a63b; margin-right:6px; vertical-align:middle; }\n    .events-preview { margin-top:auto; font-size:0.85rem; color:#203057; display:flex; flex-direction:column; gap:4px; }\n    .events-preview .eitem { display:flex; align-items:center; gap:6px; padding:4px; border-radius:6px; background:rgba(216,166,59,0.06); }\n    .day:hover { outline: 2px solid rgba(216,166,59,0.12); }\n    .day.past { opacity:0.6; text-decoration:line-through; }\n    .day-clicked { outline: 3px solid rgba(3,21,87,0.12); }\n    .details { margin-top:12px; background:#fff; padding:12px; border-radius:8px; box-shadow:0 2px 8px rgba(0,0,0,0.06); color:#203057; }\n    .no-events { color:#7a8699; font-style:italic; }\n    \/* responsive *\/\n    @media (max-width:700px){\n      .day { min-height:72px; padding:6px; }\n      .calendar { gap:4px; }\n    }\n  <\/style>\n\n  <div class=\"cal-box\">\n    <div class=\"cal-header\">\n      <div class=\"cal-title\">\n        <h3>Calendrier des \u00e9v\u00e9nements<\/h3>\n      <\/div>\n\n      <div class=\"cal-controls\">\n        <button class=\"btn\" id=\"prevBtn\" title=\"Mois pr\u00e9c\u00e9dent\">\u25c0<\/button>\n        <select id=\"monthSelect\" class=\"select\"><\/select>\n        <select id=\"yearSelect\" class=\"select\"><\/select>\n        <button class=\"btn\" id=\"nextBtn\" title=\"Mois suivant\">\u25b6<\/button>\n      <\/div>\n    <\/div>\n\n    <div class=\"calendar\" id=\"calendarGrid\"><\/div>\n    <div id=\"dayDetails\" class=\"details\" aria-live=\"polite\"><\/div>\n  <\/div>\n  `;\n\n  \/\/ helpers\n  const monthNames = [\"Janvier\",\"F\u00e9vrier\",\"Mars\",\"Avril\",\"Mai\",\"Juin\",\"Juillet\",\"Ao\u00fbt\",\"Septembre\",\"Octobre\",\"Novembre\",\"D\u00e9cembre\"];\n  const today = new Date();\n  let viewYear = today.getFullYear();\n  let viewMonth = today.getMonth(); \/\/ 0-index\n\n  \/\/ build month\/year selects\n  const monthSelect = wrapper.querySelector('#monthSelect');\n  const yearSelect = wrapper.querySelector('#yearSelect');\n  monthNames.forEach((m, i) => {\n    const opt = document.createElement('option'); opt.value = i; opt.textContent = m;\n    monthSelect.appendChild(opt);\n  });\n  \/\/ years range (current-2 .. current+2)\n  for(let y = today.getFullYear()-2; y <= today.getFullYear()+2; y++){\n    const opt = document.createElement('option'); opt.value = y; opt.textContent = y;\n    yearSelect.appendChild(opt);\n  }\n\n  \/\/ calendar header events\n  wrapper.querySelector('#prevBtn').addEventListener('click', () => {\n    viewMonth--; if(viewMonth < 0){ viewMonth = 11; viewYear--; } renderCalendar();\n  });\n  wrapper.querySelector('#nextBtn').addEventListener('click', () => {\n    viewMonth++; if(viewMonth > 11){ viewMonth = 0; viewYear++; } renderCalendar();\n  });\n  monthSelect.addEventListener('change', (e) => { viewMonth = Number(e.target.value); renderCalendar(); });\n  yearSelect.addEventListener('change', (e) => { viewYear = Number(e.target.value); renderCalendar(); });\n\n  \/\/ utility: group events by date string\n  function groupEvents(list){\n    const map = {};\n    (list||[]).forEach(ev => {\n      if(!ev.date) return;\n      const d = ev.date;\n      if(!map[d]) map[d]=[];\n      map[d].push(ev);\n    });\n    \/\/ sort events per day by time if provided\n    Object.keys(map).forEach(k => map[k].sort((a,b) => (a.time||'').localeCompare(b.time||'')));\n    return map;\n  }\n\n  const eventsByDate = groupEvents(events);\n\n  \/\/ render function\n  function renderCalendar() {\n    \/\/ sync selects\n    monthSelect.value = viewMonth;\n    yearSelect.value = viewYear;\n\n    const grid = wrapper.querySelector('#calendarGrid');\n    grid.innerHTML = '';\n    \/\/ show weekdays header\n    const weekDays = ['Lun','Mar','Mer','Jeu','Ven','Sam','Dim'];\n    weekDays.forEach(wd => {\n      const el = document.createElement('div'); el.className='weekday'; el.textContent = wd; grid.appendChild(el);\n    });\n\n    \/\/ compute first day of month (ISO: Monday = 1)\n    const first = new Date(viewYear, viewMonth, 1);\n    const startWeekDay = (first.getDay() + 6) % 7; \/\/ convert Sun(0)->6, Mon(1)->0 ...\n    const daysInMonth = new Date(viewYear, viewMonth+1, 0).getDate();\n\n    \/\/ previous month's tail\n    const prevMonthDays = startWeekDay;\n    const prevMonthLastDate = new Date(viewYear, viewMonth, 0).getDate();\n\n    \/\/ fill calendar: total cells = 7 * 6 (to always have 6 rows)\n    const totalCells = 42;\n    for(let i=0;i<totalCells;i++){\n      const cell = document.createElement('div');\n      \/\/ day number & classes\n      let cellDate = null;\n      if(i < prevMonthDays){\n        const dayNum = prevMonthLastDate - prevMonthDays + 1 + i;\n        cell.className = 'day other';\n        \/\/ date of previous month\n        cellDate = new Date(viewYear, viewMonth-1, dayNum);\n      } else if(i >= prevMonthDays + daysInMonth){\n        const dayNum = i - (prevMonthDays + daysInMonth) + 1;\n        cell.className = 'day other';\n        cellDate = new Date(viewYear, viewMonth+1, dayNum);\n      } else {\n        const dayNum = i - prevMonthDays + 1;\n        cell.className = 'day';\n        cellDate = new Date(viewYear, viewMonth, dayNum);\n      }\n\n      \/\/ iso date string\n      const iso = cellDate.toISOString().slice(0,10);\n      const dateNum = cellDate.getDate();\n\n      \/\/ mark past days\n      if(new Date(iso) < new Date(new Date().toISOString().slice(0,10))) {\n        cell.classList.add('past');\n      }\n\n      \/\/ build inner content\n      const num = document.createElement('div'); num.className='date-num'; num.textContent = dateNum;\n      const preview = document.createElement('div'); preview.className='events-preview';\n\n      \/\/ attach events if any\n      if(eventsByDate[iso]) {\n        eventsByDate[iso].forEach(ev => {\n          const eitem = document.createElement('div'); eitem.className='eitem';\n          const dot = document.createElement('span'); dot.className='event-dot'; eitem.appendChild(dot);\n          const txt = document.createElement('span'); txt.textContent = (ev.time? ev.time + ' \u2014 ' : '') + ev.title;\n          eitem.appendChild(txt);\n          preview.appendChild(eitem);\n        });\n      } else {\n        \/\/ nothing \u2014 leave preview empty (we add no-events in details on click)\n      }\n\n      cell.appendChild(num);\n      cell.appendChild(preview);\n\n      \/\/ click to show details\n      cell.addEventListener('click', () => {\n        \/\/ remove previous highlight\n        const prev = wrapper.querySelector('.day-clicked'); if(prev) prev.classList.remove('day-clicked');\n        cell.classList.add('day-clicked');\n\n        const details = wrapper.querySelector('#dayDetails');\n        details.innerHTML = ''; \/\/ clear\n        const heading = document.createElement('div'); heading.style.fontWeight='700';\n        heading.textContent = cellDate.toLocaleDateString('fr-FR', { weekday:'long', year:'numeric', month:'long', day:'numeric' });\n        details.appendChild(heading);\n\n        if(eventsByDate[iso] && eventsByDate[iso].length){\n          eventsByDate[iso].forEach(ev=>{\n            const evBlock = document.createElement('div');\n            evBlock.style.padding = '8px 6px';\n            evBlock.style.borderTop = '1px dashed rgba(3,21,87,0.06)';\n            evBlock.innerHTML = `<div style=\"font-weight:700;color:#031557\">${ev.title}${ev.time? ' \u2014 '+ev.time: ''}<\/div>\n                                 ${ev.desc? `<div style=\"margin-top:6px;color:#204060\">${ev.desc}<\/div>` : ''}`;\n            details.appendChild(evBlock);\n          });\n        } else {\n          const nothing = document.createElement('div'); nothing.className='no-events';\n          nothing.textContent = 'Aucun \u00e9v\u00e9nement pour ce jour.';\n          details.appendChild(nothing);\n        }\n        \/\/ scroll to details on small screens\n        details.scrollIntoView({behavior:'smooth', block:'nearest'});\n      });\n\n      grid.appendChild(cell);\n    } \/\/ end cells\n  } \/\/ end renderCalendar\n\n  \/\/ initialize view to current month\n  renderCalendar();\n\n  \/\/ expose a global helper if you want to call externally:\n  window.renderCalendarFromEvents = function(year, month, newEvents){\n    \/\/ year (YYYY), month (0..11)\n    if(Array.isArray(newEvents)) {\n      \/\/ override eventsByDate\n      const grouped = groupEvents(newEvents);\n      \/\/ update closure eventsByDate (we recreate variable by reassign)\n      for(const k in eventsByDate) delete eventsByDate[k];\n      Object.assign(eventsByDate, grouped);\n    }\n    if(typeof year === 'number') viewYear = year;\n    if(typeof month === 'number') viewMonth = month;\n    renderCalendar();\n  };\n\n})();\n<\/script>\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":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-437","page","type-page","status-publish","hentry"],"blocksy_meta":[],"_links":{"self":[{"href":"https:\/\/compagnie-arc-ermont.fr\/index.php\/wp-json\/wp\/v2\/pages\/437","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/compagnie-arc-ermont.fr\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/compagnie-arc-ermont.fr\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/compagnie-arc-ermont.fr\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/compagnie-arc-ermont.fr\/index.php\/wp-json\/wp\/v2\/comments?post=437"}],"version-history":[{"count":14,"href":"https:\/\/compagnie-arc-ermont.fr\/index.php\/wp-json\/wp\/v2\/pages\/437\/revisions"}],"predecessor-version":[{"id":553,"href":"https:\/\/compagnie-arc-ermont.fr\/index.php\/wp-json\/wp\/v2\/pages\/437\/revisions\/553"}],"wp:attachment":[{"href":"https:\/\/compagnie-arc-ermont.fr\/index.php\/wp-json\/wp\/v2\/media?parent=437"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}