{"id":9561,"date":"2025-03-14T14:20:38","date_gmt":"2025-03-14T14:20:38","guid":{"rendered":"https:\/\/critecws.com\/opco\/opconetwork-calendar\/"},"modified":"2025-05-15T11:02:58","modified_gmt":"2025-05-15T11:02:58","slug":"opconetwork-calendar","status":"publish","type":"page","link":"https:\/\/critecws.com\/opco\/en\/opconetwork-calendar\/","title":{"rendered":"OPCONetwork Calendar"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"9561\" class=\"elementor elementor-9561 elementor-6679\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-bcf3521 e-flex e-con-boxed e-con e-parent\" data-id=\"bcf3521\" data-element_type=\"container\">\r\n\t\t\t\t\t<div class=\"e-con-inner\">\r\n\t\t\t\t<div class=\"elementor-element elementor-element-72627b3 elementor-widget elementor-widget-shortcode\" data-id=\"72627b3\" data-element_type=\"widget\" data-widget_type=\"shortcode.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\n<div class=\"calendar-toggle-buttons opconetwork\">\n    <button id=\"switch-to-list\" class=\"calendar-toggle\">Lista<\/button>\n    <button id=\"switch-to-calendar\" class=\"calendar-toggle active\">Calend\u00e1rio<\/button>\n<\/div>\n\n<div id=\"list-view\" style=\"display: none;\">\n    <div class=\"calendario-container\">\n        <!-- Navega\u00e7\u00e3o entre meses -->\n        <div class=\"month-navigation\">\n\n            <div class=\"porto-heading text-capitalize\">abril, 2026<\/div>\n            <a href=\"?month=3&year=2026\" class=\"btn-rounded\"><i class=\"fa fa-chevron-left opconetwork\"><\/i><\/a>\n            <a href=\"?month=5&year=2026\" class=\"btn-rounded\"><i class=\"fa fa-chevron-right opconetwork\"><\/i><\/a>\n        <\/div>\n\n        <!-- Lista de eventos -->\n        <ul class=\"event-list\">\n                            <li>N\u00e3o h\u00e1 eventos para este m\u00eas.<\/li>\n                    <\/ul>\n    <\/div>\n<\/div>\n\n<!-- Enqueue FullCalendar CSS e JS -->\n<link href='https:\/\/cdn.jsdelivr.net\/npm\/fullcalendar@5.11.3\/main.min.css' rel='stylesheet' \/>\n<script src='https:\/\/cdn.jsdelivr.net\/npm\/fullcalendar@5.11.3\/main.min.js'><\/script>\n<script src='https:\/\/cdn.jsdelivr.net\/npm\/fullcalendar@5.11.3\/locales-all.min.js'><\/script>\n\n<div id=\"calendar-view\">\n    <div id=\"fullcalendar\"><\/div>\n<\/div>\n\n<script>\n    document.addEventListener('DOMContentLoaded', function() {\n        var calendarEl = document.getElementById('calendar');\n        var calendar = new FullCalendar.Calendar(calendarEl, {\n            initialView: 'dayGridMonth',\n            locale: 'pt-br',\n            headerToolbar: {\n                left: 'prev,next today',\n                center: 'title',\n                right: ''\n            },\n            buttonText: {\n                today: 'Hoje',\n            },\n            views: {\n                dayGridMonth: {\n                    displayEventEnd: false,\n                    displayEventTime: false\n                },\n            },\n            events: [],\n            eventClick: function(info) {\n                if (info.event.url) {\n                    window.location.href = info.event.url;\n                    return false;\n                }\n            },\n            eventDisplay: 'block',\n            height: 'auto'\n        });\n\n        calendar.render();\n    });\n<\/script>\n\n<style>\n    .calendar-toggle-buttons {\n        display: flex;\n        justify-content: flex-end;\n        gap: 8px;\n    }\n\n    .calendar-toggle {\n        background: #f1f1f1;\n        color: #333;\n        border: none;\n        padding: 8px 14px;\n        border-radius: 4px;\n        cursor: pointer;\n    }\n\n    .calendar-toggle-buttons.opco .calendar-toggle.active {\n        background: var(--e-global-color-primary);\n        color: white;\n    }\n\n    .calendar-toggle-buttons.opconetwork .calendar-toggle.active {\n        background: var(--e-global-color-a9676a3);\n        color: white;\n    }\n\n    .fc-event {\n        cursor: pointer;\n        padding: 2px 4px;\n    }\n\n    .fc-event-title {\n        font-weight: 500;\n    }\n\n    .fc-toolbar-title {\n        font-size: 1.5em !important;\n        text-transform: capitalize;\n    }\n\n    .fc-button-primary {\n        background-color: #222529 !important;\n        border-color: #222529 !important;\n    }\n\n    .fc-button-primary:hover {\n        background-color: #1d2124 !important;\n        border-color: #1d2124 !important;\n    }\n\n    .fc-button-active {\n        background-color: #1d2124 !important;\n        border-color: #1d2124 !important;\n    }\n\n    .porto-heading {\n        font-size: 35px;\n        font-weight: 600;\n        line-height: 1.3em;\n        letter-spacing: -1.75px;\n        color: #222529;\n    }\n\n    .month-navigation {\n        display: flex;\n        gap: 16px;\n        margin-bottom: 20px;\n    }\n\n    .month-navigation .btn-rounded .opconetwork {\n        color: var(--e-global-color-a9676a3) !important;\n    }\n\n    a.btn-rounded {\n        width: 38px;\n        height: 38px;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        border: 1px solid #000;\n        border-radius: 50%;\n        font-size: 20px;\n    }\n\n    a.btn-rounded:hover {\n        background: #000;\n        color: #fff;\n    }\n\n    .event-list {\n        list-style: none;\n        padding-left: 0px;\n    }\n\n    .event-list li {\n        display: flex;\n    }\n\n    .event-item {\n        display: flex;\n        gap: 22px;\n        padding: 16px;\n        margin-top: 6px;\n        transition: all ease-in-out 200ms;\n    }\n\n    .event-item:hover {\n        background-color: #efefef;\n        padding-left: 26px;\n        padding-right: 6px;\n    }\n\n    .event-date {\n        font-weight: bold;\n        text-align: center;\n\n    }\n\n    .event-day {\n        display: block;\n        font-size: 26px;\n    }\n\n    .event-month {\n        display: block;\n        font-size: 14px;\n    }\n\n    .event-title {\n        display: block;\n        font-weight: 600;\n        font-size: 22px;\n        color: #000;\n    }\n\n    .event-title.opconetwork:hover {\n        color: var(--e-global-color-a9676a3) !important;\n    }\n\n    .tag {\n        padding: 4px 9px;\n        color: #fff;\n        font-size: 11px;\n        margin: 0px 5px 5px 0px;\n        border-radius: 4px;\n    }\n\n    .event-time {\n        display: block;\n        color: #666;\n        line-height: 14px;\n        font-size: 14px;\n        margin-top: 5px;\n    }\n\n    @media (max-width: 576px) {\n        .event-title {\n            font-size: 20px;\n            line-height: 1;\n        }\n\n        .event-time {\n            margin-top: 6px;\n        }\n    }\n<\/style>\n\n<script>\n    document.addEventListener('DOMContentLoaded', function() {\n        let calendarInitialized = true;\n\n        document.getElementById('switch-to-list').addEventListener('click', function() {\n            document.getElementById('list-view').style.display = 'block';\n            document.getElementById('calendar-view').style.display = 'none';\n            this.classList.add('active');\n            document.getElementById('switch-to-calendar').classList.remove('active');\n        });\n\n        document.getElementById('switch-to-calendar').addEventListener('click', function() {\n            document.getElementById('list-view').style.display = 'none';\n            document.getElementById('calendar-view').style.display = 'block';\n            this.classList.add('active');\n            document.getElementById('switch-to-list').classList.remove('active');\n\n            if (!calendarInitialized) {\n                initializeCalendar();\n            }\n        });\n\n        function initializeCalendar() {\n            const calendar = new FullCalendar.Calendar(document.getElementById('fullcalendar'), {\n                initialView: 'dayGridMonth',\n                locale: 'pt',\n                headerToolbar: {\n                    left: 'prev,next today',\n                    center: 'title',\n                    right: ''\n                },\n                events: []            });\n            calendar.render();\n            calendarInitialized = true;\n        }\n\n        initializeCalendar(); \/\/ Renderiza logo de in\u00edcio\n    });\n<\/script>\t\t<div class=\"elementor-shortcode\"><\/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":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"content-type":"","footnotes":""},"class_list":["post-9561","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/critecws.com\/opco\/en\/wp-json\/wp\/v2\/pages\/9561","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/critecws.com\/opco\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/critecws.com\/opco\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/critecws.com\/opco\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/critecws.com\/opco\/en\/wp-json\/wp\/v2\/comments?post=9561"}],"version-history":[{"count":1,"href":"https:\/\/critecws.com\/opco\/en\/wp-json\/wp\/v2\/pages\/9561\/revisions"}],"predecessor-version":[{"id":9562,"href":"https:\/\/critecws.com\/opco\/en\/wp-json\/wp\/v2\/pages\/9561\/revisions\/9562"}],"wp:attachment":[{"href":"https:\/\/critecws.com\/opco\/en\/wp-json\/wp\/v2\/media?parent=9561"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}