{"id":325,"date":"2025-04-07T15:28:36","date_gmt":"2025-04-07T15:28:36","guid":{"rendered":"https:\/\/lbtrc.edu.ly\/en\/?page_id=325"},"modified":"2025-08-03T14:21:02","modified_gmt":"2025-08-03T12:21:02","slug":"event-calender","status":"publish","type":"page","link":"https:\/\/lbtrc.edu.ly\/en\/event-calender\/","title":{"rendered":"Event Calendar"},"content":{"rendered":"<h2>Upcoming Events<\/h2>\n<ul>\n<li>\n<\/li>\n<li>\n<\/li>\n<li>\n<\/li>\n<\/ul>\n<p><p>\n        Event Details    <\/p>\n<\/p>\n<div>\n    <script>\n            let piecalAJAX = {\n            ajaxURL: \"https:\/\/lbtrc.edu.ly\/en\/jocofaq\/admin-ajax.php\",\n            ajaxNonce: \"815787d4e1\"\n            }\n\n            let alreadyExpandedOccurrences = [];\n            \n            document.addEventListener('DOMContentLoaded', function() {\n                var pieCalendarFirstLoad = true;\n                var calendarEl = document.getElementById('calendar');\n                var calendar = new FullCalendar.Calendar(calendarEl, {\n                    headerToolbar: false,\n                    initialView: \"dayGridMonth\",\n                    editable: false,\n                    events: [],\n                    direction: \"ltr\",\n                    contentHeight: \"auto\",\n                    locale: \"en-US\",\n                    eventTimeFormat: {\"hour\":\"2-digit\",\"minute\":\"2-digit\"},\n                    dayHeaderFormat: { weekday: 'long' },\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                        Alpine.store('calendarEngine').appendOffset = \"1\";\n\n                        \/\/ Always pass through event data via the URL if it's a recurring instance, or if adaptive timezones are enabled.\n                        \/\/ Do not pass through event data via the URL if it's a non-recurring instance and adaptive timezones are disabled.\n                        if( info.event._def.extendedProps.isRecurringInstance || ( !info.event._def.extendedProps.isRecurringInstance && piecalVars.useAdaptiveTimezones && Alpine.store('calendarEngine').appendOffset ) ) {\n                            \/\/ Construct the URL with parameters\n                            const baseUrl    = info.event._def.extendedProps.permalink;\n                            const eventStart = new Date( info.event.start );\n                            const eventEnd   = new Date( info.event.end );\n                            const viewerTimezone = Intl.DateTimeFormat().resolvedOptions().timeZone;\n\n\n                            const url        = new URL( baseUrl );\n                            url.searchParams.append( 'eventstart', Math.floor( eventStart.getTime() \/ 1000 ) );\n                            url.searchParams.append( 'eventend', Math.floor( eventEnd.getTime() \/ 1000 ) );\n                            url.searchParams.append( 'timezone', viewerTimezone );\n\n                            \/\/ Assign the constructed URL to the store\n                            Alpine.store(\"calendarEngine\").eventUrl = url.toString();\n                        }\n\n                            Alpine.store(\"calendarEngine\").featuredImage = info.event._def.extendedProps.featuredimage;\n    Alpine.store(\"calendarEngine\").featuredImageAlt = info.event._def.extendedProps.featuredimagealt;\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                        \/\/ Extend end date for all day events that span multiple days\n                        let { actualEnd, end } = piecalUtils.getAlldayMultidayEventEnd( event ) ?? {};\n\n                        if( actualEnd && end ) {    \n                            event.actualEnd = actualEnd;\n                            event.end = end;\n                        }\n\n                        \n                        return event;  \n                    },\n                    dateClick: function( info ) {\n                        if( info.jsEvent.target.tagName != 'A' ) return;\n\n                        this.gotoDate(info.dateStr);\n                        piecalChangeView('listDay');\n                        \n\n                                            },\n                    eventDidMount: function( info ) {\n                        let link = info.el;\n\n                        const locale = info.view.dateEnv.locale.codeArg;\n\n                        const formattedTime = new Intl.DateTimeFormat(locale, {\n                            hour: 'numeric',\n                            minute: 'numeric',\n                            hour12: true\n                        });\n\n                        const formattedDate = new Intl.DateTimeFormat(locale, {\n                            day: 'numeric',\n                            month: 'numeric',\n                            year: 'numeric'\n                        });\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                        if( info.event.allDay ) {\n                            \/* Translators: Text for all-day event description. *\/\n                            const allDayDescriptionText = 'All-day event';\n\n                            link.setAttribute('aria-label', `${allDayDescriptionText} - ${info.event.title}`);\n                        }\n\n                        \/\/ Handle multi-day event aria label to let screen readers know the event spans multiple days\n                        if( info.event.end && (info.event.end - info.event.start) > (24 * 60 * 60 * 1000) ) {\n                            \n                            const startDate = formattedDate.format(info.event.start);\n                            const startTime = info.event.allDay ? '' : formattedTime.format(info.event.start);\n\n                            const endDate = formattedDate.format(info.event.end);\n                            const endTime = info.event.allDay ? '' :formattedTime.format(info.event.end);\n\n                            \/* Translators: Text describing span of multi-day event. *\/\n                            const spanText = 'to';\n\n                            \/* Translators: Text for multi-day event description. *\/\n                            const multiDayDescriptionText = 'Multi-day event running from';\n\n                            \/* Translators: Text for multi-day all-day event description. *\/\n                            const multiDayAllDayDescriptionText = 'Multi-day, all-day event running from';\n\n                            const descriptionText = info.event.allDay ? multiDayAllDayDescriptionText : multiDayDescriptionText;\n\n                            \/* Translators: Text describing span of multi-day event. *\/\n                            link.setAttribute('aria-label', `${descriptionText} ${startDate} ${startTime} ${spanText} ${endDate} ${endTime} - ${info.event.title}`);\n                        }\n\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                        dayLink.closest('td').removeAttribute('aria-labelledby');\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                                window.calendar.gotoDate(info.date);\n                                piecalChangeView('listDay');\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                    dayHeaderContent: function( info ) {\n                        let overriddenDayHeaderViews = ['dayGridMonth', 'timeGridWeek', 'dayGridWeek'];\n\n                        if( overriddenDayHeaderViews.includes(info.view.type) ) {\n                            return '';\n                        }\n\n                        \n                        return info.text;\n                    },\n                    dayHeaderDidMount: function( info ) {\n                        let dayHeaderLink = info.el.querySelector('a');\n\n                        let fullDayName = piecalUtils.getShortenedDayNames(info.text, 'full');\n                        let shortDayName = piecalUtils.getShortenedDayNames(info.text, 'short');\n                        let singleLetterDayName = piecalUtils.getShortenedDayNames(info.text, 'single');\n\n                        let shortenableViews = ['dayGridMonth', 'timeGridWeek', 'dayGridWeek'];\n\n                        if( shortenableViews.includes(info.view.type) ) {\n                            dayHeaderLink.innerHTML = `<span class=\"piecal-grid-day-header-text piecal-grid-day-header-text--full\">${fullDayName}<\/span>\n                                                       <span class=\"piecal-grid-day-header-text piecal-grid-day-header-text--short\">${shortDayName}<\/span>\n                                                       <span class=\"piecal-grid-day-header-text piecal-grid-day-header-text--single-letter\">${singleLetterDayName}<\/span>`;\n                        }\n\n                                            },\n                    \n    datesSet: function( dateInfo ) {\n        if( pieCalendarFirstLoad ) {\n            pieCalendarFirstLoad = false;\n            return;\n        }\n\n        let rangeStart = dateInfo.startStr;\n        let rangeEnd = dateInfo.endStr;\n\n        let useExtendedRanges = true;\n        let extendedRangeWidth = 40;\n\n        if( useExtendedRanges ) {\n            let extendedRangeStart = new Date( dateInfo.startStr );\n            let extendedRangeEnd = new Date( dateInfo.endStr );\n\n            extendedRangeStart.setDate( extendedRangeStart.getDate() - extendedRangeWidth );\n            extendedRangeEnd.setDate( extendedRangeEnd.getDate() + extendedRangeWidth );\n\n            rangeStart = extendedRangeStart.toISOString();\n            rangeEnd = extendedRangeEnd.toISOString();\n        }\n        \n        \/\/ Let's narrow events down to only the recurring ones to avoid sending more JSON in our AJAX request\n        \/\/ than is necessary.\n        let recurringEvents = [];\n\n        \/\/ Let's add the original event to our alreadyExpandedOccurrences array to avoid duplication.\n        for( let event of recurringEvents ) {\n            let eventID = encodeURI(event.title.replace(' ', '').toLowerCase())+event.start+event.postId;\n\n            alreadyExpandedOccurrences = [...alreadyExpandedOccurrences, eventID];\n        }\n\n        \/\/ Now we need to submit this range to an AJAX function that does some things and returns some events\n        fetch(piecalAJAX.ajaxURL, {\n            method: 'POST',\n            headers: {\n                'Content-Type': 'application\/x-www-form-urlencoded', \/\/ Sending our data as URL encoded form data\n                'Accept': 'application\/json', \/\/ We expect JSON in return\n            },\n            body: new URLSearchParams({ \/\/ This is a way to easily convert our data into URL encoded form data\n                'action': 'piecal_expand_occurrences_in_view',\n                'nonce': piecalAJAX.ajaxNonce,\n                'rangeStart': rangeStart,\n                'rangeEnd': rangeEnd,\n                'appendOffset': true,\n                'events': JSON.stringify( recurringEvents )\n            })\n        })\n        .then(response => response.json()) \/\/ Parsing the returned JSON\n        .then(data => {\n            if (data.success) {\n                occurrencesInRange = data.events;\n\n                for( let occurrence of data.events ) {\n                    let occurrenceID = encodeURI(occurrence.title.replace(' ', '').toLowerCase())+occurrence.start+occurrence.postId;\n\n                    if( !alreadyExpandedOccurrences.includes( occurrenceID ) ) {\n                        let scrubber = document.createElement('textarea');\n                        scrubber.innerHTML = occurrence.title;\n                        occurrence.title = scrubber.value;\n\n                        if(occurrence.allDay && occurrence.end) {\n                            \/\/ Extend end date for all day events that span multiple days\n                            let { actualEnd, end } = piecalUtils.getAlldayMultidayEventEnd( occurrence ) ?? {};\n\n                            if( actualEnd && end ) {    \n                                occurrence.actualEnd = actualEnd;\n                                occurrence.end = end;\n                            }\n                        }\n                        \n                        this.addEvent( occurrence );\n                        alreadyExpandedOccurrences = [...alreadyExpandedOccurrences, occurrenceID];\n                    } else {\n                        continue;\n                    }\n                }\n            } else {\n                console.error('Recurring occurrences were not expanded due to an AJAX error.');\n            }\n        })\n        .catch(error => {\n            console.error('Error:', error);\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                Alpine.store('calendarEngine').viewTitle = window.calendar.currentData.viewTitle;\n                Alpine.store('calendarEngine').viewSpec = window.calendar.currentData.viewSpec.buttonTextDefault;\n            }\n\n            function piecalGotoToday() {\n                console.log('today');\n            }\n\n            function piecalNextInView() {\n                window.calendar.next();\n            }\n\n            function piecalPreviousInView() {\n                console.log('prev');\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                    viewTitle: \"Loading\",\n                    viewSpec: \"Loading\",\n                    buttonText: {},\n                    showPopover: false,\n                    locale: \"en-US\",\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('DOMContentLoaded', () => {\n                Alpine.store('calendarEngine').viewTitle = window.calendar.currentData.viewTitle;\n                Alpine.store('calendarEngine').viewSpec = window.calendar.currentData.viewSpec.buttonTextDefault;\n                Alpine.store('calendarEngine').buttonText = window.calendar.currentData.localeDefaults.buttonText;\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                <div\n                class=\"piecal-controls__view-title\" \n                aria-live=\"polite\"\n                role=\"status\"\n                >\n                  <span class=\"visually-hidden\" x-text=\"$store.calendarEngine.viewTitle + ' - current view is ' + $store.calendarEngine.calendarView\"><\/span>\n                  <span aria-hidden=\"true\" x-text=\"$store.calendarEngine.viewTitle\"><\/span>\n                <\/div>\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 class=\"piecal-controls__view-chooser\">\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 class=\"piecal-controls__navigation-button-group\">\n                    <button \n                    class=\"fc-button fc-button-primary piecal-controls__today-button\"\n                    @click=\"window.calendar.today(); $store.calendarEngine.viewTitle = window.calendar.currentData.viewTitle\"\n                    x-text=\"$store.calendarEngine.buttonText.today ?? 'Today'\">\n                    <\/button>\n                    <button \n                    class=\"fc-button fc-button-primary piecal-controls__prev-button\"\n                    @click=\"window.calendar.prev(); $store.calendarEngine.viewTitle = window.calendar.currentData.viewTitle\"\n                    :aria-label=\"$store.calendarEngine.buttonText.prev + ' ' + $store.calendarEngine.viewSpec\"><<\/button>\n                    <button \n                    class=\"fc-button fc-button-primary piecal-controls__next-button\"\n                    @click=\"window.calendar.next(); $store.calendarEngine.viewTitle = window.calendar.currentData.viewTitle\" \n                    :aria-label=\"$store.calendarEngine.buttonText.next + ' ' + $store.calendarEngine.viewSpec\">><\/button>\n                <\/div>\n            <\/div>\n            <div id=\"calendar\"><\/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>                                                                        <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            Event times are listed in your local time zone: <span x-data x-text='Intl.DateTimeFormat().resolvedOptions().timeZone'><\/span>        <\/div>\n        <\/div>\n<p><!--more--><br \/>\n<!-- {\"type\":\"layout\",\"children\":[{\"type\":\"section\",\"props\":{\"image_position\":\"center-center\",\"padding_remove_bottom\":true,\"style\":\"muted\",\"title_breakpoint\":\"xl\",\"title_position\":\"top-left\",\"title_rotation\":\"left\",\"vertical_align\":\"middle\",\"width\":\"default\"},\"children\":[{\"type\":\"row\",\"children\":[{\"type\":\"column\",\"props\":{\"image_position\":\"center-center\",\"position_sticky_breakpoint\":\"m\"},\"children\":[{\"type\":\"headline\",\"props\":{\"content\":\"Upcoming Events\",\"title_decoration\":\"bullet\",\"title_element\":\"h2\"}}]}]}],\"name\":\"head next ev\"},{\"type\":\"section\",\"props\":{\"css\":\"\\n\\n\\n\",\"image_position\":\"center-center\",\"padding\":\"small\",\"style\":\"muted\",\"title_breakpoint\":\"xl\",\"title_position\":\"top-left\",\"title_rotation\":\"left\",\"vertical_align\":\"middle\",\"width\":\"default\"},\"children\":[{\"type\":\"row\",\"children\":[{\"type\":\"column\",\"props\":{\"image_position\":\"center-center\",\"position_sticky_breakpoint\":\"m\",\"width_medium\":\"1-3\"},\"children\":[{\"type\":\"image\",\"props\":{\"css\":\".el-image{\\n    border-radius:20px;\\n}\",\"height_expand\":true,\"image_border\":\"rounded\",\"image_svg_color\":\"emphasis\",\"margin\":\"default\"},\"source\":{\"props\":{\"image\":{\"filters\":{\"search\":\"\"},\"name\":\"featuredImage.url\"},\"link\":{\"filters\":{\"search\":\"\"},\"name\":\"link\"}},\"query\":{\"name\":\"#parent\"}}}]},{\"type\":\"column\",\"props\":{\"image_position\":\"center-center\",\"position_sticky_breakpoint\":\"m\",\"style\":\"card-default\",\"width_medium\":\"2-3\"},\"children\":[{\"type\":\"headline\",\"props\":{\"margin\":\"medium\",\"title_decoration\":\"bullet\",\"title_element\":\"h3\",\"title_style\":\"h2\"},\"source\":{\"props\":{\"content\":{\"filters\":{\"search\":\"\"},\"name\":\"title\"}},\"query\":{\"name\":\"#parent\"}}},{\"type\":\"grid\",\"props\":{\"content_column_breakpoint\":\"m\",\"filter_align\":\"left\",\"filter_all\":true,\"filter_grid_breakpoint\":\"m\",\"filter_grid_width\":\"auto\",\"filter_position\":\"top\",\"filter_style\":\"tab\",\"grid_default\":\"1\",\"grid_divider\":true,\"grid_medium\":\"3\",\"grid_small\":\"3\",\"icon_width\":\"40\",\"image_align\":\"top\",\"image_grid_breakpoint\":\"m\",\"image_grid_column_gap\":\"medium\",\"image_grid_row_gap\":\"medium\",\"image_grid_width\":\"auto\",\"image_svg_color\":\"emphasis\",\"image_vertical_align\":true,\"item_animation\":true,\"lightbox_bg_close\":true,\"link_style\":\"default\",\"link_text\":\"Read more\",\"margin\":\"default\",\"meta_align\":\"below-title\",\"meta_element\":\"div\",\"meta_margin\":\"small\",\"meta_style\":\"\",\"show_content\":true,\"show_hover_image\":true,\"show_hover_video\":true,\"show_image\":true,\"show_link\":true,\"show_meta\":true,\"show_title\":true,\"show_video\":true,\"text_align\":\"center\",\"title_align\":\"top\",\"title_element\":\"div\",\"title_grid_breakpoint\":\"m\",\"title_grid_width\":\"1-2\",\"title_hover_style\":\"reset\"},\"children\":[{\"type\":\"grid_item\",\"props\":{\"icon\":\"calendar\"},\"source\":{\"query\":{\"name\":\"#parent\"}},\"source_extended\":{\"props\":{\"title\":{\"query\":{\"name\":\"#node\"},\"filters\":{\"date\":\"j M, Y\",\"before\":\"from: \"},\"name\":\"field.event_start_date\"},\"meta\":{\"query\":{\"name\":\"#node\"},\"filters\":{\"date\":\"j M, Y\",\"before\":\"to: \"},\"name\":\"field.event_end_date\"}}}},{\"type\":\"grid_item\",\"props\":{\"icon\":\"clock\"},\"source\":{\"query\":{\"name\":\"#parent\"}},\"source_extended\":{\"props\":{\"title\":{\"query\":{\"name\":\"#node\"},\"filters\":{\"date\":\"g:i a\",\"before\":\"from: \"},\"name\":\"field.event_start_time\"},\"meta\":{\"query\":{\"name\":\"#node\"},\"filters\":{\"date\":\"g:i a\",\"before\":\"to: \"},\"name\":\"field.event_end_time\"}}}},{\"type\":\"grid_item\",\"props\":{\"icon\":\"location\"},\"source\":{\"props\":{\"title\":{\"filters\":{\"search\":\"\"},\"name\":\"field.event_location\"}},\"query\":{\"name\":\"#parent\"}}}]},{\"type\":\"button\",\"props\":{\"grid_column_gap\":\"small\",\"grid_row_gap\":\"small\",\"margin\":\"medium\",\"text_align\":\"right\",\"text_align_breakpoint\":\"m\",\"text_align_fallback\":\"center\"},\"children\":[{\"type\":\"button_item\",\"props\":{\"button_style\":\"secondary\",\"content\":\"Event Details\",\"dialog_layout\":\"modal\",\"dialog_offcanvas_flip\":true,\"icon_align\":\"left\"},\"source\":{\"props\":{\"link\":{\"filters\":{\"search\":\"\"},\"name\":\"link\"}},\"query\":{\"name\":\"#parent\"}}}]}]}],\"props\":{\"column_gap\":\"small\",\"layout\":\"1-3,2-3\",\"row_gap\":\"small\"}}],\"source\":{\"query\":{\"name\":\"events.events\",\"arguments\":{\"pagination\":false,\"show_if_empty\":false,\"post_status\":\"publish\",\"offset\":0,\"limit\":10,\"order\":\"date\",\"order_direction\":\"DESC\",\"meta_query_compare_value\":\"today\",\"meta_query_rule\":\">\",\"meta_query_field\":\"event_end_date\"}}},\"name\":\"sec events next\"},{\"type\":\"section\",\"props\":{\"image_position\":\"center-center\",\"style\":\"default\",\"title_breakpoint\":\"xl\",\"title_position\":\"top-left\",\"title_rotation\":\"left\",\"vertical_align\":\"middle\",\"width\":\"default\"},\"children\":[{\"type\":\"row\",\"children\":[{\"type\":\"column\",\"props\":{\"image_position\":\"center-center\",\"position_sticky_breakpoint\":\"m\"},\"children\":[{\"type\":\"html\",\"props\":{\"content\":\"[piecal type=\\\"event\\\"]\",\"css\":\".piecal-controls__navigation-button-group{\\n    margin-right:auto;\\n    margin-left:unset;\\n}\\n.piecal-controls .piecal-controls__today-button{\\n    margin-left:8px;\\n}\\n.piecal-controls .piecal-controls__prev-button {\\n    border-top-left-radius: 0;\\n    border-bottom-left-radius: 0;\\n        border-top-right-radius: .25em;\\n    border-bottom-right-radius:.25em;\\n}\\n.piecal-controls .piecal-controls__next-button {\\n    border-top-right-radius: 0;\\n    border-bottom-right-radius: 0;\\n     border-top-left-radius: .25em;\\n    border-bottom-left-radius: .25em;\\n}\\n@media(max-width: 639px){\\n    .fc-header-toolbar{\\n        justify-content: space-between;\\n        flex-direction: column;\\n        gap: 10px;\\n    } \\n    .piecal-controls{\\n    \\tjustify-content: center;\\n        text-align: center;\\n    }\\n}\\n.piecal-wrapper .fc .fc-day-today.fc-daygrid-day {\\n    background-color: #f5d25459;\\n}\\n.piecal-wrapper .fc .fc-h-event {\\n    background-color: #F5D254;\\n    border-color: #F5D254;\\n}\\n.fc-event-title-container,.fc-event-time{color:#14153F;}\\n.piecal-wrapper .fc .fc-button {\\n    background-color: #14153F;\\n    border-color: #14153F;\\n    color: #fff;\\n}\\n.piecal-wrapper .fc .fc-button:not(:disabled):hover {color: #14153F;background-color:#F5D254;border-color:#F5D254;}\\n\\n@media only screen and (max-width: 768px) {\\n    .piecal-controls .piecal-controls__today-button {\\n        flex-grow: 1;\\n        max-width: 100%;\\n    }\\n}\\n:focus-visible {\\n    outline: 0px !important;\\n}\\n@media only screen and (max-width: 768px) {\\n    .piecal-controls__view-chooser {\\n        display: flex;\\n        align-items: center;\\n        justify-content: center;\\n        width: 100% !important;\\n        max-width: 100% !important;\\n    }\\n}\\n\\n.piecal-controls select, .uk-input, .uk-select:not([multiple]):not([size]) {\\n    height: 40px;\\n    vertical-align: middle;\\n    display: inline-block;\\n    margin-top: 10px;\\n}\\n.piecal-controls select {\\n    max-width: 100%;\\n    width: 100%;\\n    padding: 0 10px;\\n    background: #fff;\\n    color: #14153f;\\n    transition: .2s ease-in-out;\\n    transition-property: color, background-color, border-color, box-shadow;\\n    border-radius: 20px;\\n    font-family: Alexandria;\\n}\\n.piecal-controls select, .uk-select:not([multiple]):not([size]) {\\n    -webkit-appearance: none;\\n    -moz-appearance: none;\\n    padding-left: 20px;\\n    background-image: url(data:image\\\/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2224%22%20height%3D%2216%22%20viewBox%3D%220%200%2024%2016%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Cpolygon%20fill%3D%22%2314153F%22%20points%3D%2212%201%209%206%2015%206%22%20%2F%3E%0A%20%20%20%20%3Cpolygon%20fill%3D%22%2314153F%22%20points%3D%2212%2013%209%208%2015%208%22%20%2F%3E%0A%3C%2Fsvg%3E%0A);\\n    background-repeat: no-repeat;\\n    background-position: 0% 50%;\\n}\\n\\n.piecal-popover__meta {\\n    grid-template-columns: 30% 70% !important;\\n}\\n.piecal-popover__close-button {\\n    right: 100%;\\n    left: unset;\\n    background: #ffea00;\\n}\"}},{\"type\":\"page_assets\",\"children\":[{\"type\":\"page_assets_item\",\"props\":{\"inline_script\":\"document.addEventListener('DOMContentLoaded', function() {\\n    function changeText() {\\n        var element = document.querySelector('.fc-list-empty-cushion.darklup--observed');\\n        \\n        if (element && element.textContent.includes(\\\"\\u0623\\u064a \\u0623\\u062d\\u062f\\u0627\\u062b \\u0644\\u0639\\u0631\\u0636\\\")) {\\n            element.textContent = \\\"\\u0644\\u0627 \\u062a\\u0648\\u062c\\u062f \\u0623\\u062d\\u062f\\u0627\\u062b \\u0644\\u0639\\u0631\\u0636\\u0647\\u0627\\\";\\n        }\\n    }\\n\\n    changeText();\\n\\n    const observer = new MutationObserver(function(mutationsList) {\\n        mutationsList.forEach(function(mutation) {\\n            changeText();\\n        });\\n    });\\n\\n    observer.observe(document.body, { childList: true, subtree: true });\\n\\n});\\n\",\"style_location\":\"echo\",\"type\":\"inline_script\"}}]}]}]}]}],\"version\":\"4.5.24\",\"yooessentialsVersion\":\"2.4.3\"} --><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Upcoming Events Event Details<\/p>\n","protected":false},"author":1,"featured_media":14,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"_piecal_is_recurring":false,"_piecal_recurring_interval":1,"_piecal_recurring_frequency":"","_piecal_recurring_exact_position":false,"_piecal_recurring_end":"","_piecal_color":"","_piecal_text_color":"","_piecal_global_color_master":false,"_piecal_rsets":"[]","_piecal_is_event":false,"_piecal_start_date":"","_piecal_end_date":"","_piecal_is_allday":false,"footnotes":""},"class_list":["post-325","page","type-page","status-publish","has-post-thumbnail","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/lbtrc.edu.ly\/en\/wp-json\/wp\/v2\/pages\/325","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/lbtrc.edu.ly\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/lbtrc.edu.ly\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/lbtrc.edu.ly\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/lbtrc.edu.ly\/en\/wp-json\/wp\/v2\/comments?post=325"}],"version-history":[{"count":1,"href":"https:\/\/lbtrc.edu.ly\/en\/wp-json\/wp\/v2\/pages\/325\/revisions"}],"predecessor-version":[{"id":1451,"href":"https:\/\/lbtrc.edu.ly\/en\/wp-json\/wp\/v2\/pages\/325\/revisions\/1451"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/lbtrc.edu.ly\/en\/wp-json\/wp\/v2\/media\/14"}],"wp:attachment":[{"href":"https:\/\/lbtrc.edu.ly\/en\/wp-json\/wp\/v2\/media?parent=325"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}