{"id":51358,"date":"2024-07-25T13:46:08","date_gmt":"2024-07-25T18:46:08","guid":{"rendered":"https:\/\/www.tarleton.edu\/news\/?page_id=51358"},"modified":"2024-10-23T14:29:22","modified_gmt":"2024-10-23T19:29:22","slug":"upcoming-events","status":"publish","type":"page","link":"https:\/\/www.tarleton.edu\/news\/upcoming-events\/","title":{"rendered":"Upcoming Events"},"content":{"rendered":"\n<div class=\"section-title-area\"><h2 class=\"section-title\">Upcoming Events<\/h2><\/div>\n\n\n<script src=\"https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/3.7.1\/jquery.min.js\"><\/script>\r\n<div class=\"carousel-container\" role=\"region\" aria-label=\"Calendar Events Carousel\">\r\n    <button class=\"carousel-button prev\" type=\"button\" aria-label=\"Previous Slide\" disabled aria-disabled=\"true\">\r\n        <i class=\"fas fa-chevron-left\" aria-hidden=\"true\"><\/i>\r\n    <\/button>\r\n    <div class=\"calendar-carousel\" aria-live=\"polite\">\r\n        <div class=\"calendar-carousel-track\" id=\"carousel-track\" role=\"list\">\r\n            <!-- Dynamic items will be appended here -->\r\n        <\/div>\r\n    <\/div>\r\n    <button class=\"carousel-button next\" type=\"button\" aria-label=\"Next Slide\" aria-disabled=\"false\">\r\n        <i class=\"fas fa-chevron-right\" aria-hidden=\"true\"><\/i>\r\n    <\/button>\r\n<\/div>\r\n\r\n<style>\r\n    .carousel-container {\r\n        --items-per-view: 4;\r\n        --carousel-gap: 24px;\r\n\r\n        width: 100%;\r\n        max-width: 1310px;\r\n        margin: 0 auto 25px;\r\n        padding: 0 15px;\r\n        box-sizing: border-box;\r\n\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        gap: 12px;\r\n        overflow: hidden;\r\n        position: relative;\r\n    }\r\n\r\n    .calendar-carousel {\r\n        flex: 1 1 auto;\r\n        min-width: 0;\r\n        overflow: hidden;\r\n        position: relative;\r\n    }\r\n\r\n    .calendar-carousel-track {\r\n        display: flex;\r\n        gap: var(--carousel-gap);\r\n        transition: transform 0.3s ease-in-out;\r\n        will-change: transform;\r\n        justify-content: flex-start;\r\n    }\r\n\r\n    .calendar-carousel-track.is-centered {\r\n        justify-content: center;\r\n    }\r\n\r\n    a.calendar-carousel-item {\r\n        text-decoration: none !important;\r\n        color: inherit;\r\n    }\r\n\r\n    .calendar-carousel-item {\r\n        flex: 0 0 calc(\r\n            (100% - (var(--carousel-gap) * (var(--items-per-view) - 1))) \/ var(--items-per-view)\r\n        );\r\n        max-width: calc(\r\n            (100% - (var(--carousel-gap) * (var(--items-per-view) - 1))) \/ var(--items-per-view)\r\n        );\r\n        min-width: 0;\r\n\r\n        text-align: center;\r\n        padding: 20px;\r\n        border: 1px solid #c9c9c9;\r\n        box-sizing: border-box;\r\n        background: #ffffff;\r\n        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.18);\r\n        transition: transform 0.2s ease, box-shadow 0.2s ease;\r\n    }\r\n\r\n    .calendar-carousel-item:hover,\r\n    .calendar-carousel-item:focus-visible {\r\n        transform: translateY(-4px);\r\n        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.18);\r\n    }\r\n\r\n    .calendar-carousel-item:focus-visible {\r\n        outline: 3px solid #4f2d7f;\r\n        outline-offset: 3px;\r\n    }\r\n\r\n    .carousel-button {\r\n        width: 52px;\r\n        height: 52px;\r\n        min-width: 52px;\r\n        min-height: 52px;\r\n        padding: 0;\r\n        border: 1px solid #bdbdbd;\r\n        border-radius: 999px;\r\n        background-color: #ffffff;\r\n        color: rgba(0, 0, 0, 0.75);\r\n        cursor: pointer;\r\n\r\n        display: inline-flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        flex: 0 0 auto;\r\n\r\n        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);\r\n    }\r\n\r\n    .carousel-button i {\r\n        font-size: 24px;\r\n        line-height: 1;\r\n    }\r\n\r\n    .carousel-button[disabled],\r\n    .carousel-button[aria-disabled=\"true\"] {\r\n        opacity: 0.45;\r\n        cursor: default;\r\n    }\r\n\r\n    .event-date {\r\n        font-family: 'PT Serif', 'Arial';\r\n        font-size: clamp(1rem, 1vw + 0.7rem, 1.35rem);\r\n        line-height: 1.4;\r\n        font-weight: 700;\r\n        color: #000000;\r\n        margin-bottom: 10px;\r\n        letter-spacing: 1px;\r\n        overflow-wrap: anywhere;\r\n        word-break: break-word;\r\n    }\r\n\r\n    .event-divider {\r\n        background-color: #4f2d7f;\r\n        line-height: 1;\r\n        padding: 2px;\r\n    }\r\n\r\n    .event-title {\r\n        font-family: 'Source Sans Pro', 'Arial';\r\n        color: #000000;\r\n        font-size: clamp(1rem, 0.4vw + 0.9rem, 1.15rem);\r\n        line-height: 1.45;\r\n        font-weight: 400;\r\n        margin-top: 10px;\r\n        overflow-wrap: anywhere;\r\n        word-break: break-word;\r\n    }\r\n\r\n    .event-time {\r\n        font-family: 'Source Sans Pro', 'Arial';\r\n        color: #000000;\r\n        font-size: 0.95rem;\r\n        margin-top: 5px;\r\n        line-height: 1.45;\r\n        font-weight: 400;\r\n        overflow-wrap: anywhere;\r\n        word-break: break-word;\r\n    }\r\n\r\n    @media (max-width: 1024px) {\r\n        .carousel-container {\r\n            --items-per-view: 2;\r\n            --carousel-gap: 20px;\r\n        }\r\n\r\n        .calendar-carousel-item {\r\n            padding: 18px;\r\n        }\r\n\r\n        .event-date {\r\n            margin-bottom: 8px;\r\n        }\r\n    }\r\n\r\n    @media (max-width: 640px) {\r\n        .carousel-container {\r\n            --items-per-view: 1;\r\n            --carousel-gap: 0px;\r\n            padding: 0 10px;\r\n            gap: 8px;\r\n        }\r\n\r\n        .calendar-carousel-item {\r\n            padding: 16px;\r\n        }\r\n\r\n        .carousel-button {\r\n            width: 44px;\r\n            height: 44px;\r\n            min-width: 44px;\r\n            min-height: 44px;\r\n        }\r\n\r\n        .carousel-button i {\r\n            font-size: 20px;\r\n        }\r\n    }\r\n<\/style>\r\n\r\n<script>\r\n$(document).ready(function () {\r\n    let currentPage = 0;\r\n\r\n    const $container = $('.carousel-container');\r\n    const $carousel = $('.calendar-carousel');\r\n    const $track = $('#carousel-track');\r\n    const $prev = $('.prev');\r\n    const $next = $('.next');\r\n\r\n    const $items = () => $('.calendar-carousel-item');\r\n\r\n    const itemsPerView = () => {\r\n        const raw = getComputedStyle($container[0]).getPropertyValue('--items-per-view').trim();\r\n        const parsed = parseInt(raw, 10);\r\n        return Number.isFinite(parsed) && parsed > 0 ? parsed : 4;\r\n    };\r\n\r\n    const trackGap = () => {\r\n        return parseFloat(getComputedStyle($track[0]).gap) || 0;\r\n    };\r\n\r\n    const itemWidth = () => {\r\n        const $first = $items().first();\r\n        return $first.length ? $first.outerWidth() : 0;\r\n    };\r\n\r\n    const itemStep = () => itemWidth() + trackGap();\r\n\r\n    const totalItems = () => $items().length;\r\n\r\n    const maxPage = () => {\r\n        const perView = itemsPerView();\r\n        const total = totalItems();\r\n        return Math.max(0, Math.ceil(total \/ perView) - 1);\r\n    };\r\n\r\n    function currentVisibleRange() {\r\n        const perView = itemsPerView();\r\n        const first = currentPage * perView;\r\n        const last = Math.min(first + perView - 1, totalItems() - 1);\r\n        return { first, last };\r\n    }\r\n\r\n    function syncCenteredState() {\r\n        $track.toggleClass('is-centered', totalItems() <= itemsPerView());\r\n    }\r\n\r\n    function updateVisibleItemsAccessibility() {\r\n        const { first, last } = currentVisibleRange();\r\n\r\n        $items().each(function (index) {\r\n            const isVisible = index >= first && index <= last;\r\n\r\n            $(this)\r\n                .attr('tabindex', isVisible ? '0' : '-1')\r\n                .toggleClass('is-visible-item', isVisible);\r\n        });\r\n    }\r\n\r\n    function updateButtons() {\r\n        const atStart = currentPage <= 0;\r\n        const atEnd = currentPage >= maxPage();\r\n\r\n        $prev\r\n            .prop('disabled', atStart)\r\n            .attr('aria-disabled', atStart ? 'true' : 'false')\r\n            .css('visibility', atStart ? 'hidden' : 'visible');\r\n\r\n        $next\r\n            .prop('disabled', atEnd)\r\n            .attr('aria-disabled', atEnd ? 'true' : 'false')\r\n            .css('visibility', atEnd ? 'hidden' : 'visible');\r\n    }\r\n\r\n    function pageOffset() {\r\n        const perView = itemsPerView();\r\n        return currentPage * itemStep() * perView;\r\n    }\r\n\r\n    function clampPage() {\r\n        currentPage = Math.max(0, Math.min(currentPage, maxPage()));\r\n    }\r\n\r\n    function updateCarousel() {\r\n        clampPage();\r\n        syncCenteredState();\r\n        updateVisibleItemsAccessibility();\r\n\r\n        const offset = totalItems() <= itemsPerView() ? 0 : pageOffset();\r\n        $track.css('transform', `translateX(-${offset}px)`);\r\n\r\n        updateButtons();\r\n    }\r\n\r\n    function focusFirstVisibleItem() {\r\n        const $visible = $items().filter('[tabindex=\"0\"]');\r\n        if ($visible.length) {\r\n            $visible.first().trigger('focus');\r\n        }\r\n    }\r\n\r\n    function goToNextPage(moveFocusToItems = false) {\r\n        if (currentPage >= maxPage()) return;\r\n        currentPage += 1;\r\n        updateCarousel();\r\n\r\n        if (moveFocusToItems) {\r\n            setTimeout(focusFirstVisibleItem, 310);\r\n        }\r\n    }\r\n\r\n    function goToPrevPage(moveFocusToItems = false) {\r\n        if (currentPage <= 0) return;\r\n        currentPage -= 1;\r\n        updateCarousel();\r\n\r\n        if (moveFocusToItems) {\r\n            setTimeout(focusFirstVisibleItem, 310);\r\n        }\r\n    }\r\n\r\n    $next.on('click', function () {\r\n        const fromKeyboardControl = document.activeElement === this;\r\n        goToNextPage(fromKeyboardControl);\r\n    });\r\n\r\n    $prev.on('click', function () {\r\n        const fromKeyboardControl = document.activeElement === this;\r\n        goToPrevPage(fromKeyboardControl);\r\n    });\r\n\r\n    $(window).on('resize', function () {\r\n        updateCarousel();\r\n    });\r\n\r\n    document.addEventListener('keydown', function (e) {\r\n        const active = document.activeElement;\r\n\r\n        if (!active || !active.classList.contains('calendar-carousel-item')) {\r\n            return;\r\n        }\r\n\r\n        const arrowStep = 40;\r\n        const pageStep = Math.max(100, Math.floor(window.innerHeight * 0.9));\r\n\r\n        switch (e.key) {\r\n            case 'ArrowDown':\r\n                e.preventDefault();\r\n                window.scrollBy(0, arrowStep);\r\n                break;\r\n\r\n            case 'ArrowUp':\r\n                e.preventDefault();\r\n                window.scrollBy(0, -arrowStep);\r\n                break;\r\n\r\n            case 'PageDown':\r\n                e.preventDefault();\r\n                window.scrollBy(0, pageStep);\r\n                break;\r\n\r\n            case 'PageUp':\r\n                e.preventDefault();\r\n                window.scrollBy(0, -pageStep);\r\n                break;\r\n\r\n            case 'Home':\r\n                if (!e.altKey && !e.ctrlKey && !e.metaKey) {\r\n                    e.preventDefault();\r\n                    window.scrollTo(0, 0);\r\n                }\r\n                break;\r\n\r\n            case 'End':\r\n                if (!e.altKey && !e.ctrlKey && !e.metaKey) {\r\n                    e.preventDefault();\r\n                    window.scrollTo(0, document.documentElement.scrollHeight);\r\n                }\r\n                break;\r\n        }\r\n    }, true);\r\n\r\n    $.ajax({\r\n        url: window.location.origin + '\/applications\/calendar_feed.php',\r\n        method: 'GET',\r\n        dataType: 'json',\r\n        success: function (data) {\r\n            data.forEach(function (event) {\r\n                const ariaLabel = `${event.title} - ${event.date}${event.date_time ? ' - ' + event.date_time : ''} (opens in new tab)`;\r\n\r\n                const eventHTML = `\r\n                    <a class=\"calendar-carousel-item\"\r\n                       href=\"${event.url}\"\r\n                       target=\"_blank\"\r\n                       rel=\"noopener\"\r\n                       role=\"listitem\"\r\n                       tabindex=\"-1\"\r\n                       aria-label=\"${ariaLabel}\">\r\n                        <div>\r\n                            <div class=\"event-date\"><strong>${event.date}<\/strong><\/div>\r\n                            <div class=\"event-divider\"><\/div>\r\n                            <div class=\"event-title\">${event.title}<\/div>\r\n                            ${event.date_time ? `<div class=\"event-time\">${event.date_time}<\/div>` : ''}\r\n                        <\/div>\r\n                    <\/a>`;\r\n\r\n                $track.append(eventHTML);\r\n            });\r\n\r\n            updateCarousel();\r\n        },\r\n        error: function (error) {\r\n            console.error('Error fetching the calendar feed:', error);\r\n            $track.append('<div><h3>An unexpected error has occurred. Please contact webmaster@tarleton.edu.<\/h3><\/div>');\r\n            updateCarousel();\r\n        }\r\n    });\r\n\r\n    updateButtons();\r\n});\r\n<\/script>\n\n\n\n<div style=\"text-align:center;\"><a class=\"btn btn-theme-primary btn-lg\" href=\"https:\/\/calendar.tarleton.edu\/\">View More Events<\/a><\/div>\n\n\n\n<script>\njQuery(document).ready(function($) {\n    var slider = $('#n2-ss-28');\n    slider.on('beforeChange', function(event, slick, currentSlide, nextSlide){\n        var scrollBy = 4; \/\/ Number of slides to move\n        slick.slickSetOption('slidesToScroll', scrollBy, true);\n    });\n});\n<\/script>\n","protected":false},"excerpt":{"rendered":"<p>Upcoming Events View More Events<\/p>\n","protected":false},"author":3,"featured_media":49676,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"template-fullwidth.php","meta":{"_acf_changed":false,"inline_featured_image":false,"advgb_blocks_editor_width":"","advgb_blocks_columns_visual_guide":"","footnotes":""},"class_list":["post-51358","page","type-page","status-publish","has-post-thumbnail","hentry"],"acf":[],"coauthors":[],"author_meta":{"author_link":"https:\/\/www.tarleton.edu\/news\/author\/keegan-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2\/","display_name":"keegan"},"relative_dates":{"created":"Posted 2 years ago","modified":"Updated 1 year ago"},"absolute_dates":{"created":"Posted on July 25, 2024","modified":"Updated on October 23, 2024"},"absolute_dates_time":{"created":"Posted on July 25, 2024 1:46 pm","modified":"Updated on October 23, 2024 2:29 pm"},"featured_img_caption":"Tarleton State University entrance with flags and flowers.","featured_img":"https:\/\/www.tarleton.edu\/news\/wp-content\/uploads\/sites\/65\/2023\/10\/Spring-Flowers-Admin-Gates_7545.jpg","series_order":"","_links":{"self":[{"href":"https:\/\/www.tarleton.edu\/news\/wp-json\/wp\/v2\/pages\/51358","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.tarleton.edu\/news\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.tarleton.edu\/news\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.tarleton.edu\/news\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/www.tarleton.edu\/news\/wp-json\/wp\/v2\/comments?post=51358"}],"version-history":[{"count":0,"href":"https:\/\/www.tarleton.edu\/news\/wp-json\/wp\/v2\/pages\/51358\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.tarleton.edu\/news\/wp-json\/wp\/v2\/media\/49676"}],"wp:attachment":[{"href":"https:\/\/www.tarleton.edu\/news\/wp-json\/wp\/v2\/media?parent=51358"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}