{"id":18,"date":"2025-07-06T23:02:48","date_gmt":"2025-07-06T23:02:48","guid":{"rendered":"https:\/\/privatefamilyportal.com\/portal\/family-calendar\/"},"modified":"2025-07-06T23:02:48","modified_gmt":"2025-07-06T23:02:48","slug":"family-calendar","status":"publish","type":"page","link":"https:\/\/privatefamilyportal.com\/portal\/","title":{"rendered":"Family Calendar"},"content":{"rendered":"\n<!-- Three-Column Dashboard Layout with New Menu System -->\n<div class=\"fsc-dashboard-container\">\n\n    <!-- Left Sidebar - NEW: Customizable Menu System -->\n    <div class=\"fsc-left-sidebar\" id=\"fsc-left-sidebar\">\n        <!-- Gear Icon Menu Header -->\n        <div class=\"fsc-sidebar-header\">\n            <h3>Calendar Controls<\/h3>\n            <div class=\"fsc-menu-controls\">\n                <button class=\"fsc-gear-btn\" id=\"fsc-gear-menu\" title=\"Customize Menu\">\n                    <span class=\"fsc-gear-icon\">\u2699\ufe0f<\/span>\n                <\/button>\n            <\/div>\n        <\/div>\n\n        <!-- Menu Customization Modal -->\n        <div class=\"fsc-menu-modal\" id=\"fsc-menu-modal\" style=\"display: none;\">\n            <div class=\"fsc-menu-modal-content\">\n                <div class=\"fsc-menu-modal-header\">\n                    <h4>\ud83d\udccb Customize Your Menu<\/h4>\n                    <button class=\"fsc-menu-close\" id=\"fsc-menu-close\">\u00d7<\/button>\n                <\/div>\n                <div class=\"fsc-menu-modal-body\">\n                    <p>Drag to reorder, toggle visibility:<\/p>\n                    <div class=\"fsc-menu-items-config\" id=\"fsc-menu-items-config\">\n                        <!-- Menu items will be populated by JavaScript -->\n                    <\/div>\n                <\/div>\n                <div class=\"fsc-menu-modal-footer\">\n                    <button class=\"fsc-btn fsc-btn-primary\" id=\"fsc-save-menu-config\">Save Settings<\/button>\n                    <button class=\"fsc-btn fsc-btn-secondary\" id=\"fsc-reset-menu-config\">Reset to Default<\/button>\n                <\/div>\n            <\/div>\n        <\/div>\n\n        <!-- Customizable Sidebar Content -->\n        <div class=\"fsc-sidebar-content\">\n            <div class=\"fsc-sortable-menu\" id=\"fsc-sortable-menu\">\n\n                <!-- View Options Section -->\n                <div class=\"fsc-menu-section\" data-menu-id=\"view-options\">\n                    <div class=\"fsc-menu-section-header\">\n                        <h4>\ud83d\udcc5 View Options<\/h4>\n                        <button class=\"fsc-section-toggle\" data-target=\"view-options-content\">\u2212<\/button>\n                    <\/div>\n                    <div class=\"fsc-menu-section-content\" id=\"view-options-content\">\n                        <div class=\"fsc-control-group\">\n                            <label>\n                                <input type=\"checkbox\" id=\"fsc-show-weekends\" checked>\n                                Show Weekends\n                            <\/label>\n                            <label>\n                                <input type=\"checkbox\" id=\"fsc-show-times\" checked>\n                                Show Event Times\n                            <\/label>\n                            <label>\n                                <input type=\"checkbox\" id=\"fsc-compact-view\">\n                                Compact View\n                            <\/label>\n                        <\/div>\n                    <\/div>\n                <\/div>\n\n                <!-- Theme Settings Section -->\n                <div class=\"fsc-menu-section\" data-menu-id=\"theme-settings\">\n                    <div class=\"fsc-menu-section-header\">\n                        <h4>\ud83c\udfa8 Theme Settings<\/h4>\n                        <button class=\"fsc-section-toggle\" data-target=\"theme-settings-content\">\u2212<\/button>\n                    <\/div>\n                    <div class=\"fsc-menu-section-content\" id=\"theme-settings-content\">\n                        <div class=\"fsc-control-group\">\n                            <label for=\"fsc-theme-select\">Calendar Theme:<\/label>\n                            <select id=\"fsc-theme-select\">\n                                <option value=\"magnetic\" selected>Magnetic Planner<\/option>\n                                <option value=\"holiday-christmas\">\ud83c\udf84 Christmas<\/option>\n                                <option value=\"holiday-halloween\">\ud83c\udf83 Halloween<\/option>\n                                <option value=\"minimal\">Minimal<\/option>\n                                <option value=\"professional\">Professional<\/option>\n                            <\/select>\n                        <\/div>\n                    <\/div>\n                <\/div>\n\n                <!-- Family Legend Section -->\n                <div class=\"fsc-menu-section\" data-menu-id=\"family-legend\">\n                    <div class=\"fsc-menu-section-header\">\n                        <h4>\ud83d\udc68\u200d\ud83d\udc69\u200d\ud83d\udc67\u200d\ud83d\udc66 Family Legend<\/h4>\n                        <button class=\"fsc-section-toggle\" data-target=\"family-legend-content\">\u2212<\/button>\n                    <\/div>\n                    <div class=\"fsc-menu-section-content\" id=\"family-legend-content\">\n                        <div class=\"fsc-legend-compact\" id=\"fsc-family-legend-list\">\n                            <!-- Real user data will be populated by JavaScript -->\n                            <div class=\"fsc-loading-legend\">Loading family members...<\/div>\n                        <\/div>\n                    <\/div>\n                <\/div>\n\n                <!-- Post-it Notes Section -->\n                <div class=\"fsc-menu-section\" data-menu-id=\"post-it\">\n                    <div class=\"fsc-menu-section-header\">\n                        <h4>\ud83d\udcdd Post-it Notes<\/h4>\n                        <button class=\"fsc-section-toggle\" data-target=\"post-it-content\">\u2212<\/button>\n                    <\/div>\n                    <div class=\"fsc-menu-section-content\" id=\"post-it-content\">\n                        <textarea class=\"fsc-quick-notes\" id=\"fsc-quick-notes\" \n                                  placeholder=\"Quick family reminders...\"\n                                  rows=\"4\"><\/textarea>\n                        <button class=\"fsc-btn fsc-btn-small\" id=\"fsc-save-notes\">Save Notes<\/button>\n                    <\/div>\n                <\/div>\n\n                <!-- Stickers Section (Future Feature) -->\n                <div class=\"fsc-menu-section\" data-menu-id=\"stickers\">\n                    <div class=\"fsc-menu-section-header\">\n                        <h4>\ud83c\udf1f Stickers<\/h4>\n                        <button class=\"fsc-section-toggle\" data-target=\"stickers-content\">\u2212<\/button>\n                    <\/div>\n                    <div class=\"fsc-menu-section-content\" id=\"stickers-content\">\n                        <div class=\"fsc-stickers-preview\">\n                            <p style=\"color: #666; font-style: italic;\">Coming soon! Add fun stickers to your calendar events.<\/p>\n                            <div class=\"fsc-sticker-samples\">\n                                \ud83c\udf89 \ud83c\udf82 \ud83c\udf88 \u2b50 \u2764\ufe0f \ud83c\udfc6 \ud83c\udf08 \ud83e\udd84\n                            <\/div>\n                        <\/div>\n                    <\/div>\n                <\/div>\n\n                <!-- Quick Actions Section -->\n                <div class=\"fsc-menu-section\" data-menu-id=\"quick-actions\">\n                    <div class=\"fsc-menu-section-header\">\n                        <h4>\u26a1 Quick Actions<\/h4>\n                        <button class=\"fsc-section-toggle\" data-target=\"quick-actions-content\">\u2212<\/button>\n                    <\/div>\n                    <div class=\"fsc-menu-section-content\" id=\"quick-actions-content\">\n                        <div class=\"fsc-quick-actions\">\n                            <button class=\"fsc-btn fsc-btn-primary fsc-btn-block\" id=\"fsc-add-event-sidebar\">\n                                \u2795 Add Event\n                            <\/button>\n                            <button class=\"fsc-btn fsc-btn-secondary fsc-btn-block\" id=\"fsc-print-calendar\">\n                                \ud83d\udda8\ufe0f Print Calendar\n                            <\/button>\n                            <button class=\"fsc-btn fsc-btn-secondary fsc-btn-block\" id=\"fsc-today-btn\">\n                                \ud83d\udccd Go to Today\n                            <\/button>\n                        <\/div>\n                    <\/div>\n                <\/div>\n\n            <\/div>\n        <\/div>\n    <\/div>\n\n    <!-- Main Calendar Area -->\n    <div class=\"fsc-main-content\" id=\"fsc-main-content\">\n        <!-- Calendar Header -->\n        <div class=\"fsc-calendar-header-new\">\n            <div class=\"fsc-header-nav\">\n                <button class=\"fsc-nav-btn fsc-prev-btn\">\u2039<\/button>\n                <h2 class=\"fsc-calendar-title-new\" id=\"fsc-calendar-title\">MONTHLY PLANNER<\/h2>\n                <button class=\"fsc-nav-btn fsc-next-btn\">\u203a<\/button>\n            <\/div>\n\n            <!-- View Switcher - Centered Below Title -->\n            <div class=\"fsc-view-switcher-new\">\n                <button class=\"fsc-view-btn-new active\" data-view=\"month\">\ud83d\udcc5 MONTHLY<\/button>\n                <button class=\"fsc-view-btn-new\" data-view=\"week\">\ud83d\udcca WEEKLY<\/button>\n                <button class=\"fsc-view-btn-new\" data-view=\"day\">\ud83d\udccb DAILY<\/button>\n            <\/div>\n        <\/div>\n\n        <!-- Calendar Display Area -->\n        <div class=\"fsc-calendar-display\" id=\"fsc-calendar-display\">\n            <!-- Calendar grid will be inserted here by JavaScript -->\n        <\/div>\n\n        <!-- Footer Add Event Button -->\n        <div class=\"fsc-calendar-footer\">\n            <button class=\"fsc-btn fsc-btn-primary fsc-add-event-footer\" id=\"fsc-add-event-footer\">\n                \u2795 Add New Event\n            <\/button>\n        <\/div>\n    <\/div>\n\n    <!-- Right Sidebar - Collapsible -->\n    <div class=\"fsc-right-sidebar\" id=\"fsc-right-sidebar\">\n        <div class=\"fsc-sidebar-header\">\n            <h3>Upcoming Events<\/h3>\n            <button class=\"fsc-sidebar-toggle\" id=\"fsc-right-toggle\">\n                <span class=\"fsc-toggle-icon\">\u2192<\/span>\n            <\/button>\n        <\/div>\n\n        <div class=\"fsc-sidebar-content\">\n            <!-- Upcoming Events List -->\n            <div class=\"fsc-upcoming-events\" id=\"fsc-upcoming-events\">\n                <div class=\"fsc-loading-events\">Loading events...<\/div>\n            <\/div>\n\n            <!-- Calendar Stats -->\n            <div class=\"fsc-control-section\">\n                <h4>\ud83d\udcca This Month<\/h4>\n                <div class=\"fsc-stats-display\">\n                    <div class=\"fsc-stat-item\">\n                        <span class=\"fsc-stat-number\" id=\"fsc-stat-total\">0<\/span>\n                        <span class=\"fsc-stat-label\">Total Events<\/span>\n                    <\/div>\n                    <div class=\"fsc-stat-item\">\n                        <span class=\"fsc-stat-number\" id=\"fsc-stat-today\">0<\/span>\n                        <span class=\"fsc-stat-label\">Today<\/span>\n                    <\/div>\n                    <div class=\"fsc-stat-item\">\n                        <span class=\"fsc-stat-number\" id=\"fsc-stat-week\">0<\/span>\n                        <span class=\"fsc-stat-label\">This Week<\/span>\n                    <\/div>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/div>\n\n    <!-- Mobile Menu Toggle (shows on mobile) -->\n    <div class=\"fsc-mobile-controls\">\n        <button class=\"fsc-mobile-toggle\" id=\"fsc-mobile-left\">\ud83d\udccb Controls<\/button>\n        <button class=\"fsc-mobile-toggle\" id=\"fsc-mobile-right\">\ud83d\udcc5 Events<\/button>\n    <\/div>\n<\/div>\n\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-18","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/privatefamilyportal.com\/portal\/wp-json\/wp\/v2\/pages\/18","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/privatefamilyportal.com\/portal\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/privatefamilyportal.com\/portal\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/privatefamilyportal.com\/portal\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/privatefamilyportal.com\/portal\/wp-json\/wp\/v2\/comments?post=18"}],"version-history":[{"count":1,"href":"https:\/\/privatefamilyportal.com\/portal\/wp-json\/wp\/v2\/pages\/18\/revisions"}],"predecessor-version":[{"id":21,"href":"https:\/\/privatefamilyportal.com\/portal\/wp-json\/wp\/v2\/pages\/18\/revisions\/21"}],"wp:attachment":[{"href":"https:\/\/privatefamilyportal.com\/portal\/wp-json\/wp\/v2\/media?parent=18"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}