A4 Monthly Calendar

[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_165":166,"_167":168},"routes/_app.x.$handle.$name",{"_96":95,"_32":45,"_104":86,"_27":37,"_13":14,"_105":-5,"_11":106,"_107":108,"_109":110,"_111":112,"_113":114,"_20":-5,"_115":-5,"_116":-5,"_117":25,"_118":119,"_120":58,"_121":-5,"_122":-5,"_123":124},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_43":44,"_32":45,"_38":46,"_47":-5,"_48":25,"_49":50,"_51":50,"_52":-5,"_53":-5,"_18":54,"_55":56,"_57":58,"_59":58,"_60":-5,"_61":62,"_63":64,"_65":-5,"_66":-5,"_67":-5,"_68":-5,"_69":70,"_71":70,"_72":73,"_74":73,"_75":73,"_76":70,"_77":70,"_78":79,"_80":81,"_82":83,"_84":25},"version",13,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":23,"_24":25,"_26":25,"_27":28,"_29":28},"file",{"_30":31,"_32":28,"_34":35,"_36":37,"_38":39,"_40":14,"_41":42,"_24":25},"previous",{"_30":31,"_32":33,"_34":35,"_36":37},"deleted",false,"deletedHere","path","index.html","latestPath","fileId","0282bc34-ae9e-11f0-9db3-0224a6c84d84","name","new-file-4303.ts","fileType","script","content","","createdAt",["D",1761065417953],"branchVersion","branchId","c43388fa-ae5c-11f0-9eda-0224a6c84d84","id","c4332e82-ae5c-11f0-9eda-0224a6c84d84","monthlycal",["D",1761037390035],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","imageUrl","519f5612-7707-4a31-9017-183f9cf48281","pinnedFileId","c43626e6-ae5c-11f0-9eda-0224a6c84d84","pinPreview",true,"pinMigrated","screenshotVersion","likeCount",0,"orgId","9f6b4f9c-1f53-40b7-bbcc-7fee8bdc5696","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_96":95,"_103":99},"org",{"_96":95,"_97":-5,"_98":99,"_18":54,"_100":101,"_102":25},"branch",{"_13":85,"_32":86,"_43":42,"_87":44,"_88":-5,"_89":-5,"_90":-5,"_91":-5,"_92":-5,"_93":45,"_94":95},"isOwned",34,"main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","sneeu","handle","displayName","avatar","https://images.clerk.dev/oauth_github/img_2Rbt9C4Bv9d4lh9tsVLfut26RIR.jpeg","tier","free","canRestrictVals","profileImageUrl","branchName","adoptOrgId",{"_43":44,"_32":45,"_38":161,"_47":-5,"_48":25,"_49":50,"_51":50,"_52":-5,"_53":-5,"_18":54,"_55":56,"_57":58,"_59":58,"_60":-5,"_61":62,"_63":64,"_65":-5,"_66":-5,"_67":-5,"_68":-5,"_69":70,"_71":70,"_72":73,"_74":73,"_75":73,"_76":70,"_77":70,"_78":162,"_80":163,"_82":164,"_84":25},"tree",[152,153],"files",[152,153],"counts",{"_142":62,"_143":140,"_144":140,"_145":146,"_147":148},"contents",[125,126],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_43":138,"_32":28,"_30":31,"_129":-5,"_41":42,"_40":14,"_131":25,"_38":139,"_13":140,"_34":35,"_36":37,"_24":25,"_136":-5,"_27":141},{"_43":127,"_32":128,"_30":56,"_129":-5,"_41":42,"_40":130,"_131":25,"_38":132,"_13":133,"_34":134,"_36":135,"_24":25,"_136":45,"_27":137},"e801efce-ae9d-11f0-8ad1-0224a6c84d84","main.tsx","parentId",11,"latest",["D",1761065367384],10,"http","/** @jsxImportSource https://esm.sh/react */\nimport { renderToString } from \"npm:react-dom/server\";\n\nexport default async function (req: Request) {\n return new Response(\n renderToString(\n\n \n \n \n A4 Monthly Calendar\n \n \n \n \n\n

\n\n

\n Tip: Use Print A4 for a full-page A4 calendar. Make\n sure your print settings are Portrait, A4, and margins ~8 mm.\n

\n\n \n \n\n,\n ),\n {\n headers: {\n \"Content-Type\": \"text/html\",\n },\n },\n );\n}\n\n const STYLE = ` :root {\n --border: #e5e7eb;\n --ink: #111827;\n --muted: #6b7280;\n }\n html,\n body {\n height: 100%;\n }\n body {\n margin: 0;\n font-family:\n ui-sans-serif,\n system-ui,\n -apple-system,\n Segoe UI,\n Roboto,\n Helvetica,\n Arial,\n \"Apple Color Emoji\",\n \"Segoe UI Emoji\";\n color: var(--ink);\n background: #f8fafc;\n }\n\n .toolbar {\n position: sticky;\n top: 0;\n z-index: 10;\n display: flex;\n flex-wrap: wrap;\n gap: 0.5rem;\n align-items: center;\n padding: 0.75rem;\n border-bottom: 1px solid var(--border);\n background: rgba(255, 255, 255, 0.85);\n backdrop-filter: blur(6px);\n }\n .toolbar select,\n .toolbar input,\n .toolbar button {\n border: 1px solid var(--border);\n border-radius: 0.6rem;\n padding: 0.5rem 0.75rem;\n background: white;\n font-size: 14px;\n }\n .toolbar button {\n cursor: pointer;\n }\n .toolbar .spacer {\n margin-left: auto;\n }\n\n .wrap {\n max-width: 900px;\n margin: 1rem auto 2rem;\n padding: 0.5rem;\n }\n .page {\n aspect-ratio: 210 / 297; /* A4 portrait */\n background: white;\n border-radius: 1rem;\n box-shadow: 0 10px 30px rgba(2, 6, 23, 0.08);\n padding: 24px;\n box-sizing: border-box;\n }\n\n .title {\n display: flex;\n justify-content: space-between;\n align-items: baseline;\n margin-bottom: 12px;\n }\n .title h1 {\n margin: 0;\n font-size: 28px;\n font-weight: 600;\n letter-spacing: 0.2px;\n }\n\n .grid {\n display: grid;\n grid-template-rows: auto 1fr;\n height: calc(100% - 48px);\n }\n .head {\n display: grid;\n grid-template-columns: repeat(7, 1fr);\n text-align: center;\n }\n .head div {\n border-bottom: 1px solid var(--border);\n padding: 8px;\n font-size: 12px;\n font-weight: 600;\n text-align: left;\n text-transform: uppercase;\n letter-spacing: 0.04em;\n color: #52525b;\n }\n\n .cells {\n display: grid;\n grid-template-columns: repeat(7, 1fr);\n height: 100%;\n }\n .cell {\n position: relative;\n border: 1px solid var(--border);\n min-height: 80px;\n }\n .date {\n position: absolute;\n right: 8px;\n bottom: 6px;\n font-size: 12px;\n font-weight: 600;\n color: #27272a;\n }\n\n .hint {\n color: #475569;\n font-size: 13px;\n margin: 0.5rem auto 0;\n max-width: 900px;\n padding: 0 0.5rem;\n }\n\n /* Print rules */\n @page {\n size: A4 portrait;\n margin: 8mm;\n }\n @media print {\n .toolbar,\n .hint {\n display: none !important;\n }\n .wrap {\n margin: 0 !important;\n padding: 0 !important;\n }\n .page {\n box-shadow: none !important;\n border-radius: 0 !important;\n padding: 0 !important;\n height: 100vh;\n }\n body {\n -webkit-print-color-adjust: exact;\n print-color-adjust: exact;\n background: white;\n }\n }`;\n\nconst script = ` // ---- Data helpers ----\n const monthNames = [\n \"January\",\n \"February\",\n \"March\",\n \"April\",\n \"May\",\n \"June\",\n \"July\",\n \"August\",\n \"September\",\n \"October\",\n \"November\",\n \"December\",\n ];\n const dayNames = [\"Mon\", \"Tue\", \"Wed\", \"Thu\", \"Fri\", \"Sat\", \"Sun\"]; // Monday-first\n\n function daysInMonth(year, month) {\n return new Date(year, month + 1, 0).getDate();\n }\n function firstWeekdayIndexMondayFirst(year, month) {\n const js = new Date(year, month, 1).getDay(); // 0=Sun..6=Sat\n return (js + 6) % 7; // Mon=>0 .. Sun=>6\n }\n function buildCells(year, month) {\n const dim = daysInMonth(year, month);\n const start = firstWeekdayIndexMondayFirst(year, month);\n const cells = [];\n for (let i = 0; i < start; i++) cells.push(null);\n for (let d = 1; d <= dim; d++) cells.push(d);\n const remainder = cells.length % 7;\n if (remainder)\n for (let i = 0; i < 7 - remainder; i++) cells.push(null);\n return cells; // 35 or 42\n }\n\n // ---- DOM ----\n const monthSel = document.getElementById(\"month\");\n const yearInput = document.getElementById(\"year\");\n const titleEl = document.getElementById(\"title\");\n const headEl = document.getElementById(\"head\");\n const cellsEl = document.getElementById(\"cells\");\n\n monthNames.forEach((m, i) => {\n const opt = document.createElement(\"option\");\n opt.value = i;\n opt.textContent = m;\n monthSel.appendChild(opt);\n });\n headEl.innerHTML = dayNames.map((d) => \\`

${d}

\\`).join(\"\");\n\n const today = new Date();\n let state = { year: today.getFullYear(), month: today.getMonth() };\n\n function render() {\n const { year, month } = state;\n titleEl.textContent = \\`${monthNames[month]} ${year}\\`;\n monthSel.value = month;\n yearInput.value = year;\n\n const cells = buildCells(year, month);\n const rows = Math.ceil(cells.length / 7);\n cellsEl.style.gridTemplateRows = \\`repeat(${rows}, minmax(0, 1fr))\\`;\n cellsEl.innerHTML = cells\n .map(\n (num) => \\`

${num !== null ? \\`${num}\\` : \"\"}

\\`,\n )\n .join(\"\");\n }\n\n // Navigation\n document.getElementById(\"prev\").addEventListener(\"click\", () => {\n const d = new Date(state.year, state.month - 1, 1);\n state = { year: d.getFullYear(), month: d.getMonth() };\n render();\n });\n document.getElementById(\"next\").addEventListener(\"click\", () => {\n const d = new Date(state.year, state.month + 1, 1);\n state = { year: d.getFullYear(), month: d.getMonth() };\n render();\n });\n document.getElementById(\"today\").addEventListener(\"click\", () => {\n const d = new Date();\n state = { year: d.getFullYear(), month: d.getMonth() };\n render();\n });\n\n monthSel.addEventListener(\"change\", (e) => {\n state = { ...state, month: parseInt(e.target.value, 10) };\n render();\n });\n yearInput.addEventListener(\"change\", (e) => {\n const val = parseInt(e.target.value, 10);\n if (!isNaN(val)) {\n state = { ...state, year: val };\n render();\n }\n });\n\n // Print current page\n document\n .getElementById(\"printBtn\")\n .addEventListener(\"click\", () => {\n window.print();\n });\n\n // Initial render\n render();`;","label",[128],"0626b71e-ae9e-11f0-a06f-0224a6c84d84",["D",1761065417953],1,[28],"pulls","branches","forks","envVars",{"_149":62,"_151":62},"connections",{"_149":62,"_150":62},"count","unfilledCount","emptyCount",{"_43":138,"_32":28,"_30":31,"_129":-5,"_41":42,"_40":14,"_131":25,"_38":158,"_13":140,"_34":35,"_36":37,"_24":25,"_136":-5,"_155":159,"_27":160},{"_43":127,"_32":128,"_30":56,"_129":-5,"_41":42,"_40":130,"_131":25,"_38":154,"_13":133,"_34":134,"_36":135,"_24":25,"_136":45,"_155":156,"_27":157},["D",1761065367384],"children",[],[128],["D",1761065417953],[],[28],["D",1761037390035],{"_96":95,"_103":99},{"_96":95,"_97":-5,"_98":99,"_18":54,"_100":101,"_102":25},{"_13":85,"_32":86,"_43":42,"_87":44,"_88":-5,"_89":-5,"_90":-5,"_91":-5,"_92":-5,"_93":45,"_94":95},"ctx",{"_78":-5,"_122":198,"_199":200,"_201":202,"_203":25,"_204":25,"_205":25,"_206":58,"_207":-5,"_208":-7,"_209":-7,"_210":62,"_211":25,"_212":25,"_213":-5,"_214":25,"_215":25,"_216":25,"_217":-5},"ENV",{"_169":170,"_171":172,"_173":86,"_174":175,"_176":177,"_178":179,"_180":181,"_182":183,"_184":185,"_186":187,"_188":189,"_190":191,"_192":193,"_194":195,"_196":197},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","e87eb04e707cf64e7e532c8e8ec395f209e17f15","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

Diff · v13