{"id":20985,"date":"2025-12-30T17:31:26","date_gmt":"2025-12-30T12:01:26","guid":{"rendered":"https:\/\/demo.vleafy.com\/ibc2\/?page_id=20985"},"modified":"2025-12-31T10:12:25","modified_gmt":"2025-12-31T04:42:25","slug":"calendar-plan","status":"publish","type":"page","link":"https:\/\/demo.vleafy.com\/ibc2\/calendar-plan\/","title":{"rendered":"Calendar Plan"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"20985\" class=\"elementor elementor-20985\">\n\t\t\t\t<div class=\"elementor-element elementor-element-e39b26a e-con-full e-flex e-con e-parent \" data-id=\"e39b26a\" data-element_type=\"container\">\t\t<div class=\"elementor-element elementor-element-712875a elementor-widget elementor-widget-pxl_heading\" data-id=\"712875a\" data-element_type=\"widget\" data-widget_type=\"pxl_heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div id=\"pxl-pxl_heading-712875a-2117\" class=\"pxl-heading pxl-heading--tcustom\">\n\t<div class=\"pxl-heading--inner\">\n\n\t\t\n\t<h3 class=\"pxl-item--title   pxl-color-style-1 wow fadeInUp\" data-wow-delay=\"300ms\">\n\n\n\tCalendar Plan\t\t\t\n\t<\/h3>\n\n<\/div>\n<\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-5c68d59 elementor-widget elementor-widget-image\" data-id=\"5c68d59\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" width=\"218\" height=\"80\" src=\"https:\/\/demo.vleafy.com\/ibc2\/wp-content\/uploads\/2024\/06\/home-1-light.png\" class=\"attachment-large size-large wp-image-7236\" alt=\"\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\r\n\t\t<div class=\"elementor-element elementor-element-4bdda2c e-flex e-con-boxed e-con e-parent \" data-id=\"4bdda2c\" data-element_type=\"container\">\t\t\t<div class=\"e-con-inner\">\r\n\t\t\t\t<div class=\"elementor-element elementor-element-96ca54f elementor-widget elementor-widget-html\" data-id=\"96ca54f\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t    <style>\r\n        \r\n        .monitor-container {\r\n            max-width: 1400px;\r\n            margin: 0 auto;\r\n        }\r\n\r\n        .monitor-header {\r\n            text-align: center;\r\n            margin-bottom: 50px;\r\n        }\r\n\r\n        .monitor-title {\r\n            color: #fff;\r\n            font-size: 3rem;\r\n            font-weight: 700;\r\n            text-transform: uppercase;\r\n            letter-spacing: 3px;\r\n            margin-bottom: 15px;\r\n            background: linear-gradient(135deg, #8a2be2, #ff1493);\r\n            -webkit-background-clip: text;\r\n            -webkit-text-fill-color: transparent;\r\n            background-clip: text;\r\n        }\r\n\r\n        .monitor-subtitle {\r\n            color: rgba(255, 255, 255, 0.7);\r\n            font-size: 1.2rem;\r\n        }\r\n\r\n        .month-navigation {\r\n            background: linear-gradient(145deg, rgba(138, 43, 226, 0.15), rgba(75, 0, 130, 0.15));\r\n            backdrop-filter: blur(10px);\r\n            border: 2px solid rgba(138, 43, 226, 0.3);\r\n            border-radius: 20px;\r\n            padding: 25px;\r\n            margin: 0 20px 40px;\r\n            display: flex;\r\n            align-items: center;\r\n            justify-content: space-between;\r\n            gap: 20px;\r\n        }\r\n\r\n        .nav-btn {\r\n            width: 50px;\r\n            height: 50px;\r\n            background: linear-gradient(135deg, #8a2be2, #ff1493);\r\n            border: none;\r\n            border-radius: 50%;\r\n            color: #fff;\r\n            font-size: 1.5rem;\r\n            cursor: pointer;\r\n            display: flex;\r\n            align-items: center;\r\n            justify-content: center;\r\n            transition: all 0.3s;\r\n            box-shadow: 0 5px 15px rgba(138, 43, 226, 0.4);\r\n        }\r\n\r\n        .nav-btn:hover {\r\n            transform: scale(1.1);\r\n            box-shadow: 0 8px 20px rgba(138, 43, 226, 0.6);\r\n        }\r\n\r\n        .nav-btn:disabled {\r\n            opacity: 0.3;\r\n            cursor: not-allowed;\r\n        }\r\n\r\n        .current-month {\r\n            flex: 1;\r\n            text-align: center;\r\n            color: #fff;\r\n            font-size: 2rem;\r\n            font-weight: 700;\r\n        }\r\n\r\n        .categories-tabs {\r\n            display: flex;\r\n            gap: 15px;\r\n            padding: 0 20px;\r\n            margin-bottom: 30px;\r\n            flex-wrap: wrap;\r\n            justify-content: center;\r\n        }\r\n\r\n        .category-tab {\r\n            padding: 12px 30px;\r\n            background: rgba(138, 43, 226, 0.2);\r\n            border: 2px solid rgba(138, 43, 226, 0.4);\r\n            border-radius: 50px;\r\n            color: rgba(255, 255, 255, 0.7);\r\n            font-size: 1rem;\r\n            font-weight: 600;\r\n            cursor: pointer;\r\n            transition: all 0.3s;\r\n            text-transform: uppercase;\r\n            letter-spacing: 1px;\r\n        }\r\n\r\n        .category-tab:hover {\r\n            background: rgba(138, 43, 226, 0.3);\r\n            border-color: #ff1493;\r\n            color: #fff;\r\n            transform: translateY(-3px);\r\n        }\r\n\r\n        .category-tab.active {\r\n            background: linear-gradient(135deg, #8a2be2, #ff1493);\r\n            border-color: #ff1493;\r\n            color: #fff;\r\n            box-shadow: 0 8px 20px rgba(138, 43, 226, 0.5);\r\n        }\r\n\r\n        .status-filters {\r\n            display: flex;\r\n            gap: 10px;\r\n            padding: 0 20px;\r\n            margin-bottom: 25px;\r\n            flex-wrap: wrap;\r\n            justify-content: center;\r\n\t\t\tpadding-top:30px;\r\n\t\t\tborder-top:1px solid rgba(138, 43, 226, 0.2);\r\n        }\r\n\r\n        .status-filter {\r\n            padding: 8px 20px;\r\n            background: rgba(138, 43, 226, 0.15);\r\n            border: 1px solid rgba(138, 43, 226, 0.3);\r\n            border-radius: 50px;\r\n            color: rgba(255, 255, 255, 0.7);\r\n            font-size: 0.85rem;\r\n            font-weight: 600;\r\n            cursor: pointer;\r\n            transition: all 0.3s;\r\n            text-transform: uppercase;\r\n            letter-spacing: 0.5px;\r\n        }\r\n\r\n        .status-filter:hover {\r\n            background: rgba(138, 43, 226, 0.25);\r\n            border-color: #ff1493;\r\n            color: #fff;\r\n        }\r\n\r\n        .status-filter.active {\r\n            background: linear-gradient(135deg, #8a2be2, #ff1493);\r\n            border-color: #ff1493;\r\n            color: #fff;\r\n            box-shadow: 0 4px 12px rgba(138, 43, 226, 0.4);\r\n        }\r\n\r\n        .tasks-section {\r\n            background: linear-gradient(145deg, rgba(138, 43, 226, 0.15), rgba(75, 0, 130, 0.15));\r\n            backdrop-filter: blur(10px);\r\n            border: 2px solid rgba(138, 43, 226, 0.3);\r\n            border-radius: 20px;\r\n            padding: 30px;\r\n            margin: 0 20px;\r\n        }\r\n\r\n        .category-summary {\r\n            background: linear-gradient(145deg, rgba(138, 43, 226, 0.2), rgba(75, 0, 130, 0.2));\r\n            border: 2px solid rgba(138, 43, 226, 0.4);\r\n            border-radius: 15px;\r\n            padding: 25px;\r\n            margin-bottom: 30px;\r\n            display: grid;\r\n            grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));\r\n            gap: 20px;\r\n        }\r\n\r\n        .summary-item {\r\n            text-align: center;\r\n        }\r\n\r\n        .summary-label {\r\n            color: rgba(255, 255, 255, 0.7);\r\n            font-size: 0.85rem;\r\n            font-weight: 600;\r\n            text-transform: uppercase;\r\n            letter-spacing: 1px;\r\n            margin-bottom: 8px;\r\n        }\r\n\r\n        .summary-value {\r\n            color: #fff;\r\n            font-size: 2rem;\r\n            font-weight: 700;\r\n            background: linear-gradient(135deg, #8a2be2, #ff1493);\r\n            -webkit-background-clip: text;\r\n            -webkit-text-fill-color: transparent;\r\n            background-clip: text;\r\n        }\r\n\r\n        .tasks-grid {\r\n            display: grid;\r\n            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\r\n            gap: 20px;\r\n        }\r\n\r\n        .task-card {\r\n            background: linear-gradient(145deg, rgba(138, 43, 226, 0.1), rgba(75, 0, 130, 0.1));\r\n            border: 1px solid rgba(138, 43, 226, 0.3);\r\n            border-radius: 15px;\r\n            padding: 20px;\r\n            transition: all 0.3s;\r\n            position: relative;\r\n            overflow: hidden;\r\n        }\r\n\r\n        .task-card::before {\r\n            content: '';\r\n            position: absolute;\r\n            top: 0;\r\n            left: 0;\r\n            width: 4px;\r\n            height: 100%;\r\n            background: linear-gradient(180deg, #8a2be2, #ff1493);\r\n            opacity: 0;\r\n            transition: opacity 0.3s;\r\n        }\r\n\r\n        .task-card:hover {\r\n            background: linear-gradient(145deg, rgba(138, 43, 226, 0.2), rgba(75, 0, 130, 0.2));\r\n            border-color: #ff1493;\r\n            transform: translateY(-5px);\r\n            box-shadow: 0 10px 30px rgba(138, 43, 226, 0.3);\r\n        }\r\n\r\n        .task-card:hover::before {\r\n            opacity: 1;\r\n        }\r\n\r\n        .task-card.not-started::before {\r\n            background: #666;\r\n        }\r\n\r\n        .task-card.started::before {\r\n            background: linear-gradient(180deg, #3b82f6, #2563eb);\r\n        }\r\n\r\n        .task-card.in-progress::before {\r\n            background: linear-gradient(180deg, #fbbf24, #f59e0b);\r\n        }\r\n\r\n        .task-card.nearing-completion::before {\r\n            background: linear-gradient(180deg, #4ade80, #22c55e);\r\n        }\r\n\r\n        .task-card.completed::before {\r\n            background: linear-gradient(180deg, #8a2be2, #ff1493);\r\n        }\r\n\r\n        .task-header {\r\n            display: flex;\r\n            justify-content: space-between;\r\n            align-items: flex-start;\r\n            margin-bottom: 15px;\r\n            gap: 10px;\r\n        }\r\n\r\n        .task-name {\r\n            color: #fff;\r\n            font-size: 1.1rem;\r\n            font-weight: 700;\r\n            flex: 1;\r\n        }\r\n\r\n        .task-percentage {\r\n            color: #fff;\r\n            font-size: 1.8rem;\r\n            font-weight: 700;\r\n            background: linear-gradient(135deg, #8a2be2, #ff1493);\r\n            -webkit-background-clip: text;\r\n            -webkit-text-fill-color: transparent;\r\n            background-clip: text;\r\n            white-space: nowrap;\r\n        }\r\n\r\n        .progress-bar-container {\r\n            height: 8px;\r\n            background: rgba(26, 11, 46, 0.6);\r\n            border-radius: 50px;\r\n            overflow: hidden;\r\n            position: relative;\r\n            margin-bottom: 12px;\r\n        }\r\n\r\n        .progress-bar {\r\n            height: 100%;\r\n            background: linear-gradient(90deg, #8a2be2, #ff1493);\r\n            border-radius: 50px;\r\n            transition: width 0.6s ease-out;\r\n            position: relative;\r\n        }\r\n\r\n        .progress-bar::after {\r\n            content: '';\r\n            position: absolute;\r\n            top: 0;\r\n            left: 0;\r\n            right: 0;\r\n            bottom: 0;\r\n            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);\r\n            animation: shimmer 2s infinite;\r\n        }\r\n\r\n        @keyframes shimmer {\r\n            0% { transform: translateX(-100%); }\r\n            100% { transform: translateX(100%); }\r\n        }\r\n\r\n        .task-footer {\r\n            display: flex;\r\n            justify-content: space-between;\r\n            align-items: center;\r\n            gap: 10px;\r\n        }\r\n\r\n        .task-month {\r\n            color: rgba(255, 255, 255, 0.6);\r\n            font-size: 0.85rem;\r\n            font-weight: 600;\r\n        }\r\n\r\n        .task-status {\r\n            display: inline-block;\r\n            padding: 4px 12px;\r\n            border-radius: 50px;\r\n            font-size: 0.7rem;\r\n            font-weight: 700;\r\n            text-transform: uppercase;\r\n            letter-spacing: 0.5px;\r\n        }\r\n\r\n        .task-status.completed {\r\n            background: rgba(74, 222, 128, 0.2);\r\n            border: 1px solid rgba(74, 222, 128, 0.4);\r\n            color: #4ade80;\r\n        }\r\n\r\n        .task-status.nearing-completion {\r\n            background: rgba(74, 222, 128, 0.15);\r\n            border: 1px solid rgba(74, 222, 128, 0.3);\r\n            color: #4ade80;\r\n        }\r\n\r\n        .task-status.in-progress {\r\n            background: rgba(251, 191, 36, 0.2);\r\n            border: 1px solid rgba(251, 191, 36, 0.4);\r\n            color: #fbbf24;\r\n        }\r\n\r\n        .task-status.started {\r\n            background: rgba(59, 130, 246, 0.2);\r\n            border: 1px solid rgba(59, 130, 246, 0.4);\r\n            color: #3b82f6;\r\n        }\r\n\r\n        .task-status.not-started {\r\n            background: rgba(100, 100, 100, 0.2);\r\n            border: 1px solid rgba(100, 100, 100, 0.4);\r\n            color: #999;\r\n        }\r\n\r\n        @media (max-width: 768px) {\r\n            .monitor-title {\r\n                font-size: 2rem;\r\n            }\r\n\r\n            .month-navigation {\r\n                flex-direction: column;\r\n                gap: 15px;\r\n            }\r\n\r\n            .current-month {\r\n                font-size: 1.5rem;\r\n            }\r\n\r\n            .categories-tabs {\r\n                flex-direction: column;\r\n            }\r\n\r\n            .category-tab {\r\n                text-align: center;\r\n            }\r\n\r\n            .category-summary {\r\n                grid-template-columns: 1fr;\r\n            }\r\n\r\n            .tasks-grid {\r\n                grid-template-columns: 1fr;\r\n            }\r\n        }\r\n\r\n        \/* Floating particles *\/\r\n        @keyframes monitor-float {\r\n            0%, 100% { transform: translateY(0) rotate(0deg); }\r\n            50% { transform: translateY(-20px) rotate(180deg); }\r\n        }\r\n\r\n        .monitor-particle {\r\n            position: fixed;\r\n            width: 4px;\r\n            height: 4px;\r\n            background: rgba(138, 43, 226, 0.4);\r\n            border-radius: 50%;\r\n            pointer-events: none;\r\n            animation: monitor-float 6s infinite ease-in-out;\r\n            z-index: 1;\r\n        }\r\n\r\n        .empty-state {\r\n            text-align: center;\r\n            padding: 60px 20px;\r\n            color: rgba(255, 255, 255, 0.5);\r\n        }\r\n\r\n        .empty-state-icon {\r\n            font-size: 4rem;\r\n            margin-bottom: 20px;\r\n            opacity: 0.3;\r\n        }\r\n\r\n        .empty-state-text {\r\n            font-size: 1.2rem;\r\n        }\r\n    <\/style>\r\n\r\n    <div class=\"monitor-container\">\r\n        \r\n        \r\n\r\n        <div class=\"categories-tabs\" id=\"categoriesTabs\"><\/div>\r\n\r\n        <div class=\"status-filters\" id=\"statusFilters\"><\/div>\r\n\t\t\r\n\t\t<div class=\"month-navigation\">\r\n            <button class=\"nav-btn\" id=\"prevBtn\" onclick=\"previousMonth()\">\u2190<\/button>\r\n            <div class=\"current-month\" id=\"currentMonth\">January 2024<\/div>\r\n            <button class=\"nav-btn\" id=\"nextBtn\" onclick=\"nextMonth()\">\u2192<\/button>\r\n        <\/div>\r\n\r\n        <div class=\"tasks-section\">\r\n            <div class=\"category-summary\" id=\"categorySummary\"><\/div>\r\n            <div class=\"tasks-grid\" id=\"tasksContainer\"><\/div>\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <script>\r\n        \/\/ Sample data structure\r\n        const tasksData = {\r\n    \"Marketing\": [\r\n        { name: \"Social Media Campaign\", baseProgress: [5, 30, 60, 85, 100, 100] },\r\n        { name: \"Content Creation\", baseProgress: [0, 25, 55, 78, 95, 100] },\r\n        { name: \"Email Marketing\", baseProgress: [8, 35, 62, 85, 97, 100] },\r\n        { name: \"Print Media\", baseProgress: [12, 38, 65, 85, 97, 100] },\r\n        { name: \"Campaign Planning & Monitoring\", baseProgress: [5, 30, 60, 85, 97, 100] }\r\n    ],\r\n\r\n    \"Event Planning & Management\": [\r\n        { name: \"Event Strategy & Concept Ownership\", baseProgress: [20, 65, 100, 100, 100, 100] },\r\n        { name: \"Project Governance & Timeline Control\", baseProgress: [10, 45, 75, 92, 100, 100] },\r\n        { name: \"Budget Management & Cost Control\", baseProgress: [15, 48, 80, 96, 100, 100] },\r\n        { name: \"Client & Stakeholder Coordination\", baseProgress: [5, 28, 58, 85, 97, 100] }\r\n    ],\r\n\r\n    \"Promotions\": [\r\n        { name: \"Promotional Partnerships & Alliances\", baseProgress: [0, 25, 58, 85, 97, 100] },\r\n        { name: \"Outreach & Engagement Programs\", baseProgress: [5, 35, 66, 88, 98, 100] },\r\n        { name: \"Promotional Asset Deployment\", baseProgress: [0, 22, 52, 78, 95, 100] }\r\n    ],\r\n\r\n    \"Digital Presence\": [\r\n        { name: \"Digital Presence Strategy\", baseProgress: [20, 70, 100, 100, 100, 100] },\r\n        { name: \"Social Media & Online Engagement\", baseProgress: [5, 30, 60, 85, 97, 100] },\r\n        { name: \"Digital Performance Monitoring\", baseProgress: [0, 25, 55, 85, 97, 100] },\r\n        { name: \"Website\", baseProgress: [0, 25, 55, 85, 97, 100] }\r\n    ],\r\n\r\n    \"Venue Management\": [\r\n        { name: \"Venue Identification & Negotiation\", baseProgress: [25, 75, 100, 100, 100, 100] },\r\n        { name: \"Venue Contracting & Compliance\", baseProgress: [15, 60, 95, 100, 100, 100] },\r\n        { name: \"Venue Coordination & Readiness\", baseProgress: [0, 25, 55, 85, 97, 100] }\r\n    ],\r\n\r\n    \"Advertising & Media\": [\r\n        { name: \"Advertising Strategy & Media Planning\", baseProgress: [15, 55, 90, 100, 100, 100] },\r\n        { name: \"Paid Media Execution\", baseProgress: [0, 25, 58, 85, 97, 100] },\r\n        { name: \"Media Relations & Coverage\", baseProgress: [5, 35, 64, 86, 97, 100] }\r\n    ],\r\n\r\n    \"Speakers & Chief Guests\": [\r\n        { name: \"Speaker & Chief Guest Strategy\", baseProgress: [20, 65, 100, 100, 100, 100] },\r\n        { name: \"Speaker Acquisition & Confirmations\", baseProgress: [5, 35, 66, 88, 98, 100] },\r\n        { name: \"Speaker Experience & Coordination\", baseProgress: [0, 25, 58, 85, 97, 100] }\r\n    ],\r\n\r\n    \"Sponsors & Partners\": [\r\n        { name: \"Sponsorship Strategy & Packaging\", baseProgress: [15, 55, 90, 100, 100, 100] },\r\n        { name: \"Sponsor Acquisition & Relationship Management\", baseProgress: [5, 35, 64, 85, 96, 100] },\r\n        { name: \"Sponsor Deliverables & Visibility Management\", baseProgress: [0, 25, 58, 85, 97, 100] }\r\n    ],\r\n\r\n    \"Sales\": [\r\n        { name: \"Lead Generation\", baseProgress: [18, 48, 74, 91, 99, 100] },\r\n        { name: \"Onboarding\", baseProgress: [0, 30, 63, 86, 97, 100] },\r\n        { name: \"Partnership Development\", baseProgress: [5, 35, 64, 85, 96, 100] },\r\n        { name: \"Target Expansion\", baseProgress: [0, 22, 52, 78, 93, 100] }\r\n    ],\r\n\r\n    \"Logistics\": [\r\n        { name: \"End-to-End Logistics Planning\", baseProgress: [10, 42, 72, 92, 100, 100] },\r\n        { name: \"Vendor Management & Execution Oversight\", baseProgress: [5, 35, 64, 86, 97, 100] },\r\n        { name: \"On-Ground Operations Supervision\", baseProgress: [0, 15, 45, 75, 95, 100] }\r\n    ],\r\n\r\n    \"Finance\": [\r\n        { name: \"Budget Planning\", baseProgress: [20, 60, 90, 100, 100, 100] },\r\n        { name: \"Expense Tracking\", baseProgress: [10, 35, 62, 85, 97, 100] },\r\n        { name: \"Financial Audits\", baseProgress: [0, 15, 45, 75, 95, 100] },\r\n        { name: \"Revenue Forecasting\", baseProgress: [5, 32, 63, 86, 97, 100] }\r\n    ],\r\n\r\n    \"Customer Support\": [\r\n        { name: \"Helpdesk Setup\", baseProgress: [15, 45, 75, 92, 100, 100] },\r\n        { name: \"Issue Resolution\", baseProgress: [10, 38, 66, 88, 98, 100] },\r\n        { name: \"Feedback Analysis\", baseProgress: [0, 20, 50, 78, 95, 100] },\r\n        { name: \"Support Staff Training\", baseProgress: [12, 42, 72, 92, 99, 100] }\r\n    ]\r\n};\r\n\r\n\r\n        const months = [\r\n            \"November 2025\", \"December 2025\", \"January 2026\", \"February 2026\", \"March 2026\", \"April 2026\" ];\r\n\r\n        let currentMonthIndex = 0;\r\n        let currentCategory = \"Marketing\";\r\n        let activeStatusFilter = \"all\";\r\n\r\n        \/\/ Initialize categories tabs\r\n        function initCategories() {\r\n            const tabsContainer = document.getElementById('categoriesTabs');\r\n            Object.keys(tasksData).forEach(category => {\r\n                const tab = document.createElement('div');\r\n                tab.className = `category-tab ${category === currentCategory ? 'active' : ''}`;\r\n                tab.textContent = category;\r\n                tab.onclick = () => switchCategory(category);\r\n                tabsContainer.appendChild(tab);\r\n            });\r\n        }\r\n\r\n        \/\/ Initialize status filters\r\n        function initStatusFilters() {\r\n            const filtersContainer = document.getElementById('statusFilters');\r\n            const statuses = [\r\n                { id: 'all', label: 'All Tasks' },\r\n                { id: 'not-started', label: 'Not Started' },\r\n                { id: 'started', label: 'Started' },\r\n                { id: 'in-progress', label: 'In Progress' },\r\n                { id: 'nearing-completion', label: 'Nearing Completion' },\r\n                { id: 'completed', label: 'Completed' }\r\n            ];\r\n\r\n            statuses.forEach(status => {\r\n                const filter = document.createElement('div');\r\n                filter.className = `status-filter ${status.id === activeStatusFilter ? 'active' : ''}`;\r\n                filter.textContent = status.label;\r\n                filter.onclick = () => switchStatusFilter(status.id);\r\n                filtersContainer.appendChild(filter);\r\n            });\r\n        }\r\n\r\n        \/\/ Switch status filter\r\n        function switchStatusFilter(statusId) {\r\n            activeStatusFilter = statusId;\r\n            \r\n            document.querySelectorAll('.status-filter').forEach(filter => {\r\n                filter.classList.remove('active');\r\n            });\r\n            event.target.classList.add('active');\r\n            \r\n            renderTasks();\r\n        }\r\n\r\n        \/\/ Switch category\r\n        function switchCategory(category) {\r\n            currentCategory = category;\r\n            \r\n            document.querySelectorAll('.category-tab').forEach(tab => {\r\n                tab.classList.toggle('active', tab.textContent === category);\r\n            });\r\n            \r\n            renderTasks();\r\n        }\r\n\r\n        \/\/ Update month display\r\n        function updateMonthDisplay() {\r\n            document.getElementById('currentMonth').textContent = `${months[currentMonthIndex]}`;\r\n            document.getElementById('prevBtn').disabled = currentMonthIndex === 0;\r\n            document.getElementById('nextBtn').disabled = currentMonthIndex === 5;\r\n            renderTasks();\r\n        }\r\n\r\n        \/\/ Navigate months\r\n        function previousMonth() {\r\n            if (currentMonthIndex > 0) {\r\n                currentMonthIndex--;\r\n                updateMonthDisplay();\r\n            }\r\n        }\r\n\r\n        function nextMonth() {\r\n            if (currentMonthIndex < 5) {\r\n                currentMonthIndex++;\r\n                updateMonthDisplay();\r\n            }\r\n        }\r\n\r\n        \/\/ Get task status based on progress\r\n        function getStatus(progress) {\r\n            if (progress === 0) return 'not-started';\r\n            if (progress === 100) return 'completed';\r\n            if (progress > 70) return 'nearing-completion';\r\n            if (progress > 20) return 'in-progress';\r\n            return 'started';\r\n        }\r\n\r\n        \/\/ Get status display name\r\n        function getStatusName(status) {\r\n            return status.split('-').map(word => word.charAt(0).toUpperCase() + word.slice(1)).join(' ');\r\n        }\r\n\r\n        \/\/ Render category summary\r\n        function renderSummary() {\r\n            const tasks = tasksData[currentCategory];\r\n            const totalTasks = tasks.length;\r\n            const statusCounts = {\r\n                'not-started': 0,\r\n                'started': 0,\r\n                'in-progress': 0,\r\n                'nearing-completion': 0,\r\n                'completed': 0\r\n            };\r\n            let totalProgress = 0;\r\n\r\n            tasks.forEach(task => {\r\n                const progress = task.baseProgress[currentMonthIndex];\r\n                totalProgress += progress;\r\n                const status = getStatus(progress);\r\n                statusCounts[status]++;\r\n            });\r\n\r\n            const avgProgress = (totalProgress \/ totalTasks).toFixed(1);\r\n\r\n            const summaryHTML = `\r\n                <div class=\"summary-item\">\r\n                    <div class=\"summary-label\">Total Tasks<\/div>\r\n                    <div class=\"summary-value\">${totalTasks}<\/div>\r\n                <\/div>\r\n                <div class=\"summary-item\">\r\n                    <div class=\"summary-label\">Completed<\/div>\r\n                    <div class=\"summary-value\">${statusCounts['completed']}<\/div>\r\n                <\/div>\r\n                <div class=\"summary-item\">\r\n                    <div class=\"summary-label\">In Progress<\/div>\r\n                    <div class=\"summary-value\">${statusCounts['in-progress'] + statusCounts['started']}<\/div>\r\n                <\/div>\r\n                <div class=\"summary-item\">\r\n                    <div class=\"summary-label\">Avg Progress<\/div>\r\n                    <div class=\"summary-value\">${avgProgress}%<\/div>\r\n                <\/div>\r\n            `;\r\n\r\n            document.getElementById('categorySummary').innerHTML = summaryHTML;\r\n        }\r\n\r\n        \/\/ Render tasks\r\n        function renderTasks() {\r\n            const tasks = tasksData[currentCategory];\r\n            const container = document.getElementById('tasksContainer');\r\n            \r\n            \/\/ Filter tasks based on status\r\n            const filteredTasks = tasks.filter(task => {\r\n                if (activeStatusFilter === 'all') return true;\r\n                const currentStatus = getStatus(task.baseProgress[currentMonthIndex]);\r\n                return currentStatus === activeStatusFilter;\r\n            });\r\n\r\n            if (filteredTasks.length === 0) {\r\n                container.innerHTML = `\r\n                    <div class=\"empty-state\">\r\n                        <div class=\"empty-state-icon\">\ud83d\udd0d<\/div>\r\n                        <div class=\"empty-state-text\">No tasks found for this filter<\/div>\r\n                    <\/div>\r\n                `;\r\n                renderSummary();\r\n                return;\r\n            }\r\n\r\n            container.innerHTML = '';\r\n\r\n            filteredTasks.forEach(task => {\r\n                const progress = task.baseProgress[currentMonthIndex];\r\n                const status = getStatus(progress);\r\n\r\n                const taskCard = document.createElement('div');\r\n                taskCard.className = `task-card ${status}`;\r\n                taskCard.innerHTML = `\r\n                    <div class=\"task-header\">\r\n                        <div class=\"task-name\">${task.name}<\/div>\r\n                        <div class=\"task-percentage\">${progress}%<\/div>\r\n                    <\/div>\r\n                    <div class=\"progress-bar-container\">\r\n                        <div class=\"progress-bar\" style=\"width: ${progress}%\"><\/div>\r\n                    <\/div>\r\n                    <div class=\"task-footer\">\r\n                        <div class=\"task-month\">${months[currentMonthIndex]}<\/div>\r\n                        <div class=\"task-status ${status}\">${getStatusName(status)}<\/div>\r\n                    <\/div>\r\n                `;\r\n\r\n                container.appendChild(taskCard);\r\n            });\r\n\r\n            renderSummary();\r\n        }\r\n\r\n        \/\/ Create floating particles\r\n        function createParticles() {\r\n            for (let i = 0; i < 20; i++) {\r\n                const particle = document.createElement('div');\r\n                particle.className = 'monitor-particle';\r\n                particle.style.left = Math.random() * 100 + '%';\r\n                particle.style.top = Math.random() * 100 + '%';\r\n                particle.style.animationDelay = Math.random() * 6 + 's';\r\n                particle.style.animationDuration = (Math.random() * 4 + 4) + 's';\r\n                document.body.appendChild(particle);\r\n            }\r\n        }\r\n\r\n        \/\/ Initialize\r\n        initCategories();\r\n        initStatusFilters();\r\n        updateMonthDisplay();\r\n        createParticles();\r\n    <\/script>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\r\n\t\t\t\t<\/div>\r\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Calendar Plan \u2190 January 2024 \u2192<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-20985","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/demo.vleafy.com\/ibc2\/wp-json\/wp\/v2\/pages\/20985","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/demo.vleafy.com\/ibc2\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/demo.vleafy.com\/ibc2\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/demo.vleafy.com\/ibc2\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/demo.vleafy.com\/ibc2\/wp-json\/wp\/v2\/comments?post=20985"}],"version-history":[{"count":0,"href":"https:\/\/demo.vleafy.com\/ibc2\/wp-json\/wp\/v2\/pages\/20985\/revisions"}],"wp:attachment":[{"href":"https:\/\/demo.vleafy.com\/ibc2\/wp-json\/wp\/v2\/media?parent=20985"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}