{"id":142,"date":"2026-05-30T02:52:07","date_gmt":"2026-05-30T02:52:07","guid":{"rendered":"https:\/\/toolibee.com\/?page_id=142"},"modified":"2026-05-30T22:38:39","modified_gmt":"2026-05-30T22:38:39","slug":"assignment-planner-2","status":"publish","type":"page","link":"https:\/\/toolibee.com\/?page_id=142","title":{"rendered":"Assignment Planner"},"content":{"rendered":"\n<div class=\"toolibee-page-menu\">\n  <a class=\"toolibee-page-logo\" href=\"\/toolibee\/\">\n    <img decoding=\"async\" src=\"https:\/\/toolibee.com\/wp-content\/uploads\/2026\/02\/toolibee-logo.png\" alt=\"Toolibee\">\n  <\/a>\n\n  <div class=\"toolibee-page-links\">\n    <a href=\"\/toolibee\/\">Home<\/a>\n    <a href=\"\/tools\/\">Tools<\/a>\n    <a href=\"\/my-account\/\">Login<\/a>\n  <\/div>\n<\/div>\n\n<div class=\"toolibee-back-tools\">\n  <a href=\"\/tools\/\">\u2190 Back to All Tools<\/a>\n<\/div>\n\n<style>\n.toolibee-page-menu {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  max-width: 1050px;\n  margin: 0 auto 10px;\n  padding: 12px 18px;\n  border-bottom: 1px solid #e6eef0;\n}\n\n.toolibee-page-logo img {\n  height: 48px;\n  width: auto;\n  display: block;\n}\n\n.toolibee-page-links {\n  display: flex;\n  gap: 22px;\n}\n\n.toolibee-page-links a,\n.toolibee-back-tools a {\n  color: #00587C;\n  font-weight: 700;\n  text-decoration: none;\n}\n\n.toolibee-page-links a:hover,\n.toolibee-back-tools a:hover {\n  text-decoration: underline;\n}\n\n.toolibee-back-tools {\n  max-width: 1050px;\n  margin: 0 auto 18px;\n  padding: 0 18px;\n}\n\n@media (max-width: 600px) {\n  .toolibee-page-menu {\n    padding: 10px 14px;\n  }\n\n  .toolibee-page-logo img {\n    height: 38px;\n  }\n\n  .toolibee-page-links {\n    gap: 14px;\n    font-size: 14px;\n  }\n}\n<\/style>\n\n\n\n<div id=\"tb-plan-5519\" class=\"tb-wrap\" data-logged-in=\"no\">\n    <div class=\"tb-head\">\n        <div class=\"tb-bee\">\ud83d\udc1d<\/div>\n        <div>\n            <h2>Assignment Planner<\/h2>\n            <p>Organize assignments into a saved visual work plan.<\/p>\n        <\/div>\n    <\/div>\n\n    <div class=\"tb-body\">\n        <div class=\"tb-save-note\"><\/div>\n\n        <div class=\"tb-rows\"><\/div>\n\n        <div class=\"tb-actions\">\n            <button type=\"button\" class=\"tb-btn secondary tb-add\">Add Assignment<\/button>\n            <button type=\"button\" class=\"tb-btn tb-plan\">Build Planner<\/button>\n            <button type=\"button\" class=\"tb-btn secondary tb-save\">Save Planner<\/button>\n            <button type=\"button\" class=\"tb-btn secondary tb-copy\">Copy<\/button>\n            <button type=\"button\" class=\"tb-btn secondary tb-clear\">Clear<\/button>\n        <\/div>\n\n        <div class=\"tb-output\">\n            <div class=\"tb-empty\">Your planner will appear here.<\/div>\n        <\/div>\n    <\/div>\n<\/div>\n\n<style>\n.tb-wrap{font-family:Inter,Arial,sans-serif;max-width:1100px;margin:24px auto;color:#1f2937}\n.tb-head{background:linear-gradient(135deg,#18324a,#24577c);color:white;padding:24px;display:flex;gap:18px;border-radius:24px 24px 0 0}\n.tb-head h2{margin:0;font-size:26px}\n.tb-head p{margin:5px 0 0;color:#e8f5ff}\n.tb-bee{font-size:32px}\n.tb-body{padding:28px;border:1px solid #dbe7f3;border-top:none;border-radius:0 0 24px 24px;background:#fff}\n.tb-save-note{font-weight:800;color:#18324a;margin-bottom:14px}\n.tb-row{display:grid;grid-template-columns:2fr 1fr 1fr auto;gap:12px;margin-bottom:12px;background:#eaf6ff;border:1px solid #dbe7f3;border-radius:16px;padding:12px}\n.tb-input{padding:14px;border-radius:14px;border:1px solid #dbe7f3;width:100%;box-sizing:border-box}\n.tb-btn{padding:12px 20px;border-radius:999px;border:none;cursor:pointer;font-weight:800;background:#2f80ed;color:white}\n.tb-btn.secondary{background:white;border:1px solid #dbe7f3;color:#18324a}\n.tb-remove{color:#b42318!important;border-color:#f3b4ae!important}\n.tb-actions{display:flex;gap:10px;margin-top:18px;margin-bottom:22px;flex-wrap:wrap}\n.tb-output{background:#f8fbff;border:1px solid #dbe7f3;border-radius:20px;padding:18px;min-height:120px}\n.tb-board{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}\n.tb-column{border-radius:20px;padding:18px;min-height:260px}\n.today{background:#ffe4e4}\n.week{background:#fff4cf}\n.later{background:#e4f1ff}\n.tb-title{font-size:20px;font-weight:900;margin-bottom:14px;color:#18324a}\n.tb-card{background:white;padding:16px;border-radius:18px;margin-bottom:12px;box-shadow:0 6px 18px rgba(0,0,0,.06)}\n.tb-card-name{font-size:18px;font-weight:900;margin-bottom:10px;color:#18324a}\n.tb-pill{display:inline-block;padding:6px 12px;border-radius:999px;font-size:13px;background:#eef5ff;margin:3px;font-weight:800}\n.tb-tip{margin-top:10px;color:#64748b;font-size:14px;line-height:1.45}\n.tb-empty{color:#64748b;font-weight:700}\n@media(max-width:760px){.tb-board,.tb-row{grid-template-columns:1fr}.tb-head{align-items:flex-start}}\n<\/style>\n\n<script>\ndocument.addEventListener(\"DOMContentLoaded\", function () {\n    const root = document.getElementById(\"tb-plan-5519\");\n    if (!root) return;\n\n    const ajaxUrl = \"https:\/\/toolibee.com\/wp-admin\/admin-ajax.php\";\n    const nonce = \"6e2461ba3a\";\n    const loggedIn = root.dataset.loggedIn === \"yes\";\n    const rows = root.querySelector(\".tb-rows\");\n    const output = root.querySelector(\".tb-output\");\n    const note = root.querySelector(\".tb-save-note\");\n    const localKey = \"toolibee_assignment_planner_saved\";\n\n    note.textContent = loggedIn\n        ? \"You are logged in. Your planner can be saved to your Toolibee account.\"\n        : \"You are not logged in. Your planner will save on this browser only.\";\n\n    function escapeHTML(text) {\n        const div = document.createElement(\"div\");\n        div.textContent = text || \"\";\n        return div.innerHTML;\n    }\n\n    function ajax(action, data = {}) {\n        const form = new FormData();\n        form.append(\"action\", action);\n        form.append(\"nonce\", nonce);\n        Object.keys(data).forEach(k => form.append(k, data[k]));\n\n        return fetch(ajaxUrl, {\n            method: \"POST\",\n            credentials: \"same-origin\",\n            body: form\n        }).then(r => r.json());\n    }\n\n    function addRow(name = \"\", date = \"\", size = \"Medium\") {\n        const row = document.createElement(\"div\");\n        row.className = \"tb-row\";\n\n        row.innerHTML = `\n            <input class=\"tb-input tb-name\" placeholder=\"Assignment\" value=\"${escapeHTML(name)}\">\n            <input class=\"tb-input tb-date\" type=\"date\" value=\"${escapeHTML(date)}\">\n            <select class=\"tb-input tb-size\">\n                <option>Small<\/option>\n                <option>Medium<\/option>\n                <option>Large<\/option>\n            <\/select>\n            <button type=\"button\" class=\"tb-btn secondary tb-remove\">Remove<\/button>\n        `;\n\n        row.querySelector(\".tb-size\").value = size;\n        row.querySelector(\".tb-remove\").onclick = function () {\n            row.remove();\n            saveLocalAuto();\n        };\n\n        row.querySelectorAll(\"input, select\").forEach(el => {\n            el.addEventListener(\"change\", saveLocalAuto);\n            el.addEventListener(\"keyup\", saveLocalAuto);\n        });\n\n        rows.appendChild(row);\n    }\n\n    function collectAssignments() {\n        let items = [];\n\n        root.querySelectorAll(\".tb-row\").forEach(r => {\n            const name = r.querySelector(\".tb-name\").value.trim();\n            const date = r.querySelector(\".tb-date\").value;\n            const size = r.querySelector(\".tb-size\").value;\n\n            if (name || date) {\n                items.push({ name, date, size });\n            }\n        });\n\n        return items;\n    }\n\n    function days(date) {\n        const now = new Date();\n        now.setHours(0,0,0,0);\n\n        const parts = date.split(\"-\");\n        const due = new Date(parts[0], parts[1] - 1, parts[2]);\n        due.setHours(0,0,0,0);\n\n        return Math.ceil((due - now) \/ 86400000);\n    }\n\n    function prettyDate(date) {\n        const parts = date.split(\"-\");\n        const d = new Date(parts[0], parts[1] - 1, parts[2]);\n        return d.toLocaleDateString(undefined, {\n            weekday: \"short\",\n            month: \"short\",\n            day: \"numeric\"\n        });\n    }\n\n    function suggestion(size, left) {\n        if (left < 0) return \"Past due. Move this to the top of your list.\";\n        if (left === 0) return \"Due today. Focus on the required pieces first.\";\n        if (left === 1) return \"Due tomorrow. Finish the main work today and review before submitting.\";\n        if (size === \"Large\") return \"Block 2 to 3 work sessions before the due date.\";\n        if (size === \"Medium\") return \"Schedule one focused work session before the due date.\";\n        return \"This should fit into one short work session.\";\n    }\n\n    function buildPlanner() {\n        const items = collectAssignments().filter(i => i.name && i.date);\n\n        if (!items.length) {\n            output.innerHTML = '<div class=\"tb-empty\">Add assignments with due dates first.<\/div>';\n            return;\n        }\n\n        let today = \"\";\n        let week = \"\";\n        let later = \"\";\n\n        items.sort((a,b) => a.date.localeCompare(b.date)).forEach(item => {\n            const left = days(item.date);\n            let bucket = \"later\";\n\n            if (left <= 1) bucket = \"today\";\n            else if (left <= 7) bucket = \"week\";\n\n            const html = `\n                <div class=\"tb-card\">\n                    <div class=\"tb-card-name\">${escapeHTML(item.name)}<\/div>\n                    <span class=\"tb-pill\">Due ${prettyDate(item.date)}<\/span>\n                    <span class=\"tb-pill\">${left < 0 ? \"Past due\" : left === 0 ? \"Today\" : left === 1 ? \"Tomorrow\" : left + \" days\"}<\/span>\n                    <span class=\"tb-pill\">${escapeHTML(item.size)}<\/span>\n                    <div class=\"tb-tip\">${suggestion(item.size, left)}<\/div>\n                <\/div>\n            `;\n\n            if (bucket === \"today\") today += html;\n            else if (bucket === \"week\") week += html;\n            else later += html;\n        });\n\n        output.innerHTML = `\n            <div class=\"tb-board\">\n                <div class=\"tb-column today\">\n                    <div class=\"tb-title\">\ud83d\udfe5 Today \/ Urgent<\/div>\n                    ${today || '<div class=\"tb-empty\">Nothing urgent.<\/div>'}\n                <\/div>\n                <div class=\"tb-column week\">\n                    <div class=\"tb-title\">\ud83d\udfe8 This Week<\/div>\n                    ${week || '<div class=\"tb-empty\">Nothing this week.<\/div>'}\n                <\/div>\n                <div class=\"tb-column later\">\n                    <div class=\"tb-title\">\ud83d\udfe6 Later<\/div>\n                    ${later || '<div class=\"tb-empty\">Nothing scheduled later.<\/div>'}\n                <\/div>\n            <\/div>\n        `;\n    }\n\n    function saveLocalAuto() {\n        const items = collectAssignments();\n        localStorage.setItem(localKey, JSON.stringify(items));\n    }\n\n    function loadLocal() {\n        try {\n            return JSON.parse(localStorage.getItem(localKey) || \"[]\");\n        } catch(e) {\n            return [];\n        }\n    }\n\n    function savePlanner() {\n        const items = collectAssignments();\n\n        if (!items.length) {\n            alert(\"Add at least one assignment first.\");\n            return;\n        }\n\n        localStorage.setItem(localKey, JSON.stringify(items));\n\n        if (!loggedIn) {\n            alert(\"Planner saved in this browser.\");\n            return;\n        }\n\n        ajax(\"toolibee_assignment_planner_save\", {\n            assignments: JSON.stringify(items)\n        }).then(data => {\n            alert(data.success ? \"Planner saved.\" : (data.data || \"Could not save planner.\"));\n        }).catch(() => {\n            alert(\"Could not save planner.\");\n        });\n    }\n\n    function loadSaved() {\n        if (!loggedIn) {\n            const localItems = loadLocal();\n            if (localItems.length) {\n                rows.innerHTML = \"\";\n                localItems.forEach(i => addRow(i.name, i.date, i.size));\n                buildPlanner();\n            } else {\n                addRow();\n            }\n            return;\n        }\n\n        ajax(\"toolibee_assignment_planner_load\").then(data => {\n            rows.innerHTML = \"\";\n\n            const serverItems = data.success ? (data.data.assignments || []) : [];\n            const items = serverItems.length ? serverItems : loadLocal();\n\n            if (items.length) {\n                items.forEach(i => addRow(i.name, i.date, i.size));\n                buildPlanner();\n            } else {\n                addRow();\n            }\n        }).catch(() => {\n            addRow();\n        });\n    }\n\n    root.querySelector(\".tb-add\").onclick = function () {\n        addRow();\n        saveLocalAuto();\n    };\n\n    root.querySelector(\".tb-plan\").onclick = buildPlanner;\n    root.querySelector(\".tb-save\").onclick = savePlanner;\n\n    root.querySelector(\".tb-copy\").onclick = function () {\n        navigator.clipboard.writeText(output.innerText || \"\");\n        alert(\"Planner copied.\");\n    };\n\n    root.querySelector(\".tb-clear\").onclick = function () {\n        if (!confirm(\"Clear this planner?\")) return;\n\n        rows.innerHTML = \"\";\n        output.innerHTML = '<div class=\"tb-empty\">Your planner will appear here.<\/div>';\n        localStorage.removeItem(localKey);\n        addRow();\n\n        if (loggedIn) {\n            ajax(\"toolibee_assignment_planner_save\", {\n                assignments: JSON.stringify([])\n            });\n        }\n    };\n\n    loadSaved();\n});\n<\/script>\n\n\n","protected":false},"excerpt":{"rendered":"<p>Home Tools Login \u2190 Back to All Tools<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"page-no-title","meta":{"footnotes":""},"class_list":["post-142","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/toolibee.com\/index.php?rest_route=\/wp\/v2\/pages\/142","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/toolibee.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/toolibee.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/toolibee.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/toolibee.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=142"}],"version-history":[{"count":2,"href":"https:\/\/toolibee.com\/index.php?rest_route=\/wp\/v2\/pages\/142\/revisions"}],"predecessor-version":[{"id":475,"href":"https:\/\/toolibee.com\/index.php?rest_route=\/wp\/v2\/pages\/142\/revisions\/475"}],"wp:attachment":[{"href":"https:\/\/toolibee.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=142"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}