Google Calendar Clone<\/title>\r\n \r\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\r\n \r\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\r\n \r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@300;400;500;600;700&display=swap\" rel=\"stylesheet\">\r\n <script>\r\n tailwind.config = {\r\n theme: {\r\n extend: {\r\n fontFamily: {\r\n sans: ['Inter', 'sans-serif'],\r\n },\r\n colors: {\r\n google: {\r\n blue: '#1a73e8',\r\n hover: '#1557b0',\r\n light: '#e8f0fe',\r\n border: '#dadce0',\r\n text: '#3c4043',\r\n sidebar: '#f8f9fa'\r\n }\r\n }\r\n }\r\n }\r\n }\r\n <\/script>\r\n <style>\r\n \/* CSS Isolation Wrapper to prevent WordPress \/ Elementor theme inheritance *\/\r\n #gcal-clone-root {\r\n all: initial;\r\n font-family: 'Inter', sans-serif !important;\r\n color: #3c4043;\r\n box-sizing: border-box;\r\n display: flex;\r\n flex-direction: column;\r\n width: 100%;\r\n height: 100%;\r\n min-height: 750px;\r\n background-color: #ffffff;\r\n position: relative;\r\n }\r\n\r\n \/* Ensure all elements inside root use border-box *\/\r\n #gcal-clone-root *, #gcal-clone-root *::before, #gcal-clone-root *::after {\r\n box-sizing: border-box;\r\n }\r\n\r\n #gcal-clone-root input, #gcal-clone-root button, #gcal-clone-root select, #gcal-clone-root textarea {\r\n font-family: 'Inter', sans-serif;\r\n }\r\n\r\n \/* Custom scrollbar for clean Google look *\/\r\n #gcal-clone-root ::-webkit-scrollbar { width: 8px; height: 8px; }\r\n #gcal-clone-root ::-webkit-scrollbar-track { background: transparent; }\r\n #gcal-clone-root ::-webkit-scrollbar-thumb { background: #dadce0; border-radius: 4px; }\r\n #gcal-clone-root ::-webkit-scrollbar-thumb:hover { background: #bdc1c6; }\r\n \r\n .calendar-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }\r\n <\/style>\r\n<\/head>\r\n<body class=\"h-full flex flex-col bg-white text-google-text overflow-hidden\">\r\n\r\n \r\n <div id=\"gcal-clone-root\" class=\"h-full flex flex-col bg-white text-google-text overflow-hidden\">\r\n\r\n \r\n <header class=\"flex items-center justify-between px-4 py-2 border-b border-google-border bg-white select-none z-20 flex-shrink-0\">\r\n <div class=\"flex items-center space-x-4\">\r\n <button id=\"sidebar-toggle\" class=\"p-2 hover:bg-gray-100 rounded-full text-gray-600 transition cursor-pointer\" title=\"Main menu\">\r\n <i class=\"fa-solid fa-bars text-lg\"><\/i>\r\n <\/button>\r\n <div class=\"flex items-center space-x-2\">\r\n <div class=\"w-10 h-10 flex items-center justify-center bg-blue-500 text-white rounded-lg font-bold text-xl shadow-sm\">\r\n <i class=\"fa-regular fa-calendar-days\"><\/i>\r\n <\/div>\r\n <span class=\"text-xl font-medium tracking-tight text-gray-700 hidden sm:inline\">Calendar<\/span>\r\n <\/div>\r\n <button id=\"today-btn\" class=\"px-4 py-2 border border-google-border rounded-md text-sm font-medium hover:bg-gray-50 transition text-gray-700 shadow-sm cursor-pointer\">\r\n Today\r\n <\/button>\r\n <div class=\"flex items-center space-x-1\">\r\n <button id=\"prev-btn\" class=\"p-2 hover:bg-gray-100 rounded-full text-gray-600 transition cursor-pointer\" title=\"Previous period\">\r\n <i class=\"fa-solid fa-chevron-left text-sm\"><\/i>\r\n <\/button>\r\n <button id=\"next-btn\" class=\"p-2 hover:bg-gray-100 rounded-full text-gray-600 transition cursor-pointer\" title=\"Next period\">\r\n <i class=\"fa-solid fa-chevron-right text-sm\"><\/i>\r\n <\/button>\r\n <\/div>\r\n <h1 id=\"current-month-year\" class=\"text-xl font-normal text-gray-800 min-w-[180px]\">Loading...<\/h1>\r\n <\/div>\r\n\r\n <div class=\"flex items-center space-x-3\">\r\n \r\n <div class=\"relative\">\r\n <select id=\"view-select\" class=\"bg-white border border-google-border rounded-md px-3 py-2 text-sm font-medium text-gray-700 focus:outline-none focus:ring-2 focus:ring-google-blue cursor-pointer shadow-sm\">\r\n <option value=\"month\">Month<\/option>\r\n <option value=\"week\">Week<\/option>\r\n <option value=\"day\">Day<\/option>\r\n <\/select>\r\n <\/div>\r\n <button id=\"settings-open-btn\" class=\"p-2 hover:bg-gray-100 rounded-full text-gray-600 transition cursor-pointer\" title=\"Settings & Shared Calendars\">\r\n <i class=\"fa-solid fa-gear text-lg\"><\/i>\r\n <\/button>\r\n <div class=\"w-8 h-8 rounded-full bg-purple-600 text-white flex items-center justify-center font-semibold text-sm shadow-sm\" title=\"Guest User\">\r\n G\r\n <\/div>\r\n <\/div>\r\n <\/header>\r\n\r\n \r\n <div class=\"flex flex-1 overflow-hidden relative\">\r\n \r\n \r\n <aside id=\"sidebar\" class=\"w-64 border-r border-google-border bg-google-sidebar flex flex-col p-4 flex-shrink-0 transition-all duration-300 z-15\">\r\n \r\n <button id=\"create-event-btn\" class=\"flex items-center space-x-3 bg-white border border-google-border rounded-full py-3 px-6 shadow-md hover:shadow-lg transition transform active:scale-95 mb-6 group w-max cursor-pointer\">\r\n <svg class=\"w-8 h-8 text-google-blue\" viewBox=\"0 0 36 36\">\r\n <path fill=\"#34A853\" d=\"M16 16v14h4V20z\"><\/path>\r\n <path fill=\"#4285F4\" d=\"M30 16H20l-4 4h14z\"><\/path>\r\n <path fill=\"#FBBC05\" d=\"M6 16h10l4 4H6z\"><\/path>\r\n <path fill=\"#EA4335\" d=\"M20 16V2h-4v14z\"><\/path>\r\n <path fill=\"none\" d=\"M0 0h36v36H0z\"><\/path>\r\n <\/svg>\r\n <span class=\"text-sm font-medium text-gray-700 group-hover:text-google-blue pr-2\">Create<\/span>\r\n <\/button>\r\n\r\n \r\n <div class=\"mb-6 select-none\">\r\n <div class=\"flex items-center justify-between mb-2 px-1\">\r\n <span id=\"mini-month-year\" class=\"text-sm font-medium text-gray-700\"><\/span>\r\n <div class=\"flex space-x-1\">\r\n <button id=\"mini-prev\" class=\"p-1 hover:bg-gray-200 rounded-full text-gray-600 cursor-pointer\"><i class=\"fa-solid fa-chevron-left text-xs\"><\/i><\/button>\r\n <button id=\"mini-next\" class=\"p-1 hover:bg-gray-200 rounded-full text-gray-600 cursor-pointer\"><i class=\"fa-solid fa-chevron-right text-xs\"><\/i><\/button>\r\n <\/div>\r\n <\/div>\r\n <div class=\"grid grid-cols-7 text-center text-xs text-gray-500 mb-1\">\r\n <span>S<\/span><span>M<\/span><span>T<\/span><span>W<\/span><span>T<\/span><span>F<\/span><span>S<\/span>\r\n <\/div>\r\n <div id=\"mini-days-grid\" class=\"grid grid-cols-7 text-center text-xs gap-y-1\">\r\n \r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"flex-1 overflow-y-auto pr-1\">\r\n <div class=\"text-xs font-semibold text-gray-500 uppercase tracking-wider mb-2 px-1\">My Calendars<\/div>\r\n <div class=\"space-y-1 mb-4\">\r\n <label class=\"flex items-center space-x-2 px-2 py-1.5 rounded hover:bg-gray-200 cursor-pointer text-sm\">\r\n <input type=\"checkbox\" checked class=\"rounded text-blue-600 focus:ring-blue-500 h-4 w-4 filter-checkbox cursor-pointer\" data-calendar=\"primary\">\r\n <span class=\"w-3 h-3 rounded-full bg-blue-600 inline-block\"><\/span>\r\n <span class=\"text-gray-700 font-medium\">Personal Events<\/span>\r\n <\/label>\r\n <\/div>\r\n\r\n <div class=\"flex items-center justify-between px-1 mb-2\">\r\n <span class=\"text-xs font-semibold text-gray-500 uppercase tracking-wider\">Shared \/ ICS Calendars<\/span>\r\n <button id=\"add-shared-btn\" class=\"text-gray-500 hover:text-gray-800 p-1 cursor-pointer\" title=\"Add Shared Google Calendar \/ ICS\"><i class=\"fa-solid fa-plus text-xs\"><\/i><\/button>\r\n <\/div>\r\n <div id=\"shared-calendars-list\" class=\"space-y-1\">\r\n \r\n <\/div>\r\n <\/div>\r\n <\/aside>\r\n\r\n \r\n <main class=\"flex-1 flex flex-col overflow-hidden bg-white relative\" id=\"calendar-viewport\">\r\n \r\n <div id=\"view-container\" class=\"flex-1 flex flex-col overflow-hidden\">\r\n \r\n <\/div>\r\n <\/main>\r\n <\/div>\r\n\r\n \r\n <div id=\"event-modal\" class=\"fixed inset-0 bg-black\/40 z-50 flex items-center justify-center hidden\">\r\n <div class=\"bg-white rounded-lg shadow-2xl w-full max-w-lg overflow-hidden transform transition-all\">\r\n <div class=\"bg-gray-100 px-4 py-3 flex items-center justify-between border-b border-google-border\">\r\n <span id=\"modal-title-text\" class=\"font-medium text-gray-700\">Add event<\/span>\r\n <button id=\"close-modal-btn\" class=\"text-gray-500 hover:text-gray-700 p-1 rounded-full hover:bg-gray-200 cursor-pointer\">\r\n <i class=\"fa-solid fa-xmark text-lg\"><\/i>\r\n <\/button>\r\n <\/div>\r\n <form id=\"event-form\" class=\"p-6 space-y-4\">\r\n <input type=\"hidden\" id=\"event-id\">\r\n <div>\r\n <input type=\"text\" id=\"event-title\" required placeholder=\"Add title\" class=\"w-full text-xl font-normal border-b-2 border-google-blue focus:outline-none py-1 placeholder-gray-400\">\r\n <\/div>\r\n \r\n <div class=\"flex items-center space-x-3 text-gray-600\">\r\n <i class=\"fa-regular fa-clock w-5 text-center\"><\/i>\r\n <div class=\"flex flex-wrap items-center gap-2\">\r\n <input type=\"date\" id=\"event-date\" required class=\"border border-google-border rounded px-2 py-1 text-sm focus:outline-none focus:ring-1 focus:ring-google-blue\">\r\n <div id=\"time-inputs\" class=\"flex items-center space-x-2\">\r\n <input type=\"time\" id=\"event-start-time\" class=\"border border-google-border rounded px-2 py-1 text-sm focus:outline-none focus:ring-1 focus:ring-google-blue\">\r\n <span>to<\/span>\r\n <input type=\"time\" id=\"event-end-time\" class=\"border border-google-border rounded px-2 py-1 text-sm focus:outline-none focus:ring-1 focus:ring-google-blue\">\r\n <\/div>\r\n <label class=\"flex items-center space-x-1 text-xs ml-2 cursor-pointer\">\r\n <input type=\"checkbox\" id=\"event-all-day\" class=\"rounded text-blue-600 cursor-pointer\">\r\n <span>All day<\/span>\r\n <\/label>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"flex items-center space-x-3 text-gray-600\">\r\n <i class=\"fa-solid fa-calendar-days w-5 text-center\"><\/i>\r\n <select id=\"event-calendar-select\" class=\"border border-google-border rounded px-3 py-1.5 text-sm focus:outline-none focus:ring-1 focus:ring-google-blue bg-white w-48 cursor-pointer\">\r\n <option value=\"primary\">Personal Events<\/option>\r\n <\/select>\r\n <\/div>\r\n\r\n <div class=\"flex items-start space-x-3 text-gray-600\">\r\n <i class=\"fa-regular fa-envelope w-5 text-center mt-1\"><\/i>\r\n <div class=\"w-full\">\r\n <input type=\"text\" id=\"event-guests\" placeholder=\"Add guest emails (comma separated)\" class=\"w-full border border-google-border rounded p-2 text-sm focus:outline-none focus:ring-1 focus:ring-google-blue\">\r\n <p class=\"text-[11px] text-gray-400 mt-1\">Invited guests will receive simulated email notifications.<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"flex items-start space-x-3 text-gray-600\">\r\n <i class=\"fa-solid fa-align-left w-5 text-center mt-1\"><\/i>\r\n <textarea id=\"event-description\" placeholder=\"Add description or notes\" rows=\"3\" class=\"w-full border border-google-border rounded p-2 text-sm focus:outline-none focus:ring-1 focus:ring-google-blue\"><\/textarea>\r\n <\/div>\r\n\r\n <div class=\"flex items-center justify-end space-x-3 pt-4 border-t border-google-border\">\r\n <button type=\"button\" id=\"delete-event-btn\" class=\"px-4 py-2 text-red-600 hover:bg-red-50 rounded text-sm font-medium transition hidden cursor-pointer\">Delete<\/button>\r\n <button type=\"button\" id=\"cancel-event-btn\" class=\"px-4 py-2 hover:bg-gray-100 rounded text-sm font-medium text-gray-600 transition cursor-pointer\">Cancel<\/button>\r\n <button type=\"submit\" class=\"px-6 py-2 bg-google-blue hover:bg-google-hover text-white rounded font-medium text-sm shadow transition cursor-pointer\">Save<\/button>\r\n <\/div>\r\n <\/form>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div id=\"settings-modal\" class=\"fixed inset-0 bg-black\/40 z-50 flex items-center justify-center hidden\">\r\n <div class=\"bg-white rounded-lg shadow-2xl w-full max-w-xl overflow-hidden\">\r\n <div class=\"bg-gray-100 px-6 py-4 flex items-center justify-between border-b border-google-border\">\r\n <h3 class=\"font-medium text-lg text-gray-800\"><i class=\"fa-solid fa-gear mr-2 text-google-blue\"><\/i>Shared Google Calendars & ICS Feeds<\/h3>\r\n <button id=\"close-settings-btn\" class=\"text-gray-500 hover:text-gray-700 p-1 rounded-full hover:bg-gray-200 cursor-pointer\">\r\n <i class=\"fa-solid fa-xmark text-lg\"><\/i>\r\n <\/button>\r\n <\/div>\r\n <div class=\"p-6 space-y-6\">\r\n <div>\r\n <h4 class=\"text-sm font-semibold text-gray-700 mb-2\">Add a Shared Calendar or Public ICS feed<\/h4>\r\n <p class=\"text-xs text-gray-500 mb-4\">You can add public Google Calendar IDs (e.g., holiday calendars ending in @group.calendar.google.com) or direct ICS file links to display events on your calendar.<\/p>\r\n \r\n <form id=\"shared-cal-form\" class=\"space-y-3\">\r\n <div>\r\n <label class=\"block text-xs font-medium text-gray-600 mb-1\">Calendar Name<\/label>\r\n <input type=\"text\" id=\"shared-cal-name\" required placeholder=\"e.g., US Holidays or Team Calendar\" class=\"w-full border border-google-border rounded px-3 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-google-blue\">\r\n <\/div>\r\n <div>\r\n <label class=\"block text-xs font-medium text-gray-600 mb-1\">Google Calendar ID \/ ICS URL<\/label>\r\n <input type=\"text\" id=\"shared-cal-url\" required placeholder=\"e.g., en.usa#holiday@group.v.calendar.google.com or https:\/\/...\" class=\"w-full border border-google-border rounded px-3 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-google-blue\">\r\n <\/div>\r\n <div class=\"flex items-center space-x-2\">\r\n <label class=\"text-xs font-medium text-gray-600\">Color Tag:<\/label>\r\n <input type=\"color\" id=\"shared-cal-color\" value=\"#34A853\" class=\"w-8 h-8 rounded border border-google-border cursor-pointer\">\r\n <\/div>\r\n <div class=\"flex justify-end\">\r\n <button type=\"submit\" class=\"px-4 py-2 bg-google-blue hover:bg-google-hover text-white rounded text-sm font-medium shadow cursor-pointer\">Add Shared Calendar<\/button>\r\n <\/div>\r\n <\/form>\r\n <\/div>\r\n\r\n <div class=\"border-t border-google-border pt-4\">\r\n <h4 class=\"text-sm font-semibold text-gray-700 mb-3\">Active Shared Calendars<\/h4>\r\n <div id=\"configured-shared-list\" class=\"space-y-2 max-h-48 overflow-y-auto\">\r\n \r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div id=\"toast\" class=\"fixed bottom-5 left-1\/2 transform -translate-x-1\/2 bg-gray-900 text-white px-4 py-2 rounded-lg shadow-xl text-sm transition-opacity duration-300 opacity-0 pointer-events-none z-50\">\r\n Action completed\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <script>\r\n \/\/ State Management\r\n let currentDate = new Date();\r\n let currentView = 'month'; \/\/ 'month', 'week', 'day'\r\n let miniMonthDate = new Date();\r\n\r\n \/\/ Sample Seed Events if empty\r\n const defaultEvents = [\r\n {\r\n id: 'evt-1',\r\n title: 'Team Sync Meeting',\r\n date: new Date().toISOString().split('T')[0],\r\n startTime: '10:00',\r\n endTime: '11:00',\r\n allDay: false,\r\n calendarId: 'primary',\r\n description: 'Weekly sync with design and engineering teams.'\r\n },\r\n {\r\n id: 'evt-2',\r\n title: 'Product Launch Review',\r\n date: new Date(Date.now() + 86400000).toISOString().split('T')[0],\r\n startTime: '14:00',\r\n endTime: '15:30',\r\n allDay: false,\r\n calendarId: 'primary',\r\n description: 'Review final checklist for public launch.'\r\n },\r\n {\r\n id: 'evt-3',\r\n title: 'Company Hackathon Day',\r\n date: new Date(Date.now() + 86400000 * 3).toISOString().split('T')[0],\r\n startTime: '',\r\n endTime: '',\r\n allDay: true,\r\n calendarId: 'primary',\r\n description: 'Build awesome creative projects!'\r\n }\r\n ];\r\n\r\n let events = JSON.parse(localStorage.getItem('gcal_clone_events')) || defaultEvents;\r\n let sharedCalendars = JSON.parse(localStorage.getItem('gcal_clone_shared')) || [\r\n {\r\n id: 'shared-holidays',\r\n name: 'US Public Holidays',\r\n url: 'holidays',\r\n color: '#34A853',\r\n enabled: true,\r\n events: [\r\n { id: 'h-1', title: 'New Year\\'s Day', date: `${new Date().getFullYear()}-01-01`, allDay: true },\r\n { id: 'h-2', title: 'Independence Day', date: `${new Date().getFullYear()}-07-04`, allDay: true },\r\n { id: 'h-3', title: 'Christmas Day', date: `${new Date().getFullYear()}-12-25`, allDay: true }\r\n ]\r\n }\r\n ];\r\n\r\n \/\/ DOM Elements\r\n const currentMonthYearEl = document.getElementById('current-month-year');\r\n const viewContainer = document.getElementById('view-container');\r\n const prevBtn = document.getElementById('prev-btn');\r\n const nextBtn = document.getElementById('next-btn');\r\n const todayBtn = document.getElementById('today-btn');\r\n const viewSelect = document.getElementById('view-select');\r\n const sidebarToggle = document.getElementById('sidebar-toggle');\r\n const sidebar = document.getElementById('sidebar');\r\n\r\n \/\/ Mini calendar elements\r\n const miniMonthYearEl = document.getElementById('mini-month-year');\r\n const miniDaysGrid = document.getElementById('mini-days-grid');\r\n const miniPrev = document.getElementById('mini-prev');\r\n const miniNext = document.getElementById('mini-next');\r\n\r\n \/\/ Modals\r\n const eventModal = document.getElementById('event-modal');\r\n const closeModalBtn = document.getElementById('close-modal-btn');\r\n const cancelEventBtn = document.getElementById('cancel-event-btn');\r\n const eventForm = document.getElementById('event-form');\r\n const createEventBtn = document.getElementById('create-event-btn');\r\n const deleteEventBtn = document.getElementById('delete-event-btn');\r\n const modalTitleText = document.getElementById('modal-title-text');\r\n\r\n const settingsModal = document.getElementById('settings-modal');\r\n const settingsOpenBtn = document.getElementById('settings-open-btn');\r\n const closeSettingsBtn = document.getElementById('close-settings-btn');\r\n const addSharedBtn = document.getElementById('add-shared-btn');\r\n const sharedCalForm = document.getElementById('shared-cal-form');\r\n const configuredSharedList = document.getElementById('configured-shared-list');\r\n const sharedCalendarsList = document.getElementById('shared-calendars-list');\r\n const eventCalendarSelect = document.getElementById('event-calendar-select');\r\n\r\n \/\/ Toast notification\r\n function showToast(message) {\r\n const toast = document.getElementById('toast');\r\n toast.textContent = message;\r\n toast.classList.remove('opacity-0');\r\n toast.classList.add('opacity-100');\r\n setTimeout(() => {\r\n toast.classList.remove('opacity-100');\r\n toast.classList.add('opacity-0');\r\n }, 3000);\r\n }\r\n\r\n \/\/ Save state to localStorage\r\n function saveData() {\r\n localStorage.setItem('gcal_clone_events', JSON.stringify(events));\r\n localStorage.setItem('gcal_clone_shared', JSON.stringify(sharedCalendars));\r\n }\r\n\r\n \/\/ Initialize application\r\n function initApp() {\r\n setupEventListeners();\r\n renderAll();\r\n }\r\n\r\n function setupEventListeners() {\r\n prevBtn.addEventListener('click', () => navigatePeriod(-1));\r\n nextBtn.addEventListener('click', () => navigatePeriod(1));\r\n todayBtn.addEventListener('click', () => {\r\n currentDate = new Date();\r\n renderAll();\r\n });\r\n\r\n viewSelect.addEventListener('change', (e) => {\r\n currentView = e.target.value;\r\n renderAll();\r\n });\r\n\r\n sidebarToggle.addEventListener('click', () => {\r\n sidebar.classList.toggle('-ml-64');\r\n });\r\n\r\n miniPrev.addEventListener('click', () => {\r\n miniMonthDate.setMonth(miniMonthDate.getMonth() - 1);\r\n renderMiniCalendar();\r\n });\r\n miniNext.addEventListener('click', () => {\r\n miniMonthDate.setMonth(miniMonthDate.getMonth() + 1);\r\n renderMiniCalendar();\r\n });\r\n\r\n \/\/ Modal triggers\r\n createEventBtn.addEventListener('click', () => openEventModal());\r\n closeModalBtn.addEventListener('click', () => closeEventModal());\r\n cancelEventBtn.addEventListener('click', () => closeEventModal());\r\n eventModal.addEventListener('click', (e) => {\r\n if (e.target === eventModal) closeEventModal();\r\n });\r\n\r\n settingsOpenBtn.addEventListener('click', () => settingsModal.classList.remove('hidden'));\r\n closeSettingsBtn.addEventListener('click', () => settingsModal.classList.add('hidden'));\r\n settingsModal.addEventListener('click', (e) => {\r\n if (e.target === settingsModal) settingsModal.classList.add('hidden');\r\n });\r\n addSharedBtn.addEventListener('click', () => settingsModal.classList.remove('hidden'));\r\n\r\n \/\/ All day checkbox toggle time inputs\r\n document.getElementById('event-all-day').addEventListener('change', (e) => {\r\n const timeInputs = document.getElementById('time-inputs');\r\n if (e.target.checked) {\r\n timeInputs.classList.add('opacity-50', 'pointer-events-none');\r\n } else {\r\n timeInputs.classList.remove('opacity-50', 'pointer-events-none');\r\n }\r\n });\r\n\r\n \/\/ Event Form Submit\r\n eventForm.addEventListener('submit', (e) => {\r\n e.preventDefault();\r\n const id = document.getElementById('event-id').value || 'evt-' + Date.now();\r\n const title = document.getElementById('event-title').value;\r\n const date = document.getElementById('event-date').value;\r\n const allDay = document.getElementById('event-all-day').checked;\r\n const startTime = document.getElementById('event-start-time').value;\r\n const endTime = document.getElementById('event-end-time').value;\r\n const calendarId = document.getElementById('event-calendar-select').value;\r\n const guests = document.getElementById('event-guests').value;\r\n const description = document.getElementById('event-description').value;\r\n\r\n const eventData = { id, title, date, allDay, startTime, endTime, calendarId, guests, description };\r\n\r\n const existingIndex = events.findIndex(ev => ev.id === id);\r\n if (existingIndex >= 0) {\r\n events[existingIndex] = eventData;\r\n showToast('Event updated successfully');\r\n } else {\r\n events.push(eventData);\r\n showToast('Event created successfully');\r\n }\r\n\r\n saveData();\r\n closeEventModal();\r\n renderAll();\r\n\r\n if (guests && guests.trim() !== '') {\r\n setTimeout(() => {\r\n showToast(`\ud83d\udce7 Email invitations sent to: ${guests}`);\r\n }, 800);\r\n }\r\n });\r\n\r\n deleteEventBtn.addEventListener('click', () => {\r\n const id = document.getElementById('event-id').value;\r\n if (id) {\r\n events = events.filter(ev => ev.id !== id);\r\n saveData();\r\n closeEventModal();\r\n showToast('Event deleted');\r\n renderAll();\r\n }\r\n });\r\n\r\n \/\/ Shared Calendar Form Submit\r\n sharedCalForm.addEventListener('submit', (e) => {\r\n e.preventDefault();\r\n const name = document.getElementById('shared-cal-name').value;\r\n const url = document.getElementById('shared-cal-url').value;\r\n const color = document.getElementById('shared-cal-color').value;\r\n\r\n const newShared = {\r\n id: 'shared-' + Date.now(),\r\n name,\r\n url,\r\n color,\r\n enabled: true,\r\n events: [\r\n { id: 'sh-evt-' + Date.now(), title: `${name} Sample Event`, date: new Date().toISOString().split('T')[0], allDay: true }\r\n ]\r\n };\r\n\r\n sharedCalendars.push(newShared);\r\n saveData();\r\n sharedCalForm.reset();\r\n showToast('Shared calendar added');\r\n renderSharedCalendarsList();\r\n renderAll();\r\n });\r\n }\r\n\r\n function navigatePeriod(direction) {\r\n if (currentView === 'month') {\r\n currentDate.setMonth(currentDate.getMonth() + direction);\r\n } else if (currentView === 'week') {\r\n currentDate.setDate(currentDate.getDate() + (direction * 7));\r\n } else if (currentView === 'day') {\r\n currentDate.setDate(currentDate.getDate() + direction);\r\n }\r\n renderAll();\r\n }\r\n\r\n function renderAll() {\r\n updateHeaderTitle();\r\n renderMiniCalendar();\r\n renderSharedCalendarsList();\r\n updateCalendarSelectOptions();\r\n\r\n if (currentView === 'month') {\r\n renderMonthView();\r\n } else if (currentView === 'week') {\r\n renderWeekView();\r\n } else if (currentView === 'day') {\r\n renderDayView();\r\n }\r\n }\r\n\r\n function updateHeaderTitle() {\r\n const options = currentView === 'day' \r\n ? { month: 'long', day: 'numeric', year: 'numeric' }\r\n : { month: 'long', year: 'numeric' };\r\n currentMonthYearEl.textContent = currentDate.toLocaleDateString('en-US', options);\r\n }\r\n\r\n \/\/ Mini Calendar Rendering\r\n function renderMiniCalendar() {\r\n const year = miniMonthDate.getFullYear();\r\n const month = miniMonthDate.getMonth();\r\n miniMonthYearEl.textContent = miniMonthDate.toLocaleDateString('en-US', { month: 'long', year: 'numeric' });\r\n\r\n const firstDayIndex = new Date(year, month, 1).getDay();\r\n const totalDays = new Date(year, month + 1, 0).getDate();\r\n const prevTotalDays = new Date(year, month, 0).getDate();\r\n\r\n let html = '';\r\n \/\/ Previous month trailing days\r\n for (let i = firstDayIndex - 1; i >= 0; i--) {\r\n html += `<span class=\"py-1 text-gray-300\">${prevTotalDays - i}<\/span>`;\r\n }\r\n\r\n const todayStr = new Date().toISOString().split('T')[0];\r\n\r\n \/\/ Current month days\r\n for (let d = 1; d <= totalDays; d++) {\r\n const thisDateStr = `${year}-${String(month + 1).padStart(2, '0')}-${String(d).padStart(2, '0')}`;\r\n const isToday = thisDateStr === todayStr;\r\n const isSelected = currentDate.toISOString().split('T')[0] === thisDateStr;\r\n\r\n let classes = \"py-1 rounded-full cursor-pointer hover:bg-gray-200 transition \";\r\n if (isToday) classes += \"bg-blue-600 text-white font-semibold hover:bg-blue-700 \";\r\n else if (isSelected) classes += \"bg-blue-100 text-blue-700 font-semibold \";\r\n else classes += \"text-gray-700\";\r\n\r\n html += `<span class=\"${classes}\" onclick=\"selectDateFromMini(${year}, ${month}, ${d})\">${d}<\/span>`;\r\n }\r\n\r\n miniDaysGrid.innerHTML = html;\r\n }\r\n\r\n window.selectDateFromMini = function(year, month, day) {\r\n currentDate = new Date(year, month, day);\r\n renderAll();\r\n }\r\n\r\n function renderSharedCalendarsList() {\r\n \/\/ Sidebar checkboxes\r\n let html = '';\r\n sharedCalendars.forEach(cal => {\r\n html += `\r\n <label class=\"flex items-center space-x-2 px-2 py-1.5 rounded hover:bg-gray-200 cursor-pointer text-sm\">\r\n <input type=\"checkbox\" ${cal.enabled ? 'checked' : ''} class=\"rounded text-blue-600 focus:ring-blue-500 h-4 w-4 shared-filter-checkbox cursor-pointer\" data-id=\"${cal.id}\">\r\n <span class=\"w-3 h-3 rounded-full inline-block\" style=\"background-color: ${cal.color}\"><\/span>\r\n <span class=\"text-gray-700 font-medium truncate\" title=\"${cal.name}\">${cal.name}<\/span>\r\n <\/label>\r\n `;\r\n });\r\n sharedCalendarsList.innerHTML = html;\r\n\r\n \/\/ Bind shared filter checkboxes\r\n document.querySelectorAll('.shared-filter-checkbox').forEach(chk => {\r\n chk.addEventListener('change', (e) => {\r\n const id = e.target.getAttribute('data-id');\r\n const cal = sharedCalendars.find(c => c.id === id);\r\n if (cal) {\r\n cal.enabled = e.target.checked;\r\n saveData();\r\n renderAll();\r\n }\r\n });\r\n });\r\n\r\n \/\/ Modal settings list\r\n let modalHtml = '';\r\n sharedCalendars.forEach(cal => {\r\n modalHtml += `\r\n <div class=\"flex items-center justify-between p-2 bg-gray-50 rounded border border-google-border text-sm\">\r\n <div class=\"flex items-center space-x-2 truncate\">\r\n <span class=\"w-3 h-3 rounded-full flex-shrink-0\" style=\"background-color: ${cal.color}\"><\/span>\r\n <span class=\"font-medium text-gray-700 truncate\">${cal.name}<\/span>\r\n <\/div>\r\n <button onclick=\"removeSharedCalendar('${cal.id}')\" class=\"text-red-500 hover:text-red-700 p-1 cursor-pointer\"><i class=\"fa-solid fa-trash-can text-xs\"><\/i><\/button>\r\n <\/div>\r\n `;\r\n });\r\n configuredSharedList.innerHTML = modalHtml || '<p class=\"text-xs text-gray-400\">No shared calendars added yet.<\/p>';\r\n }\r\n\r\n window.removeSharedCalendar = function(id) {\r\n sharedCalendars = sharedCalendars.filter(c => c.id !== id);\r\n saveData();\r\n renderSharedCalendarsList();\r\n renderAll();\r\n showToast('Shared calendar removed');\r\n }\r\n\r\n function updateCalendarSelectOptions() {\r\n let html = `<option value=\"primary\">Personal Events<\/option>`;\r\n sharedCalendars.forEach(cal => {\r\n if (cal.enabled) {\r\n html += `<option value=\"${cal.id}\">${cal.name}<\/option>`;\r\n }\r\n });\r\n eventCalendarSelect.innerHTML = html;\r\n }\r\n\r\n \/\/ Get all active events combining primary and enabled shared calendars\r\n function getActiveEvents() {\r\n let allEvents = [...events];\r\n sharedCalendars.forEach(cal => {\r\n if (cal.enabled && cal.events) {\r\n cal.events.forEach(ev => {\r\n allEvents.push({ ...ev, calendarId: cal.id, color: cal.color, isShared: true });\r\n });\r\n }\r\n });\r\n return allEvents;\r\n }\r\n\r\n \/\/ --- MONTH VIEW ---\r\n function renderMonthView() {\r\n const year = currentDate.getFullYear();\r\n const month = currentDate.getMonth();\r\n\r\n const firstDayIndex = new Date(year, month, 1).getDay();\r\n const totalDays = new Date(year, month + 1, 0).getDate();\r\n const prevTotalDays = new Date(year, month, 0).getDate();\r\n\r\n const dayNames = ['SUN', 'MON', 'TUE', 'WED', 'THU', 'FRI', 'SAT'];\r\n let html = `\r\n <div class=\"grid grid-cols-7 border-b border-google-border text-center text-xs font-semibold text-gray-500 py-2 bg-gray-50 flex-shrink-0\">\r\n ${dayNames.map(d => `<div>${d}<\/div>`).join('')}\r\n <\/div>\r\n <div class=\"flex-1 calendar-grid bg-google-border gap-px overflow-y-auto\">\r\n `;\r\n\r\n const todayStr = new Date().toISOString().split('T')[0];\r\n const allEvents = getActiveEvents();\r\n\r\n let dayCount = 1;\r\n let nextMonthDay = 1;\r\n const cellsCount = (firstDayIndex + totalDays > 35) ? 42 : 35;\r\n\r\n for (let i = 0; i < cellsCount; i++) {\r\n let cellDateStr = '';\r\n let isCurrentMonth = false;\r\n let cellNumDisplay = '';\r\n\r\n if (i < firstDayIndex) {\r\n const prevDayNum = prevTotalDays - (firstDayIndex - 1 - i);\r\n const prevMonth = month === 0 ? 11 : month - 1;\r\n const prevYear = month === 0 ? year - 1 : year;\r\n cellDateStr = `${prevYear}-${String(prevMonth + 1).padStart(2, '0')}-${String(prevDayNum).padStart(2, '0')}`;\r\n cellNumDisplay = prevDayNum;\r\n } else if (dayCount <= totalDays) {\r\n cellDateStr = `${year}-${String(month + 1).padStart(2, '0')}-${String(dayCount).padStart(2, '0')}`;\r\n cellNumDisplay = dayCount;\r\n isCurrentMonth = true;\r\n dayCount++;\r\n } else {\r\n const nextMonth = month === 11 ? 0 : month + 1;\r\n const nextYear = month === 11 ? year + 1 : year;\r\n cellDateStr = `${nextYear}-${String(nextMonth + 1).padStart(2, '0')}-${String(nextMonthDay).padStart(2, '0')}`;\r\n cellNumDisplay = nextMonthDay;\r\n nextMonthDay++;\r\n }\r\n\r\n const isToday = cellDateStr === todayStr;\r\n const dayEvents = allEvents.filter(ev => ev.date === cellDateStr);\r\n\r\n html += `\r\n <div class=\"bg-white p-1 flex flex-col overflow-hidden hover:bg-gray-50\/50 transition cursor-pointer group min-h-[100px]\" onclick=\"openEventModalForDate('${cellDateStr}')\">\r\n <div class=\"flex items-center justify-between mb-1\">\r\n <span class=\"text-xs font-medium px-1.5 py-0.5 rounded-full ${isToday ? 'bg-google-blue text-white' : (isCurrentMonth ? 'text-gray-700' : 'text-gray-400')}\">\r\n ${cellNumDisplay}\r\n <\/span>\r\n <\/div>\r\n <div class=\"flex-1 overflow-y-auto space-y-1\">\r\n `;\r\n\r\n dayEvents.forEach(ev => {\r\n const isShared = ev.isShared;\r\n const badgeBg = isShared ? (ev.color || '#34A853') : '#1a73e8';\r\n const timeText = ev.allDay ? '' : `${ev.startTime} `;\r\n html += `\r\n <div onclick=\"event.stopPropagation(); editEvent('${ev.id}')\" class=\"text-xs px-2 py-0.5 rounded truncate text-white shadow-sm hover:opacity-90 font-medium transition cursor-pointer\" style=\"background-color: ${badgeBg}\" title=\"${ev.title}\">\r\n ${timeText}${ev.title}\r\n <\/div>\r\n `;\r\n });\r\n\r\n html += `\r\n <\/div>\r\n <\/div>\r\n `;\r\n }\r\n\r\n html += `<\/div>`;\r\n viewContainer.innerHTML = html;\r\n }\r\n\r\n \/\/ --- WEEK VIEW ---\r\n function renderWeekView() {\r\n const curr = new Date(currentDate);\r\n const firstday = new Date(curr.setDate(curr.getDate() - curr.getDay()));\r\n \r\n let weekDays = [];\r\n for (let i = 0; i < 7; i++) {\r\n let d = new Date(firstday);\r\n d.setDate(d.getDate() + i);\r\n weekDays.push(d);\r\n }\r\n\r\n const todayStr = new Date().toISOString().split('T')[0];\r\n const allEvents = getActiveEvents();\r\n\r\n let html = `\r\n <div class=\"grid grid-cols-8 border-b border-google-border bg-gray-50 flex-shrink-0 text-xs font-semibold text-gray-500 py-2 text-center\">\r\n <div>TIME<\/div>\r\n ${weekDays.map(d => {\r\n const dStr = d.toISOString().split('T')[0];\r\n const isToday = dStr === todayStr;\r\n return `<div>${d.toLocaleDateString('en-US', { weekday: 'short' })} <span class=\"${isToday ? 'bg-google-blue text-white rounded-full px-1.5 py-0.5' : ''}\">${d.getDate()}<\/span><\/div>`;\r\n }).join('')}\r\n <\/div>\r\n <div class=\"flex-1 overflow-y-auto divide-y divide-google-border\">\r\n `;\r\n\r\n for (let hour = 0; hour < 24; hour++) {\r\n const hourFormatted = `${String(hour).padStart(2, '0')}:00`;\r\n html += `<div class=\"grid grid-cols-8 min-h-[60px] border-b border-google-border text-xs\">`;\r\n html += `<div class=\"p-2 text-right text-gray-400 font-medium pr-3\">${hourFormatted}<\/div>`;\r\n\r\n weekDays.forEach(d => {\r\n const dStr = d.toISOString().split('T')[0];\r\n const slotEvents = allEvents.filter(ev => {\r\n if (ev.date !== dStr) return false;\r\n if (ev.allDay && hour === 0) return true;\r\n if (!ev.startTime) return hour === 9;\r\n const evHour = parseInt(ev.startTime.split(':')[0]);\r\n return evHour === hour;\r\n });\r\n\r\n html += `<div class=\"border-l border-google-border p-1 hover:bg-gray-50 cursor-pointer relative\" onclick=\"openEventModalForDate('${dStr}', '${hourFormatted}')\">`;\r\n slotEvents.forEach(ev => {\r\n const badgeBg = ev.isShared ? (ev.color || '#34A853') : '#1a73e8';\r\n html += `\r\n <div onclick=\"event.stopPropagation(); editEvent('${ev.id}')\" class=\"text-white px-1.5 py-0.5 rounded text-[11px] font-medium truncate mb-1 shadow-sm cursor-pointer\" style=\"background-color: ${badgeBg}\">\r\n ${ev.title}\r\n <\/div>\r\n `;\r\n });\r\n html += `<\/div>`;\r\n });\r\n\r\n html += `<\/div>`;\r\n }\r\n\r\n html += `<\/div>`;\r\n viewContainer.innerHTML = html;\r\n }\r\n\r\n \/\/ --- DAY VIEW ---\r\n function renderDayView() {\r\n const dStr = currentDate.toISOString().split('T')[0];\r\n const allEvents = getActiveEvents();\r\n const dayEvents = allEvents.filter(ev => ev.date === dStr);\r\n\r\n let html = `\r\n <div class=\"p-4 border-b border-google-border bg-gray-50 flex items-center justify-between flex-shrink-0\">\r\n <span class=\"font-semibold text-gray-700 text-lg\">${currentDate.toLocaleDateString('en-US', { weekday: 'long', month: 'long', day: 'numeric', year: 'numeric' })}<\/span>\r\n <button onclick=\"openEventModalForDate('${dStr}')\" class=\"px-3 py-1.5 bg-google-blue text-white rounded text-sm font-medium shadow hover:bg-google-hover cursor-pointer\">Add Event Today<\/button>\r\n <\/div>\r\n <div class=\"flex-1 overflow-y-auto divide-y divide-google-border\">\r\n `;\r\n\r\n for (let hour = 0; hour < 24; hour++) {\r\n const hourFormatted = `${String(hour).padStart(2, '0')}:00`;\r\n const slotEvents = dayEvents.filter(ev => {\r\n if (ev.allDay && hour === 0) return true;\r\n if (!ev.startTime) return hour === 9;\r\n const evHour = parseInt(ev.startTime.split(':')[0]);\r\n return evHour === hour;\r\n });\r\n\r\n html += `\r\n <div class=\"flex min-h-[70px] border-b border-google-border hover:bg-gray-50 cursor-pointer\" onclick=\"openEventModalForDate('${dStr}', '${hourFormatted}')\">\r\n <div class=\"w-24 p-3 text-right text-xs text-gray-400 font-medium\">${hourFormatted}<\/div>\r\n <div class=\"flex-1 p-2 border-l border-google-border space-y-2\">\r\n `;\r\n\r\n slotEvents.forEach(ev => {\r\n const badgeBg = ev.isShared ? (ev.color || '#34A853') : '#1a73e8';\r\n html += `\r\n <div onclick=\"event.stopPropagation(); editEvent('${ev.id}')\" class=\"p-2 rounded text-white shadow-sm font-medium text-sm flex items-center justify-between cursor-pointer\" style=\"background-color: ${badgeBg}\">\r\n <div>\r\n <div class=\"font-bold\">${ev.title}<\/div>\r\n ${ev.description ? `<div class=\"text-xs opacity-90 font-normal\">${ev.description}<\/div>` : ''}\r\n <\/div>\r\n <span class=\"text-xs opacity-80\">${ev.allDay ? 'All Day' : `${ev.startTime} - ${ev.endTime}`}<\/span>\r\n <\/div>\r\n `;\r\n });\r\n\r\n html += `\r\n <\/div>\r\n <\/div>\r\n `;\r\n }\r\n\r\n html += `<\/div>`;\r\n viewContainer.innerHTML = html;\r\n }\r\n\r\n \/\/ Event Modal Controls\r\n window.openEventModalForDate = function(dateStr, timeStr = '10:00') {\r\n openEventModal({ date: dateStr, startTime: timeStr, endTime: timeStr ? addOneHour(timeStr) : '' });\r\n }\r\n\r\n function addOneHour(timeStr) {\r\n const parts = timeStr.split(':');\r\n let h = parseInt(parts[0]) + 1;\r\n if (h > 23) h = 23;\r\n return `${String(h).padStart(2, '0')}:${parts[1]}`;\r\n }\r\n\r\n function openEventModal(prefill = {}) {\r\n eventForm.reset();\r\n document.getElementById('event-id').value = prefill.id || '';\r\n document.getElementById('event-title').value = prefill.title || '';\r\n document.getElementById('event-date').value = prefill.date || currentDate.toISOString().split('T')[0];\r\n document.getElementById('event-start-time').value = prefill.startTime || '10:00';\r\n document.getElementById('event-end-time').value = prefill.endTime || '11:00';\r\n document.getElementById('event-all-day').checked = prefill.allDay || false;\r\n document.getElementById('event-guests').value = prefill.guests || '';\r\n document.getElementById('event-description').value = prefill.description || '';\r\n \r\n if (prefill.id) {\r\n modalTitleText.textContent = 'Edit event';\r\n deleteEventBtn.classList.remove('hidden');\r\n } else {\r\n modalTitleText.textContent = 'Add event';\r\n deleteEventBtn.classList.add('hidden');\r\n }\r\n\r\n eventModal.classList.remove('hidden');\r\n document.getElementById('event-title').focus();\r\n }\r\n\r\n window.editEvent = function(id) {\r\n const ev = events.find(e => e.id === id);\r\n if (ev) {\r\n openEventModal(ev);\r\n } else {\r\n showToast('Cannot edit shared calendar read-only events');\r\n }\r\n }\r\n\r\n function closeEventModal() {\r\n eventModal.classList.add('hidden');\r\n }\r\n\r\n \/\/ Run on load\r\n window.onload = initApp;\r\n <\/script>\r\n<\/body>\r\n<\/html>\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":"<p>Google Calendar Clone Calendar Today Loading… MonthWeekDay G Create SMTWTFS My Calendars Personal Events Shared \/ ICS Calendars Add event to All day Personal Events Invited guests will receive simulated email notifications. Delete Cancel Save Shared Google Calendars & ICS Feeds Add a Shared Calendar or Public ICS feed You can add public Google Calendar […]<\/p>\n","protected":false},"author":1,"featured_media":186,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"site-sidebar-layout":"no-sidebar","site-content-layout":"page-builder","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"default","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":"","_members_access_role":[],"_members_access_error":""},"class_list":["post-21049","page","type-page","status-publish","has-post-thumbnail","hentry"],"acf":[],"a3_pvc":{"activated":false,"total_views":0,"today_views":0},"_links":{"self":[{"href":"https:\/\/jobsnocap.com\/lo\/wp-json\/wp\/v2\/pages\/21049","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/jobsnocap.com\/lo\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/jobsnocap.com\/lo\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/jobsnocap.com\/lo\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/jobsnocap.com\/lo\/wp-json\/wp\/v2\/comments?post=21049"}],"version-history":[{"count":12,"href":"https:\/\/jobsnocap.com\/lo\/wp-json\/wp\/v2\/pages\/21049\/revisions"}],"predecessor-version":[{"id":21091,"href":"https:\/\/jobsnocap.com\/lo\/wp-json\/wp\/v2\/pages\/21049\/revisions\/21091"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/jobsnocap.com\/lo\/wp-json\/wp\/v2\/media\/186"}],"wp:attachment":[{"href":"https:\/\/jobsnocap.com\/lo\/wp-json\/wp\/v2\/media?parent=21049"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t

\n\t\t\t\t\t

\n\t\t\t\t

\n\t\t\t\t\t\r\n\r\n\r\n \r\n \r\n Google Calendar Clone<\/title>\r\n \r\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\r\n \r\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\r\n \r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@300;400;500;600;700&display=swap\" rel=\"stylesheet\">\r\n <script>\r\n tailwind.config = {\r\n theme: {\r\n extend: {\r\n fontFamily: {\r\n sans: ['Inter', 'sans-serif'],\r\n },\r\n colors: {\r\n google: {\r\n blue: '#1a73e8',\r\n hover: '#1557b0',\r\n light: '#e8f0fe',\r\n border: '#dadce0',\r\n text: '#3c4043',\r\n sidebar: '#f8f9fa'\r\n }\r\n }\r\n }\r\n }\r\n }\r\n <\/script>\r\n <style>\r\n \/* CSS Isolation Wrapper to prevent WordPress \/ Elementor theme inheritance *\/\r\n #gcal-clone-root {\r\n all: initial;\r\n font-family: 'Inter', sans-serif !important;\r\n color: #3c4043;\r\n box-sizing: border-box;\r\n display: flex;\r\n flex-direction: column;\r\n width: 100%;\r\n height: 100%;\r\n min-height: 750px;\r\n background-color: #ffffff;\r\n position: relative;\r\n }\r\n\r\n \/* Ensure all elements inside root use border-box *\/\r\n #gcal-clone-root *, #gcal-clone-root *::before, #gcal-clone-root *::after {\r\n box-sizing: border-box;\r\n }\r\n\r\n #gcal-clone-root input, #gcal-clone-root button, #gcal-clone-root select, #gcal-clone-root textarea {\r\n font-family: 'Inter', sans-serif;\r\n }\r\n\r\n \/* Custom scrollbar for clean Google look *\/\r\n #gcal-clone-root ::-webkit-scrollbar { width: 8px; height: 8px; }\r\n #gcal-clone-root ::-webkit-scrollbar-track { background: transparent; }\r\n #gcal-clone-root ::-webkit-scrollbar-thumb { background: #dadce0; border-radius: 4px; }\r\n #gcal-clone-root ::-webkit-scrollbar-thumb:hover { background: #bdc1c6; }\r\n \r\n .calendar-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }\r\n <\/style>\r\n<\/head>\r\n<body class=\"h-full flex flex-col bg-white text-google-text overflow-hidden\">\r\n\r\n \r\n <div id=\"gcal-clone-root\" class=\"h-full flex flex-col bg-white text-google-text overflow-hidden\">\r\n\r\n \r\n <header class=\"flex items-center justify-between px-4 py-2 border-b border-google-border bg-white select-none z-20 flex-shrink-0\">\r\n <div class=\"flex items-center space-x-4\">\r\n <button id=\"sidebar-toggle\" class=\"p-2 hover:bg-gray-100 rounded-full text-gray-600 transition cursor-pointer\" title=\"Main menu\">\r\n <i class=\"fa-solid fa-bars text-lg\"><\/i>\r\n <\/button>\r\n <div class=\"flex items-center space-x-2\">\r\n <div class=\"w-10 h-10 flex items-center justify-center bg-blue-500 text-white rounded-lg font-bold text-xl shadow-sm\">\r\n <i class=\"fa-regular fa-calendar-days\"><\/i>\r\n <\/div>\r\n <span class=\"text-xl font-medium tracking-tight text-gray-700 hidden sm:inline\">Calendar<\/span>\r\n <\/div>\r\n <button id=\"today-btn\" class=\"px-4 py-2 border border-google-border rounded-md text-sm font-medium hover:bg-gray-50 transition text-gray-700 shadow-sm cursor-pointer\">\r\n Today\r\n <\/button>\r\n <div class=\"flex items-center space-x-1\">\r\n <button id=\"prev-btn\" class=\"p-2 hover:bg-gray-100 rounded-full text-gray-600 transition cursor-pointer\" title=\"Previous period\">\r\n <i class=\"fa-solid fa-chevron-left text-sm\"><\/i>\r\n <\/button>\r\n <button id=\"next-btn\" class=\"p-2 hover:bg-gray-100 rounded-full text-gray-600 transition cursor-pointer\" title=\"Next period\">\r\n <i class=\"fa-solid fa-chevron-right text-sm\"><\/i>\r\n <\/button>\r\n <\/div>\r\n <h1 id=\"current-month-year\" class=\"text-xl font-normal text-gray-800 min-w-[180px]\">Loading...<\/h1>\r\n <\/div>\r\n\r\n <div class=\"flex items-center space-x-3\">\r\n \r\n <div class=\"relative\">\r\n <select id=\"view-select\" class=\"bg-white border border-google-border rounded-md px-3 py-2 text-sm font-medium text-gray-700 focus:outline-none focus:ring-2 focus:ring-google-blue cursor-pointer shadow-sm\">\r\n <option value=\"month\">Month<\/option>\r\n <option value=\"week\">Week<\/option>\r\n <option value=\"day\">Day<\/option>\r\n <\/select>\r\n <\/div>\r\n <button id=\"settings-open-btn\" class=\"p-2 hover:bg-gray-100 rounded-full text-gray-600 transition cursor-pointer\" title=\"Settings & Shared Calendars\">\r\n <i class=\"fa-solid fa-gear text-lg\"><\/i>\r\n <\/button>\r\n <div class=\"w-8 h-8 rounded-full bg-purple-600 text-white flex items-center justify-center font-semibold text-sm shadow-sm\" title=\"Guest User\">\r\n G\r\n <\/div>\r\n <\/div>\r\n <\/header>\r\n\r\n \r\n <div class=\"flex flex-1 overflow-hidden relative\">\r\n \r\n \r\n <aside id=\"sidebar\" class=\"w-64 border-r border-google-border bg-google-sidebar flex flex-col p-4 flex-shrink-0 transition-all duration-300 z-15\">\r\n \r\n <button id=\"create-event-btn\" class=\"flex items-center space-x-3 bg-white border border-google-border rounded-full py-3 px-6 shadow-md hover:shadow-lg transition transform active:scale-95 mb-6 group w-max cursor-pointer\">\r\n <svg class=\"w-8 h-8 text-google-blue\" viewBox=\"0 0 36 36\">\r\n <path fill=\"#34A853\" d=\"M16 16v14h4V20z\"><\/path>\r\n <path fill=\"#4285F4\" d=\"M30 16H20l-4 4h14z\"><\/path>\r\n <path fill=\"#FBBC05\" d=\"M6 16h10l4 4H6z\"><\/path>\r\n <path fill=\"#EA4335\" d=\"M20 16V2h-4v14z\"><\/path>\r\n <path fill=\"none\" d=\"M0 0h36v36H0z\"><\/path>\r\n <\/svg>\r\n <span class=\"text-sm font-medium text-gray-700 group-hover:text-google-blue pr-2\">Create<\/span>\r\n <\/button>\r\n\r\n \r\n <div class=\"mb-6 select-none\">\r\n <div class=\"flex items-center justify-between mb-2 px-1\">\r\n <span id=\"mini-month-year\" class=\"text-sm font-medium text-gray-700\"><\/span>\r\n <div class=\"flex space-x-1\">\r\n <button id=\"mini-prev\" class=\"p-1 hover:bg-gray-200 rounded-full text-gray-600 cursor-pointer\"><i class=\"fa-solid fa-chevron-left text-xs\"><\/i><\/button>\r\n <button id=\"mini-next\" class=\"p-1 hover:bg-gray-200 rounded-full text-gray-600 cursor-pointer\"><i class=\"fa-solid fa-chevron-right text-xs\"><\/i><\/button>\r\n <\/div>\r\n <\/div>\r\n <div class=\"grid grid-cols-7 text-center text-xs text-gray-500 mb-1\">\r\n <span>S<\/span><span>M<\/span><span>T<\/span><span>W<\/span><span>T<\/span><span>F<\/span><span>S<\/span>\r\n <\/div>\r\n <div id=\"mini-days-grid\" class=\"grid grid-cols-7 text-center text-xs gap-y-1\">\r\n \r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"flex-1 overflow-y-auto pr-1\">\r\n <div class=\"text-xs font-semibold text-gray-500 uppercase tracking-wider mb-2 px-1\">My Calendars<\/div>\r\n <div class=\"space-y-1 mb-4\">\r\n <label class=\"flex items-center space-x-2 px-2 py-1.5 rounded hover:bg-gray-200 cursor-pointer text-sm\">\r\n <input type=\"checkbox\" checked class=\"rounded text-blue-600 focus:ring-blue-500 h-4 w-4 filter-checkbox cursor-pointer\" data-calendar=\"primary\">\r\n <span class=\"w-3 h-3 rounded-full bg-blue-600 inline-block\"><\/span>\r\n <span class=\"text-gray-700 font-medium\">Personal Events<\/span>\r\n <\/label>\r\n <\/div>\r\n\r\n <div class=\"flex items-center justify-between px-1 mb-2\">\r\n <span class=\"text-xs font-semibold text-gray-500 uppercase tracking-wider\">Shared \/ ICS Calendars<\/span>\r\n <button id=\"add-shared-btn\" class=\"text-gray-500 hover:text-gray-800 p-1 cursor-pointer\" title=\"Add Shared Google Calendar \/ ICS\"><i class=\"fa-solid fa-plus text-xs\"><\/i><\/button>\r\n <\/div>\r\n <div id=\"shared-calendars-list\" class=\"space-y-1\">\r\n \r\n <\/div>\r\n <\/div>\r\n <\/aside>\r\n\r\n \r\n <main class=\"flex-1 flex flex-col overflow-hidden bg-white relative\" id=\"calendar-viewport\">\r\n \r\n <div id=\"view-container\" class=\"flex-1 flex flex-col overflow-hidden\">\r\n \r\n <\/div>\r\n <\/main>\r\n <\/div>\r\n\r\n \r\n <div id=\"event-modal\" class=\"fixed inset-0 bg-black\/40 z-50 flex items-center justify-center hidden\">\r\n <div class=\"bg-white rounded-lg shadow-2xl w-full max-w-lg overflow-hidden transform transition-all\">\r\n <div class=\"bg-gray-100 px-4 py-3 flex items-center justify-between border-b border-google-border\">\r\n <span id=\"modal-title-text\" class=\"font-medium text-gray-700\">Add event<\/span>\r\n <button id=\"close-modal-btn\" class=\"text-gray-500 hover:text-gray-700 p-1 rounded-full hover:bg-gray-200 cursor-pointer\">\r\n <i class=\"fa-solid fa-xmark text-lg\"><\/i>\r\n <\/button>\r\n <\/div>\r\n <form id=\"event-form\" class=\"p-6 space-y-4\">\r\n <input type=\"hidden\" id=\"event-id\">\r\n <div>\r\n <input type=\"text\" id=\"event-title\" required placeholder=\"Add title\" class=\"w-full text-xl font-normal border-b-2 border-google-blue focus:outline-none py-1 placeholder-gray-400\">\r\n <\/div>\r\n \r\n <div class=\"flex items-center space-x-3 text-gray-600\">\r\n <i class=\"fa-regular fa-clock w-5 text-center\"><\/i>\r\n <div class=\"flex flex-wrap items-center gap-2\">\r\n <input type=\"date\" id=\"event-date\" required class=\"border border-google-border rounded px-2 py-1 text-sm focus:outline-none focus:ring-1 focus:ring-google-blue\">\r\n <div id=\"time-inputs\" class=\"flex items-center space-x-2\">\r\n <input type=\"time\" id=\"event-start-time\" class=\"border border-google-border rounded px-2 py-1 text-sm focus:outline-none focus:ring-1 focus:ring-google-blue\">\r\n <span>to<\/span>\r\n <input type=\"time\" id=\"event-end-time\" class=\"border border-google-border rounded px-2 py-1 text-sm focus:outline-none focus:ring-1 focus:ring-google-blue\">\r\n <\/div>\r\n <label class=\"flex items-center space-x-1 text-xs ml-2 cursor-pointer\">\r\n <input type=\"checkbox\" id=\"event-all-day\" class=\"rounded text-blue-600 cursor-pointer\">\r\n <span>All day<\/span>\r\n <\/label>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"flex items-center space-x-3 text-gray-600\">\r\n <i class=\"fa-solid fa-calendar-days w-5 text-center\"><\/i>\r\n <select id=\"event-calendar-select\" class=\"border border-google-border rounded px-3 py-1.5 text-sm focus:outline-none focus:ring-1 focus:ring-google-blue bg-white w-48 cursor-pointer\">\r\n <option value=\"primary\">Personal Events<\/option>\r\n <\/select>\r\n <\/div>\r\n\r\n <div class=\"flex items-start space-x-3 text-gray-600\">\r\n <i class=\"fa-regular fa-envelope w-5 text-center mt-1\"><\/i>\r\n <div class=\"w-full\">\r\n <input type=\"text\" id=\"event-guests\" placeholder=\"Add guest emails (comma separated)\" class=\"w-full border border-google-border rounded p-2 text-sm focus:outline-none focus:ring-1 focus:ring-google-blue\">\r\n <p class=\"text-[11px] text-gray-400 mt-1\">Invited guests will receive simulated email notifications.<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"flex items-start space-x-3 text-gray-600\">\r\n <i class=\"fa-solid fa-align-left w-5 text-center mt-1\"><\/i>\r\n <textarea id=\"event-description\" placeholder=\"Add description or notes\" rows=\"3\" class=\"w-full border border-google-border rounded p-2 text-sm focus:outline-none focus:ring-1 focus:ring-google-blue\"><\/textarea>\r\n <\/div>\r\n\r\n <div class=\"flex items-center justify-end space-x-3 pt-4 border-t border-google-border\">\r\n <button type=\"button\" id=\"delete-event-btn\" class=\"px-4 py-2 text-red-600 hover:bg-red-50 rounded text-sm font-medium transition hidden cursor-pointer\">Delete<\/button>\r\n <button type=\"button\" id=\"cancel-event-btn\" class=\"px-4 py-2 hover:bg-gray-100 rounded text-sm font-medium text-gray-600 transition cursor-pointer\">Cancel<\/button>\r\n <button type=\"submit\" class=\"px-6 py-2 bg-google-blue hover:bg-google-hover text-white rounded font-medium text-sm shadow transition cursor-pointer\">Save<\/button>\r\n <\/div>\r\n <\/form>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div id=\"settings-modal\" class=\"fixed inset-0 bg-black\/40 z-50 flex items-center justify-center hidden\">\r\n <div class=\"bg-white rounded-lg shadow-2xl w-full max-w-xl overflow-hidden\">\r\n <div class=\"bg-gray-100 px-6 py-4 flex items-center justify-between border-b border-google-border\">\r\n <h3 class=\"font-medium text-lg text-gray-800\"><i class=\"fa-solid fa-gear mr-2 text-google-blue\"><\/i>Shared Google Calendars & ICS Feeds<\/h3>\r\n <button id=\"close-settings-btn\" class=\"text-gray-500 hover:text-gray-700 p-1 rounded-full hover:bg-gray-200 cursor-pointer\">\r\n <i class=\"fa-solid fa-xmark text-lg\"><\/i>\r\n <\/button>\r\n <\/div>\r\n <div class=\"p-6 space-y-6\">\r\n <div>\r\n <h4 class=\"text-sm font-semibold text-gray-700 mb-2\">Add a Shared Calendar or Public ICS feed<\/h4>\r\n <p class=\"text-xs text-gray-500 mb-4\">You can add public Google Calendar IDs (e.g., holiday calendars ending in @group.calendar.google.com) or direct ICS file links to display events on your calendar.<\/p>\r\n \r\n <form id=\"shared-cal-form\" class=\"space-y-3\">\r\n <div>\r\n <label class=\"block text-xs font-medium text-gray-600 mb-1\">Calendar Name<\/label>\r\n <input type=\"text\" id=\"shared-cal-name\" required placeholder=\"e.g., US Holidays or Team Calendar\" class=\"w-full border border-google-border rounded px-3 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-google-blue\">\r\n <\/div>\r\n <div>\r\n <label class=\"block text-xs font-medium text-gray-600 mb-1\">Google Calendar ID \/ ICS URL<\/label>\r\n <input type=\"text\" id=\"shared-cal-url\" required placeholder=\"e.g., en.usa#holiday@group.v.calendar.google.com or https:\/\/...\" class=\"w-full border border-google-border rounded px-3 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-google-blue\">\r\n <\/div>\r\n <div class=\"flex items-center space-x-2\">\r\n <label class=\"text-xs font-medium text-gray-600\">Color Tag:<\/label>\r\n <input type=\"color\" id=\"shared-cal-color\" value=\"#34A853\" class=\"w-8 h-8 rounded border border-google-border cursor-pointer\">\r\n <\/div>\r\n <div class=\"flex justify-end\">\r\n <button type=\"submit\" class=\"px-4 py-2 bg-google-blue hover:bg-google-hover text-white rounded text-sm font-medium shadow cursor-pointer\">Add Shared Calendar<\/button>\r\n <\/div>\r\n <\/form>\r\n <\/div>\r\n\r\n <div class=\"border-t border-google-border pt-4\">\r\n <h4 class=\"text-sm font-semibold text-gray-700 mb-3\">Active Shared Calendars<\/h4>\r\n <div id=\"configured-shared-list\" class=\"space-y-2 max-h-48 overflow-y-auto\">\r\n \r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div id=\"toast\" class=\"fixed bottom-5 left-1\/2 transform -translate-x-1\/2 bg-gray-900 text-white px-4 py-2 rounded-lg shadow-xl text-sm transition-opacity duration-300 opacity-0 pointer-events-none z-50\">\r\n Action completed\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <script>\r\n \/\/ State Management\r\n let currentDate = new Date();\r\n let currentView = 'month'; \/\/ 'month', 'week', 'day'\r\n let miniMonthDate = new Date();\r\n\r\n \/\/ Sample Seed Events if empty\r\n const defaultEvents = [\r\n {\r\n id: 'evt-1',\r\n title: 'Team Sync Meeting',\r\n date: new Date().toISOString().split('T')[0],\r\n startTime: '10:00',\r\n endTime: '11:00',\r\n allDay: false,\r\n calendarId: 'primary',\r\n description: 'Weekly sync with design and engineering teams.'\r\n },\r\n {\r\n id: 'evt-2',\r\n title: 'Product Launch Review',\r\n date: new Date(Date.now() + 86400000).toISOString().split('T')[0],\r\n startTime: '14:00',\r\n endTime: '15:30',\r\n allDay: false,\r\n calendarId: 'primary',\r\n description: 'Review final checklist for public launch.'\r\n },\r\n {\r\n id: 'evt-3',\r\n title: 'Company Hackathon Day',\r\n date: new Date(Date.now() + 86400000 * 3).toISOString().split('T')[0],\r\n startTime: '',\r\n endTime: '',\r\n allDay: true,\r\n calendarId: 'primary',\r\n description: 'Build awesome creative projects!'\r\n }\r\n ];\r\n\r\n let events = JSON.parse(localStorage.getItem('gcal_clone_events')) || defaultEvents;\r\n let sharedCalendars = JSON.parse(localStorage.getItem('gcal_clone_shared')) || [\r\n {\r\n id: 'shared-holidays',\r\n name: 'US Public Holidays',\r\n url: 'holidays',\r\n color: '#34A853',\r\n enabled: true,\r\n events: [\r\n { id: 'h-1', title: 'New Year\\'s Day', date: `${new Date().getFullYear()}-01-01`, allDay: true },\r\n { id: 'h-2', title: 'Independence Day', date: `${new Date().getFullYear()}-07-04`, allDay: true },\r\n { id: 'h-3', title: 'Christmas Day', date: `${new Date().getFullYear()}-12-25`, allDay: true }\r\n ]\r\n }\r\n ];\r\n\r\n \/\/ DOM Elements\r\n const currentMonthYearEl = document.getElementById('current-month-year');\r\n const viewContainer = document.getElementById('view-container');\r\n const prevBtn = document.getElementById('prev-btn');\r\n const nextBtn = document.getElementById('next-btn');\r\n const todayBtn = document.getElementById('today-btn');\r\n const viewSelect = document.getElementById('view-select');\r\n const sidebarToggle = document.getElementById('sidebar-toggle');\r\n const sidebar = document.getElementById('sidebar');\r\n\r\n \/\/ Mini calendar elements\r\n const miniMonthYearEl = document.getElementById('mini-month-year');\r\n const miniDaysGrid = document.getElementById('mini-days-grid');\r\n const miniPrev = document.getElementById('mini-prev');\r\n const miniNext = document.getElementById('mini-next');\r\n\r\n \/\/ Modals\r\n const eventModal = document.getElementById('event-modal');\r\n const closeModalBtn = document.getElementById('close-modal-btn');\r\n const cancelEventBtn = document.getElementById('cancel-event-btn');\r\n const eventForm = document.getElementById('event-form');\r\n const createEventBtn = document.getElementById('create-event-btn');\r\n const deleteEventBtn = document.getElementById('delete-event-btn');\r\n const modalTitleText = document.getElementById('modal-title-text');\r\n\r\n const settingsModal = document.getElementById('settings-modal');\r\n const settingsOpenBtn = document.getElementById('settings-open-btn');\r\n const closeSettingsBtn = document.getElementById('close-settings-btn');\r\n const addSharedBtn = document.getElementById('add-shared-btn');\r\n const sharedCalForm = document.getElementById('shared-cal-form');\r\n const configuredSharedList = document.getElementById('configured-shared-list');\r\n const sharedCalendarsList = document.getElementById('shared-calendars-list');\r\n const eventCalendarSelect = document.getElementById('event-calendar-select');\r\n\r\n \/\/ Toast notification\r\n function showToast(message) {\r\n const toast = document.getElementById('toast');\r\n toast.textContent = message;\r\n toast.classList.remove('opacity-0');\r\n toast.classList.add('opacity-100');\r\n setTimeout(() => {\r\n toast.classList.remove('opacity-100');\r\n toast.classList.add('opacity-0');\r\n }, 3000);\r\n }\r\n\r\n \/\/ Save state to localStorage\r\n function saveData() {\r\n localStorage.setItem('gcal_clone_events', JSON.stringify(events));\r\n localStorage.setItem('gcal_clone_shared', JSON.stringify(sharedCalendars));\r\n }\r\n\r\n \/\/ Initialize application\r\n function initApp() {\r\n setupEventListeners();\r\n renderAll();\r\n }\r\n\r\n function setupEventListeners() {\r\n prevBtn.addEventListener('click', () => navigatePeriod(-1));\r\n nextBtn.addEventListener('click', () => navigatePeriod(1));\r\n todayBtn.addEventListener('click', () => {\r\n currentDate = new Date();\r\n renderAll();\r\n });\r\n\r\n viewSelect.addEventListener('change', (e) => {\r\n currentView = e.target.value;\r\n renderAll();\r\n });\r\n\r\n sidebarToggle.addEventListener('click', () => {\r\n sidebar.classList.toggle('-ml-64');\r\n });\r\n\r\n miniPrev.addEventListener('click', () => {\r\n miniMonthDate.setMonth(miniMonthDate.getMonth() - 1);\r\n renderMiniCalendar();\r\n });\r\n miniNext.addEventListener('click', () => {\r\n miniMonthDate.setMonth(miniMonthDate.getMonth() + 1);\r\n renderMiniCalendar();\r\n });\r\n\r\n \/\/ Modal triggers\r\n createEventBtn.addEventListener('click', () => openEventModal());\r\n closeModalBtn.addEventListener('click', () => closeEventModal());\r\n cancelEventBtn.addEventListener('click', () => closeEventModal());\r\n eventModal.addEventListener('click', (e) => {\r\n if (e.target === eventModal) closeEventModal();\r\n });\r\n\r\n settingsOpenBtn.addEventListener('click', () => settingsModal.classList.remove('hidden'));\r\n closeSettingsBtn.addEventListener('click', () => settingsModal.classList.add('hidden'));\r\n settingsModal.addEventListener('click', (e) => {\r\n if (e.target === settingsModal) settingsModal.classList.add('hidden');\r\n });\r\n addSharedBtn.addEventListener('click', () => settingsModal.classList.remove('hidden'));\r\n\r\n \/\/ All day checkbox toggle time inputs\r\n document.getElementById('event-all-day').addEventListener('change', (e) => {\r\n const timeInputs = document.getElementById('time-inputs');\r\n if (e.target.checked) {\r\n timeInputs.classList.add('opacity-50', 'pointer-events-none');\r\n } else {\r\n timeInputs.classList.remove('opacity-50', 'pointer-events-none');\r\n }\r\n });\r\n\r\n \/\/ Event Form Submit\r\n eventForm.addEventListener('submit', (e) => {\r\n e.preventDefault();\r\n const id = document.getElementById('event-id').value || 'evt-' + Date.now();\r\n const title = document.getElementById('event-title').value;\r\n const date = document.getElementById('event-date').value;\r\n const allDay = document.getElementById('event-all-day').checked;\r\n const startTime = document.getElementById('event-start-time').value;\r\n const endTime = document.getElementById('event-end-time').value;\r\n const calendarId = document.getElementById('event-calendar-select').value;\r\n const guests = document.getElementById('event-guests').value;\r\n const description = document.getElementById('event-description').value;\r\n\r\n const eventData = { id, title, date, allDay, startTime, endTime, calendarId, guests, description };\r\n\r\n const existingIndex = events.findIndex(ev => ev.id === id);\r\n if (existingIndex >= 0) {\r\n events[existingIndex] = eventData;\r\n showToast('Event updated successfully');\r\n } else {\r\n events.push(eventData);\r\n showToast('Event created successfully');\r\n }\r\n\r\n saveData();\r\n closeEventModal();\r\n renderAll();\r\n\r\n if (guests && guests.trim() !== '') {\r\n setTimeout(() => {\r\n showToast(`\ud83d\udce7 Email invitations sent to: ${guests}`);\r\n }, 800);\r\n }\r\n });\r\n\r\n deleteEventBtn.addEventListener('click', () => {\r\n const id = document.getElementById('event-id').value;\r\n if (id) {\r\n events = events.filter(ev => ev.id !== id);\r\n saveData();\r\n closeEventModal();\r\n showToast('Event deleted');\r\n renderAll();\r\n }\r\n });\r\n\r\n \/\/ Shared Calendar Form Submit\r\n sharedCalForm.addEventListener('submit', (e) => {\r\n e.preventDefault();\r\n const name = document.getElementById('shared-cal-name').value;\r\n const url = document.getElementById('shared-cal-url').value;\r\n const color = document.getElementById('shared-cal-color').value;\r\n\r\n const newShared = {\r\n id: 'shared-' + Date.now(),\r\n name,\r\n url,\r\n color,\r\n enabled: true,\r\n events: [\r\n { id: 'sh-evt-' + Date.now(), title: `${name} Sample Event`, date: new Date().toISOString().split('T')[0], allDay: true }\r\n ]\r\n };\r\n\r\n sharedCalendars.push(newShared);\r\n saveData();\r\n sharedCalForm.reset();\r\n showToast('Shared calendar added');\r\n renderSharedCalendarsList();\r\n renderAll();\r\n });\r\n }\r\n\r\n function navigatePeriod(direction) {\r\n if (currentView === 'month') {\r\n currentDate.setMonth(currentDate.getMonth() + direction);\r\n } else if (currentView === 'week') {\r\n currentDate.setDate(currentDate.getDate() + (direction * 7));\r\n } else if (currentView === 'day') {\r\n currentDate.setDate(currentDate.getDate() + direction);\r\n }\r\n renderAll();\r\n }\r\n\r\n function renderAll() {\r\n updateHeaderTitle();\r\n renderMiniCalendar();\r\n renderSharedCalendarsList();\r\n updateCalendarSelectOptions();\r\n\r\n if (currentView === 'month') {\r\n renderMonthView();\r\n } else if (currentView === 'week') {\r\n renderWeekView();\r\n } else if (currentView === 'day') {\r\n renderDayView();\r\n }\r\n }\r\n\r\n function updateHeaderTitle() {\r\n const options = currentView === 'day' \r\n ? { month: 'long', day: 'numeric', year: 'numeric' }\r\n : { month: 'long', year: 'numeric' };\r\n currentMonthYearEl.textContent = currentDate.toLocaleDateString('en-US', options);\r\n }\r\n\r\n \/\/ Mini Calendar Rendering\r\n function renderMiniCalendar() {\r\n const year = miniMonthDate.getFullYear();\r\n const month = miniMonthDate.getMonth();\r\n miniMonthYearEl.textContent = miniMonthDate.toLocaleDateString('en-US', { month: 'long', year: 'numeric' });\r\n\r\n const firstDayIndex = new Date(year, month, 1).getDay();\r\n const totalDays = new Date(year, month + 1, 0).getDate();\r\n const prevTotalDays = new Date(year, month, 0).getDate();\r\n\r\n let html = '';\r\n \/\/ Previous month trailing days\r\n for (let i = firstDayIndex - 1; i >= 0; i--) {\r\n html += `<span class=\"py-1 text-gray-300\">${prevTotalDays - i}<\/span>`;\r\n }\r\n\r\n const todayStr = new Date().toISOString().split('T')[0];\r\n\r\n \/\/ Current month days\r\n for (let d = 1; d <= totalDays; d++) {\r\n const thisDateStr = `${year}-${String(month + 1).padStart(2, '0')}-${String(d).padStart(2, '0')}`;\r\n const isToday = thisDateStr === todayStr;\r\n const isSelected = currentDate.toISOString().split('T')[0] === thisDateStr;\r\n\r\n let classes = \"py-1 rounded-full cursor-pointer hover:bg-gray-200 transition \";\r\n if (isToday) classes += \"bg-blue-600 text-white font-semibold hover:bg-blue-700 \";\r\n else if (isSelected) classes += \"bg-blue-100 text-blue-700 font-semibold \";\r\n else classes += \"text-gray-700\";\r\n\r\n html += `<span class=\"${classes}\" onclick=\"selectDateFromMini(${year}, ${month}, ${d})\">${d}<\/span>`;\r\n }\r\n\r\n miniDaysGrid.innerHTML = html;\r\n }\r\n\r\n window.selectDateFromMini = function(year, month, day) {\r\n currentDate = new Date(year, month, day);\r\n renderAll();\r\n }\r\n\r\n function renderSharedCalendarsList() {\r\n \/\/ Sidebar checkboxes\r\n let html = '';\r\n sharedCalendars.forEach(cal => {\r\n html += `\r\n <label class=\"flex items-center space-x-2 px-2 py-1.5 rounded hover:bg-gray-200 cursor-pointer text-sm\">\r\n <input type=\"checkbox\" ${cal.enabled ? 'checked' : ''} class=\"rounded text-blue-600 focus:ring-blue-500 h-4 w-4 shared-filter-checkbox cursor-pointer\" data-id=\"${cal.id}\">\r\n <span class=\"w-3 h-3 rounded-full inline-block\" style=\"background-color: ${cal.color}\"><\/span>\r\n <span class=\"text-gray-700 font-medium truncate\" title=\"${cal.name}\">${cal.name}<\/span>\r\n <\/label>\r\n `;\r\n });\r\n sharedCalendarsList.innerHTML = html;\r\n\r\n \/\/ Bind shared filter checkboxes\r\n document.querySelectorAll('.shared-filter-checkbox').forEach(chk => {\r\n chk.addEventListener('change', (e) => {\r\n const id = e.target.getAttribute('data-id');\r\n const cal = sharedCalendars.find(c => c.id === id);\r\n if (cal) {\r\n cal.enabled = e.target.checked;\r\n saveData();\r\n renderAll();\r\n }\r\n });\r\n });\r\n\r\n \/\/ Modal settings list\r\n let modalHtml = '';\r\n sharedCalendars.forEach(cal => {\r\n modalHtml += `\r\n <div class=\"flex items-center justify-between p-2 bg-gray-50 rounded border border-google-border text-sm\">\r\n <div class=\"flex items-center space-x-2 truncate\">\r\n <span class=\"w-3 h-3 rounded-full flex-shrink-0\" style=\"background-color: ${cal.color}\"><\/span>\r\n <span class=\"font-medium text-gray-700 truncate\">${cal.name}<\/span>\r\n <\/div>\r\n <button onclick=\"removeSharedCalendar('${cal.id}')\" class=\"text-red-500 hover:text-red-700 p-1 cursor-pointer\"><i class=\"fa-solid fa-trash-can text-xs\"><\/i><\/button>\r\n <\/div>\r\n `;\r\n });\r\n configuredSharedList.innerHTML = modalHtml || '<p class=\"text-xs text-gray-400\">No shared calendars added yet.<\/p>';\r\n }\r\n\r\n window.removeSharedCalendar = function(id) {\r\n sharedCalendars = sharedCalendars.filter(c => c.id !== id);\r\n saveData();\r\n renderSharedCalendarsList();\r\n renderAll();\r\n showToast('Shared calendar removed');\r\n }\r\n\r\n function updateCalendarSelectOptions() {\r\n let html = `<option value=\"primary\">Personal Events<\/option>`;\r\n sharedCalendars.forEach(cal => {\r\n if (cal.enabled) {\r\n html += `<option value=\"${cal.id}\">${cal.name}<\/option>`;\r\n }\r\n });\r\n eventCalendarSelect.innerHTML = html;\r\n }\r\n\r\n \/\/ Get all active events combining primary and enabled shared calendars\r\n function getActiveEvents() {\r\n let allEvents = [...events];\r\n sharedCalendars.forEach(cal => {\r\n if (cal.enabled && cal.events) {\r\n cal.events.forEach(ev => {\r\n allEvents.push({ ...ev, calendarId: cal.id, color: cal.color, isShared: true });\r\n });\r\n }\r\n });\r\n return allEvents;\r\n }\r\n\r\n \/\/ --- MONTH VIEW ---\r\n function renderMonthView() {\r\n const year = currentDate.getFullYear();\r\n const month = currentDate.getMonth();\r\n\r\n const firstDayIndex = new Date(year, month, 1).getDay();\r\n const totalDays = new Date(year, month + 1, 0).getDate();\r\n const prevTotalDays = new Date(year, month, 0).getDate();\r\n\r\n const dayNames = ['SUN', 'MON', 'TUE', 'WED', 'THU', 'FRI', 'SAT'];\r\n let html = `\r\n <div class=\"grid grid-cols-7 border-b border-google-border text-center text-xs font-semibold text-gray-500 py-2 bg-gray-50 flex-shrink-0\">\r\n ${dayNames.map(d => `<div>${d}<\/div>`).join('')}\r\n <\/div>\r\n <div class=\"flex-1 calendar-grid bg-google-border gap-px overflow-y-auto\">\r\n `;\r\n\r\n const todayStr = new Date().toISOString().split('T')[0];\r\n const allEvents = getActiveEvents();\r\n\r\n let dayCount = 1;\r\n let nextMonthDay = 1;\r\n const cellsCount = (firstDayIndex + totalDays > 35) ? 42 : 35;\r\n\r\n for (let i = 0; i < cellsCount; i++) {\r\n let cellDateStr = '';\r\n let isCurrentMonth = false;\r\n let cellNumDisplay = '';\r\n\r\n if (i < firstDayIndex) {\r\n const prevDayNum = prevTotalDays - (firstDayIndex - 1 - i);\r\n const prevMonth = month === 0 ? 11 : month - 1;\r\n const prevYear = month === 0 ? year - 1 : year;\r\n cellDateStr = `${prevYear}-${String(prevMonth + 1).padStart(2, '0')}-${String(prevDayNum).padStart(2, '0')}`;\r\n cellNumDisplay = prevDayNum;\r\n } else if (dayCount <= totalDays) {\r\n cellDateStr = `${year}-${String(month + 1).padStart(2, '0')}-${String(dayCount).padStart(2, '0')}`;\r\n cellNumDisplay = dayCount;\r\n isCurrentMonth = true;\r\n dayCount++;\r\n } else {\r\n const nextMonth = month === 11 ? 0 : month + 1;\r\n const nextYear = month === 11 ? year + 1 : year;\r\n cellDateStr = `${nextYear}-${String(nextMonth + 1).padStart(2, '0')}-${String(nextMonthDay).padStart(2, '0')}`;\r\n cellNumDisplay = nextMonthDay;\r\n nextMonthDay++;\r\n }\r\n\r\n const isToday = cellDateStr === todayStr;\r\n const dayEvents = allEvents.filter(ev => ev.date === cellDateStr);\r\n\r\n html += `\r\n <div class=\"bg-white p-1 flex flex-col overflow-hidden hover:bg-gray-50\/50 transition cursor-pointer group min-h-[100px]\" onclick=\"openEventModalForDate('${cellDateStr}')\">\r\n <div class=\"flex items-center justify-between mb-1\">\r\n <span class=\"text-xs font-medium px-1.5 py-0.5 rounded-full ${isToday ? 'bg-google-blue text-white' : (isCurrentMonth ? 'text-gray-700' : 'text-gray-400')}\">\r\n ${cellNumDisplay}\r\n <\/span>\r\n <\/div>\r\n <div class=\"flex-1 overflow-y-auto space-y-1\">\r\n `;\r\n\r\n dayEvents.forEach(ev => {\r\n const isShared = ev.isShared;\r\n const badgeBg = isShared ? (ev.color || '#34A853') : '#1a73e8';\r\n const timeText = ev.allDay ? '' : `${ev.startTime} `;\r\n html += `\r\n <div onclick=\"event.stopPropagation(); editEvent('${ev.id}')\" class=\"text-xs px-2 py-0.5 rounded truncate text-white shadow-sm hover:opacity-90 font-medium transition cursor-pointer\" style=\"background-color: ${badgeBg}\" title=\"${ev.title}\">\r\n ${timeText}${ev.title}\r\n <\/div>\r\n `;\r\n });\r\n\r\n html += `\r\n <\/div>\r\n <\/div>\r\n `;\r\n }\r\n\r\n html += `<\/div>`;\r\n viewContainer.innerHTML = html;\r\n }\r\n\r\n \/\/ --- WEEK VIEW ---\r\n function renderWeekView() {\r\n const curr = new Date(currentDate);\r\n const firstday = new Date(curr.setDate(curr.getDate() - curr.getDay()));\r\n \r\n let weekDays = [];\r\n for (let i = 0; i < 7; i++) {\r\n let d = new Date(firstday);\r\n d.setDate(d.getDate() + i);\r\n weekDays.push(d);\r\n }\r\n\r\n const todayStr = new Date().toISOString().split('T')[0];\r\n const allEvents = getActiveEvents();\r\n\r\n let html = `\r\n <div class=\"grid grid-cols-8 border-b border-google-border bg-gray-50 flex-shrink-0 text-xs font-semibold text-gray-500 py-2 text-center\">\r\n <div>TIME<\/div>\r\n ${weekDays.map(d => {\r\n const dStr = d.toISOString().split('T')[0];\r\n const isToday = dStr === todayStr;\r\n return `<div>${d.toLocaleDateString('en-US', { weekday: 'short' })} <span class=\"${isToday ? 'bg-google-blue text-white rounded-full px-1.5 py-0.5' : ''}\">${d.getDate()}<\/span><\/div>`;\r\n }).join('')}\r\n <\/div>\r\n <div class=\"flex-1 overflow-y-auto divide-y divide-google-border\">\r\n `;\r\n\r\n for (let hour = 0; hour < 24; hour++) {\r\n const hourFormatted = `${String(hour).padStart(2, '0')}:00`;\r\n html += `<div class=\"grid grid-cols-8 min-h-[60px] border-b border-google-border text-xs\">`;\r\n html += `<div class=\"p-2 text-right text-gray-400 font-medium pr-3\">${hourFormatted}<\/div>`;\r\n\r\n weekDays.forEach(d => {\r\n const dStr = d.toISOString().split('T')[0];\r\n const slotEvents = allEvents.filter(ev => {\r\n if (ev.date !== dStr) return false;\r\n if (ev.allDay && hour === 0) return true;\r\n if (!ev.startTime) return hour === 9;\r\n const evHour = parseInt(ev.startTime.split(':')[0]);\r\n return evHour === hour;\r\n });\r\n\r\n html += `<div class=\"border-l border-google-border p-1 hover:bg-gray-50 cursor-pointer relative\" onclick=\"openEventModalForDate('${dStr}', '${hourFormatted}')\">`;\r\n slotEvents.forEach(ev => {\r\n const badgeBg = ev.isShared ? (ev.color || '#34A853') : '#1a73e8';\r\n html += `\r\n <div onclick=\"event.stopPropagation(); editEvent('${ev.id}')\" class=\"text-white px-1.5 py-0.5 rounded text-[11px] font-medium truncate mb-1 shadow-sm cursor-pointer\" style=\"background-color: ${badgeBg}\">\r\n ${ev.title}\r\n <\/div>\r\n `;\r\n });\r\n html += `<\/div>`;\r\n });\r\n\r\n html += `<\/div>`;\r\n }\r\n\r\n html += `<\/div>`;\r\n viewContainer.innerHTML = html;\r\n }\r\n\r\n \/\/ --- DAY VIEW ---\r\n function renderDayView() {\r\n const dStr = currentDate.toISOString().split('T')[0];\r\n const allEvents = getActiveEvents();\r\n const dayEvents = allEvents.filter(ev => ev.date === dStr);\r\n\r\n let html = `\r\n <div class=\"p-4 border-b border-google-border bg-gray-50 flex items-center justify-between flex-shrink-0\">\r\n <span class=\"font-semibold text-gray-700 text-lg\">${currentDate.toLocaleDateString('en-US', { weekday: 'long', month: 'long', day: 'numeric', year: 'numeric' })}<\/span>\r\n <button onclick=\"openEventModalForDate('${dStr}')\" class=\"px-3 py-1.5 bg-google-blue text-white rounded text-sm font-medium shadow hover:bg-google-hover cursor-pointer\">Add Event Today<\/button>\r\n <\/div>\r\n <div class=\"flex-1 overflow-y-auto divide-y divide-google-border\">\r\n `;\r\n\r\n for (let hour = 0; hour < 24; hour++) {\r\n const hourFormatted = `${String(hour).padStart(2, '0')}:00`;\r\n const slotEvents = dayEvents.filter(ev => {\r\n if (ev.allDay && hour === 0) return true;\r\n if (!ev.startTime) return hour === 9;\r\n const evHour = parseInt(ev.startTime.split(':')[0]);\r\n return evHour === hour;\r\n });\r\n\r\n html += `\r\n <div class=\"flex min-h-[70px] border-b border-google-border hover:bg-gray-50 cursor-pointer\" onclick=\"openEventModalForDate('${dStr}', '${hourFormatted}')\">\r\n <div class=\"w-24 p-3 text-right text-xs text-gray-400 font-medium\">${hourFormatted}<\/div>\r\n <div class=\"flex-1 p-2 border-l border-google-border space-y-2\">\r\n `;\r\n\r\n slotEvents.forEach(ev => {\r\n const badgeBg = ev.isShared ? (ev.color || '#34A853') : '#1a73e8';\r\n html += `\r\n <div onclick=\"event.stopPropagation(); editEvent('${ev.id}')\" class=\"p-2 rounded text-white shadow-sm font-medium text-sm flex items-center justify-between cursor-pointer\" style=\"background-color: ${badgeBg}\">\r\n <div>\r\n <div class=\"font-bold\">${ev.title}<\/div>\r\n ${ev.description ? `<div class=\"text-xs opacity-90 font-normal\">${ev.description}<\/div>` : ''}\r\n <\/div>\r\n <span class=\"text-xs opacity-80\">${ev.allDay ? 'All Day' : `${ev.startTime} - ${ev.endTime}`}<\/span>\r\n <\/div>\r\n `;\r\n });\r\n\r\n html += `\r\n <\/div>\r\n <\/div>\r\n `;\r\n }\r\n\r\n html += `<\/div>`;\r\n viewContainer.innerHTML = html;\r\n }\r\n\r\n \/\/ Event Modal Controls\r\n window.openEventModalForDate = function(dateStr, timeStr = '10:00') {\r\n openEventModal({ date: dateStr, startTime: timeStr, endTime: timeStr ? addOneHour(timeStr) : '' });\r\n }\r\n\r\n function addOneHour(timeStr) {\r\n const parts = timeStr.split(':');\r\n let h = parseInt(parts[0]) + 1;\r\n if (h > 23) h = 23;\r\n return `${String(h).padStart(2, '0')}:${parts[1]}`;\r\n }\r\n\r\n function openEventModal(prefill = {}) {\r\n eventForm.reset();\r\n document.getElementById('event-id').value = prefill.id || '';\r\n document.getElementById('event-title').value = prefill.title || '';\r\n document.getElementById('event-date').value = prefill.date || currentDate.toISOString().split('T')[0];\r\n document.getElementById('event-start-time').value = prefill.startTime || '10:00';\r\n document.getElementById('event-end-time').value = prefill.endTime || '11:00';\r\n document.getElementById('event-all-day').checked = prefill.allDay || false;\r\n document.getElementById('event-guests').value = prefill.guests || '';\r\n document.getElementById('event-description').value = prefill.description || '';\r\n \r\n if (prefill.id) {\r\n modalTitleText.textContent = 'Edit event';\r\n deleteEventBtn.classList.remove('hidden');\r\n } else {\r\n modalTitleText.textContent = 'Add event';\r\n deleteEventBtn.classList.add('hidden');\r\n }\r\n\r\n eventModal.classList.remove('hidden');\r\n document.getElementById('event-title').focus();\r\n }\r\n\r\n window.editEvent = function(id) {\r\n const ev = events.find(e => e.id === id);\r\n if (ev) {\r\n openEventModal(ev);\r\n } else {\r\n showToast('Cannot edit shared calendar read-only events');\r\n }\r\n }\r\n\r\n function closeEventModal() {\r\n eventModal.classList.add('hidden');\r\n }\r\n\r\n \/\/ Run on load\r\n window.onload = initApp;\r\n <\/script>\r\n<\/body>\r\n<\/html>\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":"<p>Google Calendar Clone Calendar Today Loading… MonthWeekDay G Create SMTWTFS My Calendars Personal Events Shared \/ ICS Calendars Add event to All day Personal Events Invited guests will receive simulated email notifications. Delete Cancel Save Shared Google Calendars & ICS Feeds Add a Shared Calendar or Public ICS feed You can add public Google Calendar […]<\/p>\n","protected":false},"author":1,"featured_media":186,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"site-sidebar-layout":"no-sidebar","site-content-layout":"page-builder","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"default","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":"","_members_access_role":[],"_members_access_error":""},"class_list":["post-21049","page","type-page","status-publish","has-post-thumbnail","hentry"],"acf":[],"a3_pvc":{"activated":false,"total_views":0,"today_views":0},"_links":{"self":[{"href":"https:\/\/jobsnocap.com\/lo\/wp-json\/wp\/v2\/pages\/21049","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/jobsnocap.com\/lo\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/jobsnocap.com\/lo\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/jobsnocap.com\/lo\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/jobsnocap.com\/lo\/wp-json\/wp\/v2\/comments?post=21049"}],"version-history":[{"count":12,"href":"https:\/\/jobsnocap.com\/lo\/wp-json\/wp\/v2\/pages\/21049\/revisions"}],"predecessor-version":[{"id":21091,"href":"https:\/\/jobsnocap.com\/lo\/wp-json\/wp\/v2\/pages\/21049\/revisions\/21091"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/jobsnocap.com\/lo\/wp-json\/wp\/v2\/media\/186"}],"wp:attachment":[{"href":"https:\/\/jobsnocap.com\/lo\/wp-json\/wp\/v2\/media?parent=21049"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}