{"id":898,"date":"2024-02-04T23:26:16","date_gmt":"2024-02-04T23:26:16","guid":{"rendered":"https:\/\/samenslotervaart.nl\/WP\/?p=898"},"modified":"2024-03-06T11:09:14","modified_gmt":"2024-03-06T11:09:14","slug":"agenda","status":"publish","type":"post","link":"https:\/\/samenslotervaart.nl\/index.php\/2024\/02\/04\/agenda\/","title":{"rendered":"[2024] Overzicht activiteiten"},"content":{"rendered":"<div class=\"wpb-content-wrapper\"><p>[vc_row][vc_column column_width_percent=&#8221;100&#8243; gutter_size=&#8221;3&#8243; style=&#8221;light&#8221; overlay_alpha=&#8221;50&#8243; shift_x=&#8221;0&#8243; shift_y=&#8221;0&#8243; shift_y_down=&#8221;0&#8243; z_index=&#8221;0&#8243; medium_width=&#8221;0&#8243; mobile_width=&#8221;0&#8243; width=&#8221;1\/1&#8243; uncode_shortcode_id=&#8221;159426&#8243;][vc_column_text uncode_shortcode_id=&#8221;119426&#8243;]<\/p>\n<pre>    <script>\n            document.addEventListener('DOMContentLoaded', function() {\n                var calendarEl = document.getElementById('calendar');\n                var calendar = new FullCalendar.Calendar(calendarEl, {\n                    initialView: \"dayGridMonth\",\n                    editable: false,\n                    events: [{\"title\":\"[Elke woensdag] Een schone buurt!\",\"start\":\"2026-06-12T22:13:35\",\"end\":\"2026-06-12T23:13:35\",\"details\":\"[vc_row row_height_percent=&#8221;0&#8243; override_padding=&#8221;yes&#8221; h_padding=&#8221;3&#8243; top_padding=&#8221;3&#8243; bottom_padding=&#8221;2&#8243; overlay_alpha=&#8221;50&#8243; gutter_size=&#8221;3&#8243; column_width_percent=&#8221;100&#8243; shift_y=&#8221;0&#8243; z_index=&#8221;0&#8243; uncode_shortcode_id=&#8221;153023&#8243;][vc_column width=&#8221;1\\\/1&#8243;][vc_custom_heading uncode_shortcode_id=&#8221;204813&#8243;][Elke woensdag] Een schone buurt![\\\/vc_custom_heading][vc_separator sep_color=&#8221;,Default&#8221;][vc_row_inner][vc_column_inner width=&#8221;1\\\/2&#8243;][vc_column_text...\",\"permalink\":\"https:\\\/\\\/samenslotervaart.nl\\\/index.php\\\/2024\\\/03\\\/04\\\/elke-woensdag-een-schone-buurt\\\/\",\"postType\":\"Bericht\",\"postId\":980},{\"title\":\"[Wanneer je wilt..] Meedenken en helpen?\",\"start\":\"2024-04-20T20:00:00\",\"end\":\"2024-04-20T20:30:00\",\"details\":\"[vc_row][vc_column column_width_percent=&#8221;100&#8243; gutter_size=&#8221;3&#8243; override_padding=&#8221;yes&#8221; column_padding=&#8221;3&#8243; overlay_alpha=&#8221;50&#8243; shift_x=&#8221;0&#8243; shift_y=&#8221;0&#8243; shift_y_down=&#8221;0&#8243; z_index=&#8221;0&#8243; medium_width=&#8221;0&#8243; mobile_width=&#8221;0&#8243; width=&#8221;1\\\/1&#8243; uncode_shortcode_id=&#8221;307874&#8243;][vc_custom_heading uncode_shortcode_id=&#8221;145323&#8243;][Wanneer je wilt..] Meedenken en helpen?[\\\/vc_custom_heading][vc_separator...\",\"permalink\":\"https:\\\/\\\/samenslotervaart.nl\\\/index.php\\\/2024\\\/03\\\/04\\\/meedenken-en-helpen\\\/\",\"postType\":\"Bericht\",\"postId\":892,\"allDay\":\"1\"},{\"title\":\"[2024] Overzicht activiteiten\",\"start\":\"2026-06-12T22:13:35\",\"end\":\"2026-06-12T23:13:35\",\"details\":\"[vc_row][vc_column column_width_percent=&#8221;100&#8243; gutter_size=&#8221;3&#8243; style=&#8221;light&#8221; overlay_alpha=&#8221;50&#8243; shift_x=&#8221;0&#8243; shift_y=&#8221;0&#8243; shift_y_down=&#8221;0&#8243; z_index=&#8221;0&#8243; medium_width=&#8221;0&#8243; mobile_width=&#8221;0&#8243; width=&#8221;1\\\/1&#8243; uncode_shortcode_id=&#8221;159426&#8243;][vc_column_text uncode_shortcode_id=&#8221;119426&#8243;] [\\\/vc_column_text][\\\/vc_column][\\\/vc_row]\",\"permalink\":\"https:\\\/\\\/samenslotervaart.nl\\\/index.php\\\/2024\\\/02\\\/04\\\/agenda\\\/\",\"postType\":\"Bericht\",\"postId\":898},{\"title\":\"[6 jul] Open podium buurtfeest\",\"start\":\"2024-07-06T10:00:00\",\"end\":\"2024-07-06T23:00:00\",\"details\":\"[vc_row row_height_percent=&#8221;0&#8243; override_padding=&#8221;yes&#8221; h_padding=&#8221;3&#8243; top_padding=&#8221;3&#8243; bottom_padding=&#8221;2&#8243; overlay_alpha=&#8221;50&#8243; gutter_size=&#8221;3&#8243; column_width_percent=&#8221;100&#8243; shift_y=&#8221;0&#8243; z_index=&#8221;0&#8243; uncode_shortcode_id=&#8221;176820&#8243;][vc_column width=&#8221;1\\\/1&#8243;][vc_custom_heading uncode_shortcode_id=&#8221;168448&#8243;] [6 jul] Open podium buurtfeest [\\\/vc_custom_heading][vc_separator...\",\"permalink\":\"https:\\\/\\\/samenslotervaart.nl\\\/index.php\\\/2024\\\/03\\\/06\\\/6-jul-open-podium-buurtfeest\\\/\",\"postType\":\"Bericht\",\"postId\":970,\"allDay\":\"1\"},{\"title\":\"[22 mei] Creatieve workshop Kunst\",\"start\":\"2024-05-22T15:00:00\",\"end\":\"2024-05-22T17:00:00\",\"details\":\"[vc_row row_height_percent=&#8221;0&#8243; override_padding=&#8221;yes&#8221; h_padding=&#8221;3&#8243; top_padding=&#8221;3&#8243; bottom_padding=&#8221;2&#8243; overlay_alpha=&#8221;50&#8243; gutter_size=&#8221;3&#8243; column_width_percent=&#8221;100&#8243; shift_y=&#8221;0&#8243; z_index=&#8221;0&#8243; uncode_shortcode_id=&#8221;490961&#8243;][vc_column width=&#8221;1\\\/1&#8243;][vc_custom_heading uncode_shortcode_id=&#8221;968885&#8243;][22 mei] Creatieve workshop Kunst[\\\/vc_custom_heading][vc_separator sep_color=&#8221;,Default&#8221;][vc_row_inner][vc_column_inner width=&#8221;1\\\/2&#8243;][vc_column_text...\",\"permalink\":\"https:\\\/\\\/samenslotervaart.nl\\\/index.php\\\/2024\\\/03\\\/06\\\/22-mei-creatieve-workshop-kunst\\\/\",\"postType\":\"Bericht\",\"postId\":966},{\"title\":\"[begin april] Creatieve workshop Groen\",\"start\":\"2024-04-01T17:00:00\",\"end\":\"2024-04-10T20:00:00\",\"details\":\"[vc_row][vc_column column_width_percent=&#8221;100&#8243; gutter_size=&#8221;3&#8243; override_padding=&#8221;yes&#8221; column_padding=&#8221;3&#8243; overlay_alpha=&#8221;50&#8243; shift_x=&#8221;0&#8243; shift_y=&#8221;0&#8243; shift_y_down=&#8221;0&#8243; z_index=&#8221;0&#8243; medium_width=&#8221;0&#8243; mobile_width=&#8221;0&#8243; width=&#8221;1\\\/1&#8243; uncode_shortcode_id=&#8221;178548&#8243;][vc_custom_heading uncode_shortcode_id=&#8221;380796&#8243;][begin april] Creatieve workshop Groen[\\\/vc_custom_heading][vc_separator sep_color=&#8221;,Default&#8221;][vc_row_inner][vc_column_inner...\",\"permalink\":\"https:\\\/\\\/samenslotervaart.nl\\\/index.php\\\/2024\\\/02\\\/26\\\/weer-n-test\\\/\",\"postType\":\"Bericht\",\"postId\":617},{\"title\":\"[20 apr] Creatieve workshop Groen\",\"start\":\"2024-04-20T14:00:00\",\"end\":\"2024-04-20T18:00:00\",\"details\":\"[vc_row row_height_percent=&#8221;0&#8243; override_padding=&#8221;yes&#8221; h_padding=&#8221;3&#8243; top_padding=&#8221;3&#8243; bottom_padding=&#8221;2&#8243; overlay_alpha=&#8221;50&#8243; gutter_size=&#8221;3&#8243; column_width_percent=&#8221;100&#8243; shift_y=&#8221;0&#8243; z_index=&#8221;0&#8243; uncode_shortcode_id=&#8221;383189&#8243;][vc_column width=&#8221;1\\\/1&#8243;][vc_custom_heading uncode_shortcode_id=&#8221;134874&#8243;][20 apr] Creatieve workshop Groen[\\\/vc_custom_heading][vc_separator sep_color=&#8221;,Default&#8221;][vc_row_inner][vc_column_inner width=&#8221;1\\\/2&#8243;][vc_column_text...\",\"permalink\":\"https:\\\/\\\/samenslotervaart.nl\\\/index.php\\\/2024\\\/02\\\/26\\\/joehoe\\\/\",\"postType\":\"Bericht\",\"postId\":603}],\n                    direction: \"ltr\",\n                    contentHeight: \"auto\",\n                    locale: \"nl-NL\",\n                    eventTimeFormat: {\"hour\":\"2-digit\",\"minute\":\"2-digit\"},\n                    eventClick: function( info ) {\n                        Alpine.store(\"calendarEngine\").eventTitle = info.event._def.title;\n                        Alpine.store(\"calendarEngine\").eventStart = info.event.start;\n                        Alpine.store(\"calendarEngine\").eventEnd = info.event.end;\n                        Alpine.store(\"calendarEngine\").eventDetails = info.event._def.extendedProps.details;\n                        Alpine.store(\"calendarEngine\").eventUrl = info.event._def.extendedProps.permalink;\n                        Alpine.store(\"calendarEngine\").eventAllDay = info.event.allDay;\n                        Alpine.store(\"calendarEngine\").eventType = info.event._def.extendedProps.postType;\n                        Alpine.store('calendarEngine').showPopover = true;\n                        Alpine.store('calendarEngine').eventActualEnd = info.event._def.extendedProps.actualEnd;\n\n                        \n                        if( info.jsEvent.type == \"keydown\" ) {\n                            setTimeout( () => {\n                                document.querySelector('.piecal-popover__inner > button').focus();\n                            }, 100);\n                        }\n                    },\n                    eventDataTransform: function(event) {  \n                        \/\/ Safely decode encoded HTML entities for output as titles\n                        let scrubber = document.createElement('textarea');\n                        scrubber.innerHTML = event.title;\n                        event.title = scrubber.value;\n\n                        if(event.allDay && event.end) {\n\n                            let eventStart = new Date(event.start);\n                            let comparableEventStart = eventStart.toLocaleDateString('en-us');\n                            let eventEnd = new Date(event.end);\n                            let comparableEventEnd = eventEnd.toLocaleDateString('en-us');\n\n                            if( comparableEventStart == comparableEventEnd ) return;\n\n                            eventEnd.setHours(23, 59, 59);\n\n                            let extendedEndDate = eventEnd.toISOString();\n\n                            extendedEndDate = extendedEndDate.substring(0, extendedEndDate.length - 5);\n\n                            event.actualEnd = event.end; \/\/ Save original event end to use in popover\n                            event.end = extendedEndDate; \/\/ Change event end to show it extending through the last day                                                                                                                                                                                                                                              \n                        }\n                        return event;  \n                    },\n                    dateClick: function( info ) {\n                        if( info.jsEvent.target.tagName != 'A' ) return;\n\n                        piecalChangeView('listDay');\n                        this.gotoDate(info.dateStr);\n                    },\n                    eventDidMount: function( info ) {\n                        let link = info.el;\n\n                        if( link.tagName == 'TR' ) {\n                            link = info.el.querySelector('a');\n                        }\n\n                        if( !link || link.tagName != \"A\" ) return;\n\n                        link.setAttribute('role', 'button');\n                        link.setAttribute('href', 'javascript:void(0)');\n                    },\n                    dayCellDidMount: function( info ) {\n                        let dayLink = info.el.querySelector('.fc-daygrid-day-top a');\n\n                        if( !dayLink ) return;\n\n                        dayLink.setAttribute('role', 'button');\n                        dayLink.setAttribute('href', 'javascript:void(0)');\n\n                        \/\/ Prevent double read out of button label\n                        let dayLinkID = dayLink.getAttribute('id');\n                        dayLink.closest('td').setAttribute('aria-labelledby', '#' + dayLinkID);\n                        \n                        setTimeout( () => {\n                            if( info.el.querySelector('.fc-daygrid-day-events .fc-daygrid-event-harness') ) {\n                                dayLink.setAttribute('aria-label', dayLink.getAttribute('aria-label') + ', has events.');\n                            }\n                        }, 100);\n\n                        dayLink.addEventListener('keydown', (event) => {\n                            if( event.key == \"Enter\" || event.key == ' ' ) {\n                                event.preventDefault();\n                                piecalChangeView('listDay');\n                                window.calendar.gotoDate(info.date);\n\n                                setTimeout( () => {\n                                    let focusTarget = document.querySelector('.fc-list-day-text');\n                                    focusTarget?.setAttribute('tabindex', '0');\n                                    focusTarget?.focus();\n                                }, 100);\n                            }\n                        })\n                    },\n                                    });\n                    calendar.render();\n                    window.calendar = calendar;\n            });\n\n            function piecalChangeView( view ) {\n                document.querySelector('.piecal-wrapper').setAttribute('data-view', view);\n                window.calendar.changeView(view);\n                Alpine.store('calendarEngine').calendarView = view;\n            }\n\n            function piecalSkipCalendar() {\n                let focusedCalendar = document.querySelector('.piecal-wrapper:focus-within');\n                let focusablesInCalendar = focusedCalendar.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"]');\n                let lastFocusable = focusablesInCalendar[focusablesInCalendar.length - 1];\n\n                let focusablesInDocument = document.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"]');\n                let targetFocusable = Array.prototype.indexOf.call(focusablesInDocument, lastFocusable) + 1;\n\n                focusablesInDocument[targetFocusable].focus();\n            }\n\n            document.addEventListener('alpine:init', () => {\n                Alpine.store('calendarEngine', {\n                    showPopover: false,\n                    locale: \"nl-NL\",\n                    localeDateStringFormat: {\"hour\":\"2-digit\",\"minute\":\"2-digit\"},\n                    allDayLocaleDateStringFormat: [],\n                    calendarView: \"dayGridMonth\",\n                    eventTitle: \"Loading...\",\n                    eventDetails: \"Loading...\",\n                    eventType: \"Loading...\",\n                    eventStart: \"Loading...\",\n                    eventAllDay: false,\n                    eventActualEnd: null,\n                    eventEnd: \"Loading...\",\n                    eventUrl: \"\/\",\n                    safeOutput( input ) {\n                        let scrubber = document.createElement('textarea');\n                        scrubber.innerHTML = input;\n                        return scrubber.value;\n                    }\n                })\n            })\n\n            window.addEventListener('keydown', (e) => {\n                if( e.keyCode == 27 || e.key == 'Escape' ) Alpine.store('calendarEngine').showPopover = false;\n\n            })\n        <\/script>\n        <div \n        class=\"piecal-wrapper\" \n        data-view=\"dayGridMonth\";\n        x-data\n        >\n            <div class=\"piecal-controls fc\">\n                <button\n                    class=\"piecal-controls__skip-calendar fc-button fc-button-primary\"\n                    onClick=\"piecalSkipCalendar()\">\n                        Skip Calendar                <\/button>\n                <button \n                    class=\"piecal-controls__back-to-month fc-button fc-button-primary\"\n                    aria-label=\"Back to full month view.\"\n                    onClick=\"piecalChangeView('dayGridMonth')\">\n                        Back To Full Month                    <\/button>\n                <label>\n                    Choose View                    <select x-model=\"$store.calendarEngine.calendarView\" @change=\"piecalChangeView($store.calendarEngine.calendarView)\">\n                        <option value=\"dayGridMonth\">\n                            Month - Classic                        <\/option>\n                        <option value=\"listMonth\">\n                            Month - List                        <\/option>\n                        <option value=\"timeGridWeek\">\n                            Week - Time Grid                        <\/option>\n                        <option value=\"listWeek\">\n                            Week - List                        <\/option>\n                        <option value=\"dayGridWeek\">\n                            Week - Classic                        <\/option>\n                        <option value=\"listDay\">\n                            Day                        <\/option>\n                    <\/select>\n                <\/label>\n            <\/div>\n            <div id=\"calendar\" aria-live=\"assertive\"><\/div>\n            <div \n                class=\"piecal-popover\" \n                x-show=\"$store.calendarEngine.showPopover\"\n                style=\"display: none;\">\n                    <div \n                    class=\"piecal-popover__inner\" \n                    role=\"dialog\"\n                    aria-labelledby=\"piecal-popover__title--01\"\n                    aria-describedby=\"piecal-popover__details--01\"\n                    @click.outside=\"$store.calendarEngine.showPopover = false\"\n                    x-trap.noscroll=\"$store.calendarEngine.showPopover\">\n                        <button \n                        class=\"piecal-popover__close-button\" \n                        title=\"Close event details\"\n                        @click=\"$store.calendarEngine.showPopover = false\">\n                        <\/button>\n                        <p class=\"piecal-popover__title\" id=\"piecal-popover__title--01\" x-text=\"$store.calendarEngine.safeOutput( $store.calendarEngine.eventTitle )\">Event Title<\/p>\n                        <hr>\n                        <div class=\"piecal-popover__meta\">\n                            <p>\n                            Starts                            <\/p>\n                            <p \n                            aria-labelledby=\"piecal-event-start-date\" \n                            x-text=\"!$store.calendarEngine.eventAllDay ? new Date($store.calendarEngine.eventStart).toLocaleDateString( $store.calendarEngine.locale, $store.calendarEngine.localeDateStringFormat ) : new Date($store.calendarEngine.eventStart).toLocaleDateString( $store.calendarEngine.locale, $store.calendarEngine.allDayLocaleDateStringFormat )\"><\/p>\n                            <p x-show=\"$store.calendarEngine.eventEnd\">\n                            Ends                            <\/p>\n                            <p \n                            x-show=\"$store.calendarEngine.eventEnd\" \n                            x-text=\"!$store.calendarEngine.eventAllDay ? new Date($store.calendarEngine.eventEnd).toLocaleDateString( $store.calendarEngine.locale, $store.calendarEngine.localeDateStringFormat ) : new Date($store.calendarEngine.eventActualEnd).toLocaleDateString( $store.calendarEngine.locale, $store.calendarEngine.allDayLocaleDateStringFormat )\"><\/p>\n                                                    <\/div>\n                        <hr>\n                        <p class=\"piecal-popover__details\" id=\"piecal-popover__details--01\" x-text=\"$store.calendarEngine.safeOutput( $store.calendarEngine.eventDetails )\"><\/p>\n                        <a class=\"piecal-popover__view-link\" :href=\"$store.calendarEngine.eventUrl\">\n                        View                             <span x-text=\"$store.calendarEngine.eventType\"><\/span>\n                                                    <\/a>\n                                            <\/div>\n            <\/div>\n        <\/div>\n        <div class=\"piecal-footer\">\n                    <\/div>\n        \r\n<\/pre>\n<p>[\/vc_column_text][\/vc_column][\/vc_row]<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>[vc_row][vc_column column_width_percent=&#8221;100&#8243; gutter_size=&#8221;3&#8243; style=&#8221;light&#8221; overlay_alpha=&#8221;50&#8243; shift_x=&#8221;0&#8243; shift_y=&#8221;0&#8243; shift_y_down=&#8221;0&#8243; z_index=&#8221;0&#8243; medium_width=&#8221;0&#8243; mobile_width=&#8221;0&#8243; width=&#8221;1\/1&#8243; uncode_shortcode_id=&#8221;159426&#8243;][vc_column_text uncode_shortcode_id=&#8221;119426&#8243;] [\/vc_column_text][\/vc_column][\/vc_row]<\/p>\n","protected":false},"author":1,"featured_media":884,"comment_status":"open","ping_status":"open","sticky":true,"template":"","format":"standard","meta":{"_piecal_is_event":false,"_piecal_start_date":"","_piecal_end_date":"","_piecal_is_allday":false,"footnotes":""},"categories":[1],"tags":[],"class_list":["post-898","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/samenslotervaart.nl\/index.php\/wp-json\/wp\/v2\/posts\/898","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/samenslotervaart.nl\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/samenslotervaart.nl\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/samenslotervaart.nl\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/samenslotervaart.nl\/index.php\/wp-json\/wp\/v2\/comments?post=898"}],"version-history":[{"count":9,"href":"https:\/\/samenslotervaart.nl\/index.php\/wp-json\/wp\/v2\/posts\/898\/revisions"}],"predecessor-version":[{"id":960,"href":"https:\/\/samenslotervaart.nl\/index.php\/wp-json\/wp\/v2\/posts\/898\/revisions\/960"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/samenslotervaart.nl\/index.php\/wp-json\/wp\/v2\/media\/884"}],"wp:attachment":[{"href":"https:\/\/samenslotervaart.nl\/index.php\/wp-json\/wp\/v2\/media?parent=898"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/samenslotervaart.nl\/index.php\/wp-json\/wp\/v2\/categories?post=898"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/samenslotervaart.nl\/index.php\/wp-json\/wp\/v2\/tags?post=898"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}