{"id":77,"date":"2026-04-15T16:02:26","date_gmt":"2026-04-15T16:02:26","guid":{"rendered":"https:\/\/sannebakkerharp.nl\/?page_id=77"},"modified":"2026-04-21T09:09:51","modified_gmt":"2026-04-21T09:09:51","slug":"agenda","status":"publish","type":"page","link":"https:\/\/sannebakkerharp.nl\/en\/agenda\/","title":{"rendered":"Agenda"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"77\" class=\"elementor elementor-77\">\n\t\t\t\t<div class=\"elementor-element elementor-element-367155c e-flex e-con-boxed e-con e-parent\" data-id=\"367155c\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-64595d8 elementor-widget elementor-widget-spacer\" data-id=\"64595d8\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/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<div class=\"elementor-element elementor-element-d273ff9 e-flex e-con-boxed e-con e-parent\" data-id=\"d273ff9\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-9ced040 elementor-widget elementor-widget-heading\" data-id=\"9ced040\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">AGENDA<\/h2>\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<div class=\"elementor-element elementor-element-d5d3009 e-con-full e-flex e-con e-parent\" data-id=\"d5d3009\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t<div class=\"elementor-element elementor-element-bcc9546 e-con-full e-flex e-con e-child\" data-id=\"bcc9546\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-5ec96fc elementor-widget elementor-widget-html\" data-id=\"5ec96fc\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div id=\"concerten-wrapper\">\n\n  <div class=\"concerten-nav\">\n    <span class=\"nav-item active\" onclick=\"showTab('upcoming')\">Upcoming<\/span>\n    <span class=\"nav-item\" onclick=\"showTab('past')\">Verleden<\/span>\n  <\/div>\n\n  <div id=\"aankomende-concerten\" class=\"concerten-lijst active\"><\/div>\n  <div id=\"verleden-concerten\" class=\"concerten-lijst\"><\/div>\n\n<\/div>\n\n<style>\n#concerten-wrapper {\n  max-width: 760px;\n  margin: 0 auto;\n  padding: 0 20px;\n  font-family: inherit;\n  color: inherit;\n}\n\n\n\/* NAV *\/\n.concerten-nav {\n  display: flex;\n  gap: 18px;\n  margin: 40px 0 25px;\n  font-size: 0.85em;\n  letter-spacing: 0.04em;\n}\n\n.nav-item {\n  cursor: pointer;\n  opacity: 0.4;\n  transition: all 0.3s ease;\n}\n\n.nav-item.active {\n  opacity: 1;\n}\n\n.nav-item:hover {\n  opacity: 0.7;\n}\n\n\/* LIJST *\/\n.concerten-lijst {\n  display: none;\n}\n\n.concerten-lijst.active {\n  display: block;\n}\n\n\/* CONCERT *\/\n.concert {\n  display: flex;\n  justify-content: space-between;\n  align-items: flex-start;\n  padding: 12px 0;\n  border-bottom: 1px solid rgba(0,0,0,0.06);\n  transition: transform 0.2s ease;\n}\n\n.concert {\n  transition: transform 0.2s ease;\n}\n\n.concert:hover {\n  transform: translateY(-2px);\n}\n\n\/* LINKS *\/\n.concert-info {\n  max-width: 75%;\n}\n\n\/* TYPO *\/\n.concert-datum {\n  font-size: 0.8em;\n  opacity: 0.5;\n  margin-bottom: 4px;\n}\n\n.concert-locatie {\n  font-size: 1em;\n  margin-bottom: 4px;\n}\n\n.concert-omschrijving {\n  font-size: 0.9em;\n  opacity: 0.6;\n  margin: 0;\n}\n\n\/* BUTTON *\/\n.ticket-btn {\n  font-size: 0.65em;\n  text-decoration: none;\n  border: 1px solid rgba(0,0,0,0.6);\n  padding: 4px 10px;\n  border-radius: 999px;\n  line-height: 1;\n  white-space: nowrap;\n  margin-left: 20px;\n  margin-top: 2px;\n  opacity: 0.7;\n  transition: all 0.25s ease;\n}\n\n.ticket-btn:hover {\n  background: black;\n  color: white;\n  opacity: 1;\n}\n\n\/* INFO variant subtieler *\/\n.info-btn {\n  border-color: rgba(0,0,0,0.4);\n  opacity: 0.6;\n}\n\n\/* FADE *\/\n.fade-item {\n  opacity: 0;\n  transform: translateY(10px);\n  transition: all 0.6s ease;\n}\n\n.fade-item.visible {\n  opacity: 1;\n  transform: translateY(0);\n}\n\n\/* MOBILE *\/\n@media (max-width: 768px) {\n  .concert {\n    flex-direction: column;\n    gap: 6px;\n  }\n\n  .concert-info {\n    max-width: 100%;\n  }\n\n  .ticket-btn {\n    margin-left: 0;\n    margin-top: 8px;\n  }\n}\n<\/style>\n\n<script>\nconst sheetURL = \"https:\/\/opensheet.elk.sh\/167y8lsBvUVmF_XVrxmgOVShUU2XVKtCrDFplL4hdfgU\/Sheet1\";\n\n\/* DATE *\/\nfunction parseDate(d, t) {\n  if (!d) return null;\n\n  const [day, month, yearRaw] = d.split(\"\/\");\n  let year = yearRaw.length === 2 ? \"20\" + yearRaw : yearRaw;\n\n  const [h = 0, m = 0] = (t || \"\").split(\":\");\n\n  return new Date(year, month - 1, day, h, m);\n}\n\nfunction formatDateTime(d, t) {\n  const [day, month] = d.split(\"\/\");\n  return t ? `${day}\/${month} \u2022 ${t}` : `${day}\/${month}`;\n}\n\n\/* HTML *\/\nfunction createConcertHTML(c) {\n  let buttonHTML = \"\";\n\n  if (c.Ticketlink) {\n    buttonHTML = `<a href=\"${c.Ticketlink}\" target=\"_blank\" class=\"ticket-btn\">Tickets<\/a>`;\n  } else if (c.Info) {\n    buttonHTML = `<a href=\"${c.Info}\" target=\"_blank\" class=\"ticket-btn info-btn\">Info<\/a>`;\n  }\n\n  return `\n    <div class=\"concert fade-item\">\n      <div class=\"concert-info\">\n        <div class=\"concert-datum\">${formatDateTime(c.Datum, c.Tijd)}<\/div>\n        <div class=\"concert-locatie\">${c.Locatie || \"\"}<\/div>\n        <div class=\"concert-omschrijving\">${c.Omschrijving || \"\"}<\/div>\n      <\/div>\n      ${buttonHTML}\n    <\/div>\n  `;\n}\n\n\/* FETCH *\/\nfetch(sheetURL)\n  .then(res => res.json())\n  .then(data => {\n    const now = new Date();\n\n    const concerts = data\n      .map(c => ({ ...c, parsedDate: parseDate(c.Datum, c.Tijd) }))\n      .filter(c => c.parsedDate);\n\n    const upcoming = concerts\n      .filter(c => c.parsedDate >= now)\n      .sort((a, b) => a.parsedDate - b.parsedDate);\n\n    const past = concerts\n      .filter(c => c.parsedDate < now)\n      .sort((a, b) => b.parsedDate - a.parsedDate)\n      .slice(0, 20);\n\n    document.getElementById(\"aankomende-concerten\").innerHTML =\n      upcoming.length\n        ? upcoming.map(createConcertHTML).join(\"\")\n        : `<p>Momenteel geen aankomende concerten.<\/p>`;\n\n    document.getElementById(\"verleden-concerten\").innerHTML =\n      past.length\n        ? past.map(createConcertHTML).join(\"\")\n        : `<p>Geen eerdere concerten.<\/p>`;\n\n    initFadeIn();\n  });\n\n\/* TABS *\/\nfunction showTab(tab) {\n  document.querySelectorAll(\".concerten-lijst\").forEach(el => el.classList.remove(\"active\"));\n  document.querySelectorAll(\".nav-item\").forEach(el => el.classList.remove(\"active\"));\n\n  if (tab === \"upcoming\") {\n    document.getElementById(\"aankomende-concerten\").classList.add(\"active\");\n    document.querySelectorAll(\".nav-item\")[0].classList.add(\"active\");\n  } else {\n    document.getElementById(\"verleden-concerten\").classList.add(\"active\");\n    document.querySelectorAll(\".nav-item\")[1].classList.add(\"active\");\n  }\n\n  setTimeout(initFadeIn, 100);\n}\n\n\/* FADE *\/\nfunction initFadeIn() {\n  const items = document.querySelectorAll(\".fade-item\");\n\n  const observer = new IntersectionObserver(entries => {\n    entries.forEach(entry => {\n      if (entry.isIntersecting) {\n        entry.target.classList.add(\"visible\");\n      }\n    });\n  }, { threshold: 0.1 });\n\n  items.forEach(item => observer.observe(item));\n}\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-36e66c5 e-con-full elementor-hidden-tablet elementor-hidden-mobile e-flex e-con e-child\" data-id=\"36e66c5\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-9f9fb85 elementor-widget elementor-widget-image\" data-id=\"9f9fb85\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img fetchpriority=\"high\" decoding=\"async\" width=\"950\" height=\"677\" src=\"https:\/\/sannebakkerharp.nl\/wp-content\/uploads\/2022\/08\/Eindexamen-Sanne-3-1024x730.jpg\" class=\"attachment-large size-large wp-image-14\" alt=\"\" srcset=\"https:\/\/sannebakkerharp.nl\/wp-content\/uploads\/2022\/08\/Eindexamen-Sanne-3-1024x730.jpg 1024w, https:\/\/sannebakkerharp.nl\/wp-content\/uploads\/2022\/08\/Eindexamen-Sanne-3-300x214.jpg 300w, https:\/\/sannebakkerharp.nl\/wp-content\/uploads\/2022\/08\/Eindexamen-Sanne-3-768x548.jpg 768w, https:\/\/sannebakkerharp.nl\/wp-content\/uploads\/2022\/08\/Eindexamen-Sanne-3-1536x1095.jpg 1536w, https:\/\/sannebakkerharp.nl\/wp-content\/uploads\/2022\/08\/Eindexamen-Sanne-3-2048x1460.jpg 2048w, https:\/\/sannebakkerharp.nl\/wp-content\/uploads\/2022\/08\/Eindexamen-Sanne-3-1568x1118.jpg 1568w\" sizes=\"100vw\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-9828c25 e-flex e-con-boxed e-con e-parent\" data-id=\"9828c25\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-c496a87 elementor-widget elementor-widget-spacer\" data-id=\"c496a87\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/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>AGENDA Upcoming Verleden<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"inspiro_hide_title":false,"inspiro_hide_featured_image":false,"footnotes":""},"class_list":["post-77","page","type-page","status-publish","hentry"],"featured_media_urls":[],"_links":{"self":[{"href":"https:\/\/sannebakkerharp.nl\/en\/wp-json\/wp\/v2\/pages\/77","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sannebakkerharp.nl\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/sannebakkerharp.nl\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/sannebakkerharp.nl\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/sannebakkerharp.nl\/en\/wp-json\/wp\/v2\/comments?post=77"}],"version-history":[{"count":88,"href":"https:\/\/sannebakkerharp.nl\/en\/wp-json\/wp\/v2\/pages\/77\/revisions"}],"predecessor-version":[{"id":600,"href":"https:\/\/sannebakkerharp.nl\/en\/wp-json\/wp\/v2\/pages\/77\/revisions\/600"}],"wp:attachment":[{"href":"https:\/\/sannebakkerharp.nl\/en\/wp-json\/wp\/v2\/media?parent=77"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}