日程新建/修改不再刷新页面：服务端片段 + 就地重绘 (#37)

用户原话（2026-11-01）：
  「修改和新建，都不应该刷新页面，而是使用js动态调整。」

## 改法：不再手写复刻渲染，改成"服务端渲染片段 → 前端整块替换"

历史上「新建不刷新」是靠手写复刻服务端渲染做的（`putMonth` / `putTimed` /
`relayoutColumn`），它自己的注释里就记着一次真实事故：新加一条 07:00 的日程被
append 到末尾 ⇒ 落进「+N 条」看不见，刷新后又跑到第一位。修改要处理的情况更多
（跨天 / 全天状态 / 换日历本改颜色 / 改重复规则 / 挪到别的月），复刻必然出错。

⇒ 现在只有**一处渲染**：前端取服务端画好的视图片段整块替换。
   "插进去的样子"与"刷新一次的样子"必然相同。

## 服务端

- `calendar/event_update` 认 `X-Requested-With`（与 event_add / event_del 同一套约定）
  回 JSON；失败也回 JSON（可预期的拒绝不该把用户甩到一个刷新过的页面上）。
  三处失败出口 + 四处成功出口收口成两个闭包，避免"某条路径仍刷页"。
- 抽出 `calendar_view_data()`：整页渲染与局部重绘共用同一份取数/建网格逻辑。
- 新增 `calendar/view` 片段路由（月/周/日视图片段）。
- 抽出 `home_agenda_events()` + 新增 `home/agenda` 片段路由（首页卡片）。
- 抽出 `templates/calendar/_view.php`：视图区从页面模板里搬出来（原文一字未改，
  已用脚本逐行比对证明 270 行零差异）。
- `templates/layout.php` 加载 `cal_sync.js`。

## 前端

- 新增 `assets/js/cal_sync.js`：`refresh()` 按当前视图取片段替换；
  只换内容不换容器；保首页卡片滚动位置；重绘后补跑红线定时器；
  失败退回整页刷新（宁可刷一次，也不要"没刷新却也没变"）。
- `entry_popup.js` 的「保存」改 fetch 提交 → 关浮层 + 轻提示 + 局部重绘。
  名册/观影/行程/任务四个来源保持原生提交，范围不收不必要的回归面。
- 删掉日历页那 ~270 行手写插入，新建统一走同一个 `refresh()`。
- 「点格子新建」的 per-element 绑定改成 document 委托（重绘后新节点才有监听）。

## 本轮实测抓到并修掉的真 bug

`form.id` 被同名 input 遮蔽：日程编辑表里有 `<input name="id">`，
HTMLFormElement 的具名访问优先级高于原型上的 `id` ⇒ `form.id === 'calEditForm'`
恒为 false ⇒ 日程也走原生提交、整页刷新。
改用 `form.getAttribute('id')`。

## 验证（全部做过反向验证）

- 浏览器端到端 28 项：编辑/新建都不导航、改动原地可见、视图不跳、数据岛同步、
  重绘后点格子仍有效、红线定时器重建、无 JS 异常
- 反向验证 7 项：把 refresh 置空 / 改成 reload / 不调 reinit / 抹掉上下文属性，
  判据逐条转红（证明判据有牙齿）
- DOM 等价性 4 项：月/周/日视图与首页卡片，重绘后与刷新后的 DOM **逐字节相同**
  （这条判据本身也做了反向验证：删一个字、多一个节点都能抓到）
- 服务端 11 项：非 AJAX 仍 302 且真存库、AJAX 回 JSON、失败也回 JSON、
  片段路由可用、未登录被拒
- #35 跨天回归 11 项：三段的 seg/cont/is-seg-* 标记全在、贴满整列、不进全天行
- 静态检查：37 个模板片段无作用域违规；20 块内联 JS 语法全过；运行期零 Warning

templates/calendar/_view.php

@@ -0,0 +1,301 @@
+<?php
+/**
+ * 日历视图区（月 / 周 / 日）—— 从 templates/calendar/index.php 抽出来的独立片段。
+ *
+ * 🔴 工单 #37：新建 / 修改日程后要"不刷新页面、就地更新"。做法是**服务端渲染同一份
+ *    片段 → 前端整块替换**，而不是让 JS 手写复刻渲染逻辑。
+ *    这就必须把视图区从页面模板里抽出来，让整页路径与局部重绘走同一份代码 ——
+ *    只有一处渲染，"插进去的样子"与"刷新一次的样子"才不可能不一致。
+ *
+ * 抽出的方式：原文**一字未改**地搬过来，只把外层缩进调平。
+ * 所以这里用的变量与原来完全一样，由调用方给全：
+ *
+ * @var string $view     month / week / day
+ * @var array  $cols     周/日视图的列（day_columns 产出）
+ * @var array  $tgrid    build_time_grid 产出
+ * @var array  $weeks    build_month_grid 产出
+ * @var bool   $canNew   能不能新建
+ * @var float  $nowTop   当前时间红线位置（%，服务端算好）
+ *
+ * ⚠️ 调用方必须**在 require 之前**把上面这些变量准备好；本片段自己不做任何兜底
+ *    —— 兜底会让"少给了一个变量"变成静默画错，而不是当场报错。
+ */
+?>
+<?php /* 🔴 工单 #37：这个外层容器是**局部重绘的落点**。
+   JS 拿到服务端渲染的新片段后，只替换 `[data-cal-view]` 里面的内容
+   （换的是 .card 那一层，见 assets/js/cal_sync.js 的 swap()）。
+   ⚠️ 容器本身**不能**被替换掉：它上面挂着"当前视图"这个上下文，
+      替换容器会让 CSS 上依赖 .cal-main > * 的选择器重新算一遍（视觉会跳一下）。 */ ?>
+<div class="cal-view" data-cal-view data-cal-view-kind="<?= e((string)$view) ?>" data-cal-ym="<?= e((string)($ym ?? '')) ?>" data-cal-anchor="<?= e((string)($anchor ?? '')) ?>">
+    <?php if ($view === 'week' || $view === 'day'): ?>
+      <?php /* ===== 周 / 天：按小时铺的时间网格（全天日程单独挂顶上） ===== */ ?>
+      <div class="card cal-tg-card">
+        <div class="tg-head">
+          <div class="tg-gutter"></div>
+          <?php foreach (($cols ?? []) as $c): ?>
+            <div class="tg-dayname<?= $c['is_today'] ? ' is-today' : '' ?>">
+              <?php /* $c['w'] 是 date('w')（0=周日），所以这张索引表保持"日"开头——
+                       它只是把数字换成汉字，与列的排列顺序无关。 */ ?>
+              <span class="tg-wd"><?= e(['日','一','二','三','四','五','六'][$c['w']]) ?></span>
+              <span class="tg-dd"><?= (int)$c['day'] ?></span>
+            </div>
+          <?php endforeach; ?>
+        </div>
+
+        <?php $tgAll = $tgrid['all_day'] ?? []; ?>
+        <?php if (array_filter($tgAll)): ?>
+          <div class="tg-allday">
+            <div class="tg-gutter"><span class="tg-tag">全天</span></div>
+            <?php foreach (($cols ?? []) as $i => $c): ?>
+              <div class="tg-adcell">
+                <?php foreach (($tgAll[$i] ?? []) as $ev): ?>
+                  <?php
+                    $evKind = (string)($ev['kind'] ?? 'custom');
+                    $evRef  = (int)($ev['ref_id'] ?? 0);
+                    $evEdit = '';
+                    if ($evKind === 'custom' && $evRef > 0)   { $evEdit = url('calendar/event', ['id' => $evRef, 'embed' => 1]); }
+                    elseif ($evKind === 'movie' && $evRef > 0) { $evEdit = url('movies/edit', ['id' => $evRef, 'embed' => 1]); }
+                    elseif ($evKind === 'task' && $evRef > 0)  { $evEdit = url('tasks/edit', ['id' => $evRef]); }
+                    elseif ($evKind === 'anniv' && $evRef > 0) { $evEdit = url('days/edit', ['id' => $evRef, 'embed' => 1]); }
+                  ?>
+                  <a class="cal-ev is-allday" data-cal="<?= (int)$ev['cal'] ?>"
+                     data-fb-entry='<?= fb_entry_json($ev, (string)($ev['href'] ?? ''), $evEdit) ?>'
+                     style="background: <?= e((string)$ev['color']) ?>;"
+                     href="<?= e((string)$ev['href']) ?>"
+                     title="<?= e((string)$ev['title']) ?>"><?= e((string)$ev['title']) ?></a>
+                <?php endforeach; ?>
+              </div>
+            <?php endforeach; ?>
+          </div>
+        <?php endif; ?>
+
+        <div class="tg-body">
+          <div class="tg-gutter tg-hours">
+            <?php for ($h = 0; $h < 24; $h++): ?>
+              <span class="tg-hr"><?= sprintf('%02d', $h) ?></span>
+            <?php endfor; ?>
+          </div>
+          <?php foreach (($cols ?? []) as $i => $c): ?>
+            <div class="tg-col<?= $c['is_today'] ? ' is-today' : '' ?><?= $canNew ? ' rt-writable' : '' ?>"
+                 data-new-at="<?= e((string)$c['date']) ?>">
+              <?php for ($h = 0; $h < 24; $h++): ?>
+                <span class="tg-line"></span>
+              <?php endfor; ?>
+              <?php /* ==================== 当前时间红线（v24 第 20 批 用户第 6 条）====================
+                   用户原话：「日程模块，周视图和日视图，应该在视图中间显示一条红线，
+                              用来表示当前进行的时间，就是说，用一个不断从上到下的红线，
+                              来表示当前时间在视图上的刻度和位置。」
+
+                   ⚠️ 只在**今天那一列**画（别的日子没有"现在"可言）。
+                   ⚠️ 位置是服务端算好的百分比（与上面 .tg-block 用的是同一套：
+                      列高 = 24h，所以 1 分钟 = 100/1440 %）。**不在 CSS 里写死**
+                      某个时间 —— 那就成了"固定的一条线"，不叫"当前时间"。
+                   ⚠️ 线的**移动**由 app.js 里的一分钟定时器负责（`initNowLines()`）：
+                      服务端给的是"渲染那一刻"的位置，用户开着页面不走，
+                      过一小时线还停在那儿就荒谬了。
+                   ⚠️ 全天日程的"全天"那一行**不画** —— 那条线表达的是"一天之内的时间刻度"，
+                      画在全天行上会让人以为全天日程跟时间有关。 */ ?>
+              <?php if ($c['is_today'] && !empty($nowTop)): ?>
+                <span class="tg-now" data-now-line style="top: <?= (float)$nowTop ?>%;"
+                      title="现在 <?= e(date('H:i')) ?>"></span>
+              <?php endif; ?>
+              <?php /* 🔴 v30 第 4 条：时间冲突的日程**错开画**（不再堆叠）。
+                   用户原话：「如果两个事件时间上有冲突了，现在是堆叠在一起，应该错开，
+                             显示两个色块，如果三个冲突了，就是三个色块，错开显示。」
+                   left/width 由 App\Calendar::conflictLanes 算好（算法借鉴 SyncCalendar
+                   的 TimelineUtil：贪心分列，列数 = 最大同时重叠数）。
+                   ⚠️ 用**内联 left/width 百分比**而不是 CSS 类：
+                      列数 1/2/3/4 是运行时才知道的，类名会爆炸；
+                      而且模板已经在内联 top/height 了，同一套坐标系最不容易错。 */ ?>
+              <?php foreach (($tgrid['timed'][$i] ?? []) as $ev): ?>
+                <?php /* 🔴 v43（用户第 6 条）：点条目弹详情浮层（不再直接跳页）。
+                        数据由 fb_entry_json() 统一编（三个入口共用一个函数）。
+                        「详细信息」跳该来源的详情页；「编辑」取该来源的编辑表单片段。
+                        ⚠️ 编辑地址一律带可写判断：只读的（农历/节假日）不给「编辑」。 */ ?>
+                <?php
+                  $evKind = (string)($ev['kind'] ?? 'custom');
+                  $evRef  = (int)($ev['ref_id'] ?? 0);
+                  $evDet  = (string)($ev['href'] ?? '');
+                  $evEdit = '';
+                  if ($evKind === 'custom' && $evRef > 0)  { $evEdit = url('calendar/event', ['id' => $evRef, 'embed' => 1]); }
+                  elseif ($evKind === 'movie' && $evRef > 0) { $evEdit = url('movies/edit', ['id' => $evRef, 'embed' => 1]); }
+                  elseif ($evKind === 'task' && $evRef > 0)  { $evEdit = url('tasks/edit', ['id' => $evRef]); }
+                  // trip 的条目指向"某个旅程里的某段行程"，编辑器在旅程详情页里 —— 这里不给「编辑」
+                  elseif ($evKind === 'anniv' && $evRef > 0) { $evEdit = url('days/edit', ['id' => $evRef, 'embed' => 1]); }
+                ?>
+                <?php
+                  /* 🔴 v51（用户 2026-10-15 第 3 条）：分栏（冲突错开）**在浏览器里重算**要用到
+                     每条色块**声明的起止分钟**（服务端算分栏时用的就是这一对数）。
+                     ⚠️ 必须取 `time` / `end_time`，**不能**从 top/height 反推 ——
+                        服务端的 `top/height` 是按**"实际显示结束"**算的（没填结束时可能被
+                        同列下一条的起点截断），那不是它的真实结束分钟；拿它去分栏会把冲突判错。
+                     ⚠️ `data-e` 缺失 = "没填结束" ⇒ 前端按 +30′ 处理（与服务端 `$probe` 同口径）。 */
+                  preg_match('/^(\d{1,2}):(\d{2})/', (string)($ev['time'] ?? ''), $mS);
+                  $evS = $mS ? ((int)$mS[1] * 60 + (int)$mS[2]) : 0;
+                  preg_match('/^(\d{1,2}):(\d{2})/', (string)($ev['end_time'] ?? ''), $mE);
+                  $evE = $mE ? ((int)$mE[1] * 60 + (int)$mE[2]) : null;
+                  if ($evE !== null && $evE <= $evS) { $evE = null; }
+                ?>
+                <?php
+                  /* 🔴 v88（工单 #35）：跨天日程的分段。
+                     `seg` 由 `build_time_grid` 给出：
+                       start = 起始段（从开始时刻到当日 24:00）
+                       mid   = 中间整天
+                       end   = 结束段（00:00 到结束时刻）
+                       only / 空 = 单天日程（原样）
+                     视觉上要让三段"连成一条"：把段与段之间的圆角和内侧边框去掉，
+                     只保留最外两端是圆的。具体在 CSS 的 `.tg-block.is-seg-*` 里。 */
+                  $evSeg  = (string)($ev['seg'] ?? '');
+                  $evCont = !empty($ev['cont']);
+                  $segCls = '';
+                  if ($evSeg === 'start')      { $segCls = ' is-seg-start'; }
+                  elseif ($evSeg === 'mid')    { $segCls = ' is-seg-mid'; }
+                  elseif ($evSeg === 'end')    { $segCls = ' is-seg-end'; }
+                  /* 分隔线：起始段的下边不画（要跟下一段接上），
+                     中间段上下都不画，结束段上边不画 —— 由 CSS 处理。 */
+                ?>
+                <a class="tg-block<?= $segCls ?>" data-cal="<?= (int)$ev['cal'] ?>"
+                   data-s="<?= (int)$evS ?>"<?= $evE !== null ? ' data-e="' . (int)$evE . '"' : '' ?>
+                   <?php if ($evSeg !== '') : ?>data-seg="<?= e($evSeg) ?>"<?php endif; ?>
+                   data-fb-entry='<?= fb_entry_json($ev, $evDet, $evEdit) ?>'
+                   <?php
+                     /* 🔴 v88：跨天段用**贴满整列**的定位（left:0 / width:100%），
+                        和单天块的 `calc(2px + N%)` / `calc(N% - 4px)` 不是一套。
+                        单天块要留 2px 好跟列边框区分；跨天段要跟上一列接上，
+                        留缝就"断成三段"了（实测 10.9px 空隙）。
+                        ⚠️ 用 CSS 类而不是内联值区分：内联 calc 里做条件太绕，
+                           而且两边混着写以后必然有人改错一边。 */
+                     $evSegStyle = ($evSeg !== '')
+                        ? 'left: 0; width: 100%;'
+                        : 'left: calc(2px + ' . (float)($ev['left'] ?? 0) . '%); '
+                          . 'width: calc(' . (float)($ev['width'] ?? 100) . '% - 4px);';
+                   ?>
+                   style="background: <?= e((string)$ev['color']) ?>;
+                          top: <?= (float)$ev['top'] ?>%; height: <?= (float)$ev['height'] ?>%;
+                          <?= $evSegStyle ?>"
+                   href="<?= e((string)$ev['href']) ?>"
+                   title="<?= e((string)$ev['title']) ?><?= $evCont ? '（接前一日）' : '' ?>">
+                  <?php if (!$evCont && (string)($ev['time'] ?? '') !== '') : ?>
+                    <b><?= e((string)$ev['time']) ?></b>
+                  <?php endif; ?>
+                  <?php if ($evCont) : ?><span class="tg-cont">↳</span><?php endif; ?><?= e((string)$ev['title']) ?>
+                </a>
+              <?php endforeach; ?>
+            </div>
+          <?php endforeach; ?>
+        </div>
+      </div>
+    <?php else: ?>
+    <?php
+      /* 🔴 v70：把「每格全部条目」一次性送到前端（点 "+N 条" 时浮层直接用，
+         不再发请求）。**只送当月格子里的日期**，量很小（一个月最多几百条）。
+         ⚠️ 用 `<script type="application/json">` 而不是把 JSON 塞进 data-*：
+            data-* 属性里几千条会被 HTML 转义得又长又容易截断；
+            JSON 里若出现 `</script>` 也会截断 —— 所以下面统一走 json_encode 的
+            JSON_HEX_TAG（把 < > 转成 \u003C \u003E，永远不会提前闭合）。
+         ⚠️ 这是**渲染层**的便利数据，字段与 `data-fb-entry` 同一套（fb_entry_json），
+            所以浮层能沿用全部既有逻辑（详情/编辑/删除/来源判断）。 */
+      $dayData = [];
+      foreach (($weeks ?? []) as $wk) {
+          foreach ($wk as $cell) {
+              if (!$cell['events']) {
+                  continue;
+              }
+              $items = [];
+              foreach ($cell['events'] as $ev) {
+                  $evKind = (string)($ev['kind'] ?? 'custom');
+                  $evRef  = (int)($ev['ref_id'] ?? 0);
+                  $evEdit = '';
+                  if ($evKind === 'custom' && $evRef > 0)   { $evEdit = url('calendar/event', ['id' => $evRef, 'embed' => 1]); }
+                  elseif ($evKind === 'movie' && $evRef > 0) { $evEdit = url('movies/edit', ['id' => $evRef, 'embed' => 1]); }
+                  elseif ($evKind === 'task' && $evRef > 0)  { $evEdit = url('tasks/edit', ['id' => $evRef]); }
+                  elseif ($evKind === 'anniv' && $evRef > 0) { $evEdit = url('days/edit', ['id' => $evRef, 'embed' => 1]); }
+                  $items[] = ['_rank' => \App\Calendar::displayRank($ev),
+                          '_time' => (string)($ev['time'] ?? '')]
+                       + json_decode(
+                           fb_entry_json($ev, (string)($ev['href'] ?? ''), $evEdit),
+                           true
+                       );
+              }
+              $dayData[(string)$cell['date']] = $items;
+          }
+      }
+    ?>
+    <script type="application/json" id="calDayData"><?= json_encode(
+        $dayData,
+        JSON_UNESCAPED_UNICODE | JSON_HEX_TAG | JSON_HEX_AMP
+    ) ?></script>
+    <div class="card cal-grid-card">
+      <div class="cal-head">
+        <?php /* ⚠️ 用户第 11 批 #6：「月视图，从周一开始。而不是周日。」
+                 表头顺序必须与 month_grid_range() 的起算规则一致（那里已改成周一）。 */ ?>
+        <?php foreach (['一', '二', '三', '四', '五', '六', '日'] as $wd): ?>
+          <div class="cal-wd"><?= e($wd) ?></div>
+        <?php endforeach; ?>
+      </div>
+      <div class="cal-grid">
+        <?php foreach ($weeks as $wk): ?>
+          <?php foreach ($wk as $cell): ?>
+            <?php /* 用户第 5 条：点格子里的空白 = 在这天建日程。
+                     用 data-new-at 把日期带过去，由底部 JS 交给新建表单
+                     （点了小条本身是"打开那条日程"，由 <a> 自己处理，JS 会排除掉）。 */ ?>
+            <div class="cal-cell<?= $cell['in_month'] ? '' : ' is-out' ?><?= $cell['is_today'] ? ' is-today' : '' ?><?= $canNew ? ' rt-writable' : '' ?>"
+                 data-new-at="<?= e((string)$cell['date']) ?>">
+              <div class="cal-dnum"><?= (int)$cell['day'] ?></div>
+              <div class="cal-evs">
+                <?php
+                  /* 🔴 v70（用户 2026-10-20 第 2 条）：「日历导入进去了，但是不显示」。
+                     真根因不在这里的 3 条，而在**排序 + "+N 条"点不开**的组合：
+                     每格只画 3 条，而旧排序把"全天"（时间空串）排最前 ⇒ 农历/节气/
+                     节假日天天占满前三，用户自己导入的日程全被挤进 "+N 条"，
+                     而那个 "+N 条" 只是个 <span>，点不开 = 完全看不到。
+                     两处都已修：① `Calendar::displayRank()` 让派生条目排最后；
+                     ② 下面把 "+N 条" 换成**真按钮**，点开当天的全部条目浮层。
+                     ⚠️ 保留 3 条不改成"全画"：格子是固定高度（min-height:104px），
+                        15 条硬塞会把月网格撑得不像月历；超出部分交给浮层看。 */
+                  $cellEvents = $cell['events'];
+                  $shown = 3;
+                  $hiddenCnt = count($cellEvents) - $shown;
+                ?>
+                <?php $n = 0; foreach ($cellEvents as $ev): $n++; ?>
+                  <?php if ($n <= $shown): ?>
+                    <?php
+                      $evKind = (string)($ev['kind'] ?? 'custom');
+                      $evRef  = (int)($ev['ref_id'] ?? 0);
+                      $evEdit = '';
+                      if ($evKind === 'custom' && $evRef > 0)   { $evEdit = url('calendar/event', ['id' => $evRef, 'embed' => 1]); }
+                      elseif ($evKind === 'movie' && $evRef > 0) { $evEdit = url('movies/edit', ['id' => $evRef, 'embed' => 1]); }
+                      elseif ($evKind === 'task' && $evRef > 0)  { $evEdit = url('tasks/edit', ['id' => $evRef]); }
+                      elseif ($evKind === 'anniv' && $evRef > 0) { $evEdit = url('days/edit', ['id' => $evRef, 'embed' => 1]); }
+                    ?>
+                    <a class="cal-ev<?= empty($ev['all_day']) ? '' : ' is-allday' ?>"
+                       data-cal="<?= (int)$ev['cal'] ?>"
+                       data-fb-entry='<?= fb_entry_json($ev, (string)($ev['href'] ?? ''), $evEdit) ?>'
+                       style="background: <?= e((string)$ev['color']) ?>;"
+                       href="<?= e((string)$ev['href']) ?>"
+                       title="<?= e((string)$ev['title']) ?>">
+                      <?php if (($ev['time'] ?? '') !== ''): ?><b><?= e((string)$ev['time']) ?></b> <?php endif; ?>
+                      <?= e((string)$ev['title']) ?>
+                    </a>
+                  <?php endif; ?>
+                <?php endforeach; ?>
+                <?php if ($hiddenCnt > 0): ?>
+                  <?php /* 点开 = 当天全部条目（含被折叠的），一律走全站的条目详情浮层；
+                         每条都带 data-fb-entry，所以在浮层里还能继续点进详情/编辑/删除。
+                         ⚠️ 用一个 `<a href>` 兜住无 JS 的情况：直接跳那天的日视图
+                            （日视图按时间网格铺开，不会再截断）。 */ ?>
+                  <button type="button" class="cal-more"
+                          data-cal-day="<?= e((string)$cell['date']) ?>"
+                          aria-label="看这一天全部 <?= count($cellEvents) ?> 条">+<?= $hiddenCnt ?> 条</button>
+                  <?php /* 浮层用的全部条目数据（服务端渲染好，点开时不需要再请求）。
+                         放在格子外面（display:none 的 script 里）—— 塞进格子会撑高月网格。 */ ?>
+                <?php endif; ?>
+              </div>
+            </div>
+          <?php endforeach; ?>
+        <?php endforeach; ?>
+      </div>
+    </div>
+    <?php endif; ?>
+
+</div>

templates/calendar/index.php

@@ -187,276 +187,13 @@ $headText = $view === 'month' ? date('Y 年 n 月', $ts)
       unset($calCanNew, $calWritable, $calCtx);
     ?>
 
-    <?php if ($view === 'week' || $view === 'day'): ?>
-      <?php /* ===== 周 / 天：按小时铺的时间网格（全天日程单独挂顶上） ===== */ ?>
-      <div class="card cal-tg-card">
-        <div class="tg-head">
-          <div class="tg-gutter"></div>
-          <?php foreach (($cols ?? []) as $c): ?>
-            <div class="tg-dayname<?= $c['is_today'] ? ' is-today' : '' ?>">
-              <?php /* $c['w'] 是 date('w')（0=周日），所以这张索引表保持"日"开头——
-                       它只是把数字换成汉字，与列的排列顺序无关。 */ ?>
-              <span class="tg-wd"><?= e(['日','一','二','三','四','五','六'][$c['w']]) ?></span>
-              <span class="tg-dd"><?= (int)$c['day'] ?></span>
-            </div>
-          <?php endforeach; ?>
-        </div>
-
-        <?php $tgAll = $tgrid['all_day'] ?? []; ?>
-        <?php if (array_filter($tgAll)): ?>
-          <div class="tg-allday">
-            <div class="tg-gutter"><span class="tg-tag">全天</span></div>
-            <?php foreach (($cols ?? []) as $i => $c): ?>
-              <div class="tg-adcell">
-                <?php foreach (($tgAll[$i] ?? []) as $ev): ?>
-                  <?php
-                    $evKind = (string)($ev['kind'] ?? 'custom');
-                    $evRef  = (int)($ev['ref_id'] ?? 0);
-                    $evEdit = '';
-                    if ($evKind === 'custom' && $evRef > 0)   { $evEdit = url('calendar/event', ['id' => $evRef, 'embed' => 1]); }
-                    elseif ($evKind === 'movie' && $evRef > 0) { $evEdit = url('movies/edit', ['id' => $evRef, 'embed' => 1]); }
-                    elseif ($evKind === 'task' && $evRef > 0)  { $evEdit = url('tasks/edit', ['id' => $evRef]); }
-                    elseif ($evKind === 'anniv' && $evRef > 0) { $evEdit = url('days/edit', ['id' => $evRef, 'embed' => 1]); }
-                  ?>
-                  <a class="cal-ev is-allday" data-cal="<?= (int)$ev['cal'] ?>"
-                     data-fb-entry='<?= fb_entry_json($ev, (string)($ev['href'] ?? ''), $evEdit) ?>'
-                     style="background: <?= e((string)$ev['color']) ?>;"
-                     href="<?= e((string)$ev['href']) ?>"
-                     title="<?= e((string)$ev['title']) ?>"><?= e((string)$ev['title']) ?></a>
-                <?php endforeach; ?>
-              </div>
-            <?php endforeach; ?>
-          </div>
-        <?php endif; ?>
-
-        <div class="tg-body">
-          <div class="tg-gutter tg-hours">
-            <?php for ($h = 0; $h < 24; $h++): ?>
-              <span class="tg-hr"><?= sprintf('%02d', $h) ?></span>
-            <?php endfor; ?>
-          </div>
-          <?php foreach (($cols ?? []) as $i => $c): ?>
-            <div class="tg-col<?= $c['is_today'] ? ' is-today' : '' ?><?= $canNew ? ' rt-writable' : '' ?>"
-                 data-new-at="<?= e((string)$c['date']) ?>">
-              <?php for ($h = 0; $h < 24; $h++): ?>
-                <span class="tg-line"></span>
-              <?php endfor; ?>
-              <?php /* ==================== 当前时间红线（v24 第 20 批 用户第 6 条）====================
-                   用户原话：「日程模块，周视图和日视图，应该在视图中间显示一条红线，
-                              用来表示当前进行的时间，就是说，用一个不断从上到下的红线，
-                              来表示当前时间在视图上的刻度和位置。」
-
-                   ⚠️ 只在**今天那一列**画（别的日子没有"现在"可言）。
-                   ⚠️ 位置是服务端算好的百分比（与上面 .tg-block 用的是同一套：
-                      列高 = 24h，所以 1 分钟 = 100/1440 %）。**不在 CSS 里写死**
-                      某个时间 —— 那就成了"固定的一条线"，不叫"当前时间"。
-                   ⚠️ 线的**移动**由 app.js 里的一分钟定时器负责（`initNowLines()`）：
-                      服务端给的是"渲染那一刻"的位置，用户开着页面不走，
-                      过一小时线还停在那儿就荒谬了。
-                   ⚠️ 全天日程的"全天"那一行**不画** —— 那条线表达的是"一天之内的时间刻度"，
-                      画在全天行上会让人以为全天日程跟时间有关。 */ ?>
-              <?php if ($c['is_today'] && !empty($nowTop)): ?>
-                <span class="tg-now" data-now-line style="top: <?= (float)$nowTop ?>%;"
-                      title="现在 <?= e(date('H:i')) ?>"></span>
-              <?php endif; ?>
-              <?php /* 🔴 v30 第 4 条：时间冲突的日程**错开画**（不再堆叠）。
-                   用户原话：「如果两个事件时间上有冲突了，现在是堆叠在一起，应该错开，
-                             显示两个色块，如果三个冲突了，就是三个色块，错开显示。」
-                   left/width 由 App\Calendar::conflictLanes 算好（算法借鉴 SyncCalendar
-                   的 TimelineUtil：贪心分列，列数 = 最大同时重叠数）。
-                   ⚠️ 用**内联 left/width 百分比**而不是 CSS 类：
-                      列数 1/2/3/4 是运行时才知道的，类名会爆炸；
-                      而且模板已经在内联 top/height 了，同一套坐标系最不容易错。 */ ?>
-              <?php foreach (($tgrid['timed'][$i] ?? []) as $ev): ?>
-                <?php /* 🔴 v43（用户第 6 条）：点条目弹详情浮层（不再直接跳页）。
-                        数据由 fb_entry_json() 统一编（三个入口共用一个函数）。
-                        「详细信息」跳该来源的详情页；「编辑」取该来源的编辑表单片段。
-                        ⚠️ 编辑地址一律带可写判断：只读的（农历/节假日）不给「编辑」。 */ ?>
-                <?php
-                  $evKind = (string)($ev['kind'] ?? 'custom');
-                  $evRef  = (int)($ev['ref_id'] ?? 0);
-                  $evDet  = (string)($ev['href'] ?? '');
-                  $evEdit = '';
-                  if ($evKind === 'custom' && $evRef > 0)  { $evEdit = url('calendar/event', ['id' => $evRef, 'embed' => 1]); }
-                  elseif ($evKind === 'movie' && $evRef > 0) { $evEdit = url('movies/edit', ['id' => $evRef, 'embed' => 1]); }
-                  elseif ($evKind === 'task' && $evRef > 0)  { $evEdit = url('tasks/edit', ['id' => $evRef]); }
-                  // trip 的条目指向"某个旅程里的某段行程"，编辑器在旅程详情页里 —— 这里不给「编辑」
-                  elseif ($evKind === 'anniv' && $evRef > 0) { $evEdit = url('days/edit', ['id' => $evRef, 'embed' => 1]); }
-                ?>
-                <?php
-                  /* 🔴 v51（用户 2026-10-15 第 3 条）：分栏（冲突错开）**在浏览器里重算**要用到
-                     每条色块**声明的起止分钟**（服务端算分栏时用的就是这一对数）。
-                     ⚠️ 必须取 `time` / `end_time`，**不能**从 top/height 反推 ——
-                        服务端的 `top/height` 是按**"实际显示结束"**算的（没填结束时可能被
-                        同列下一条的起点截断），那不是它的真实结束分钟；拿它去分栏会把冲突判错。
-                     ⚠️ `data-e` 缺失 = "没填结束" ⇒ 前端按 +30′ 处理（与服务端 `$probe` 同口径）。 */
-                  preg_match('/^(\d{1,2}):(\d{2})/', (string)($ev['time'] ?? ''), $mS);
-                  $evS = $mS ? ((int)$mS[1] * 60 + (int)$mS[2]) : 0;
-                  preg_match('/^(\d{1,2}):(\d{2})/', (string)($ev['end_time'] ?? ''), $mE);
-                  $evE = $mE ? ((int)$mE[1] * 60 + (int)$mE[2]) : null;
-                  if ($evE !== null && $evE <= $evS) { $evE = null; }
-                ?>
-                <?php
-                  /* 🔴 v88（工单 #35）：跨天日程的分段。
-                     `seg` 由 `build_time_grid` 给出：
-                       start = 起始段（从开始时刻到当日 24:00）
-                       mid   = 中间整天
-                       end   = 结束段（00:00 到结束时刻）
-                       only / 空 = 单天日程（原样）
-                     视觉上要让三段"连成一条"：把段与段之间的圆角和内侧边框去掉，
-                     只保留最外两端是圆的。具体在 CSS 的 `.tg-block.is-seg-*` 里。 */
-                  $evSeg  = (string)($ev['seg'] ?? '');
-                  $evCont = !empty($ev['cont']);
-                  $segCls = '';
-                  if ($evSeg === 'start')      { $segCls = ' is-seg-start'; }
-                  elseif ($evSeg === 'mid')    { $segCls = ' is-seg-mid'; }
-                  elseif ($evSeg === 'end')    { $segCls = ' is-seg-end'; }
-                  /* 分隔线：起始段的下边不画（要跟下一段接上），
-                     中间段上下都不画，结束段上边不画 —— 由 CSS 处理。 */
-                ?>
-                <a class="tg-block<?= $segCls ?>" data-cal="<?= (int)$ev['cal'] ?>"
-                   data-s="<?= (int)$evS ?>"<?= $evE !== null ? ' data-e="' . (int)$evE . '"' : '' ?>
-                   <?php if ($evSeg !== '') : ?>data-seg="<?= e($evSeg) ?>"<?php endif; ?>
-                   data-fb-entry='<?= fb_entry_json($ev, $evDet, $evEdit) ?>'
-                   <?php
-                     /* 🔴 v88：跨天段用**贴满整列**的定位（left:0 / width:100%），
-                        和单天块的 `calc(2px + N%)` / `calc(N% - 4px)` 不是一套。
-                        单天块要留 2px 好跟列边框区分；跨天段要跟上一列接上，
-                        留缝就"断成三段"了（实测 10.9px 空隙）。
-                        ⚠️ 用 CSS 类而不是内联值区分：内联 calc 里做条件太绕，
-                           而且两边混着写以后必然有人改错一边。 */
-                     $evSegStyle = ($evSeg !== '')
-                        ? 'left: 0; width: 100%;'
-                        : 'left: calc(2px + ' . (float)($ev['left'] ?? 0) . '%); '
-                          . 'width: calc(' . (float)($ev['width'] ?? 100) . '% - 4px);';
-                   ?>
-                   style="background: <?= e((string)$ev['color']) ?>;
-                          top: <?= (float)$ev['top'] ?>%; height: <?= (float)$ev['height'] ?>%;
-                          <?= $evSegStyle ?>"
-                   href="<?= e((string)$ev['href']) ?>"
-                   title="<?= e((string)$ev['title']) ?><?= $evCont ? '（接前一日）' : '' ?>">
-                  <?php if (!$evCont && (string)($ev['time'] ?? '') !== '') : ?>
-                    <b><?= e((string)$ev['time']) ?></b>
-                  <?php endif; ?>
-                  <?php if ($evCont) : ?><span class="tg-cont">↳</span><?php endif; ?><?= e((string)$ev['title']) ?>
-                </a>
-              <?php endforeach; ?>
-            </div>
-          <?php endforeach; ?>
-        </div>
-      </div>
-    <?php else: ?>
-    <?php
-      /* 🔴 v70：把「每格全部条目」一次性送到前端（点 "+N 条" 时浮层直接用，
-         不再发请求）。**只送当月格子里的日期**，量很小（一个月最多几百条）。
-         ⚠️ 用 `<script type="application/json">` 而不是把 JSON 塞进 data-*：
-            data-* 属性里几千条会被 HTML 转义得又长又容易截断；
-            JSON 里若出现 `</script>` 也会截断 —— 所以下面统一走 json_encode 的
-            JSON_HEX_TAG（把 < > 转成 \u003C \u003E，永远不会提前闭合）。
-         ⚠️ 这是**渲染层**的便利数据，字段与 `data-fb-entry` 同一套（fb_entry_json），
-            所以浮层能沿用全部既有逻辑（详情/编辑/删除/来源判断）。 */
-      $dayData = [];
-      foreach (($weeks ?? []) as $wk) {
-          foreach ($wk as $cell) {
-              if (!$cell['events']) {
-                  continue;
-              }
-              $items = [];
-              foreach ($cell['events'] as $ev) {
-                  $evKind = (string)($ev['kind'] ?? 'custom');
-                  $evRef  = (int)($ev['ref_id'] ?? 0);
-                  $evEdit = '';
-                  if ($evKind === 'custom' && $evRef > 0)   { $evEdit = url('calendar/event', ['id' => $evRef, 'embed' => 1]); }
-                  elseif ($evKind === 'movie' && $evRef > 0) { $evEdit = url('movies/edit', ['id' => $evRef, 'embed' => 1]); }
-                  elseif ($evKind === 'task' && $evRef > 0)  { $evEdit = url('tasks/edit', ['id' => $evRef]); }
-                  elseif ($evKind === 'anniv' && $evRef > 0) { $evEdit = url('days/edit', ['id' => $evRef, 'embed' => 1]); }
-                  $items[] = ['_rank' => \App\Calendar::displayRank($ev),
-                          '_time' => (string)($ev['time'] ?? '')]
-                       + json_decode(
-                           fb_entry_json($ev, (string)($ev['href'] ?? ''), $evEdit),
-                           true
-                       );
-              }
-              $dayData[(string)$cell['date']] = $items;
-          }
-      }
-    ?>
-    <script type="application/json" id="calDayData"><?= json_encode(
-        $dayData,
-        JSON_UNESCAPED_UNICODE | JSON_HEX_TAG | JSON_HEX_AMP
-    ) ?></script>
-    <div class="card cal-grid-card">
-      <div class="cal-head">
-        <?php /* ⚠️ 用户第 11 批 #6：「月视图，从周一开始。而不是周日。」
-                 表头顺序必须与 month_grid_range() 的起算规则一致（那里已改成周一）。 */ ?>
-        <?php foreach (['一', '二', '三', '四', '五', '六', '日'] as $wd): ?>
-          <div class="cal-wd"><?= e($wd) ?></div>
-        <?php endforeach; ?>
-      </div>
-      <div class="cal-grid">
-        <?php foreach ($weeks as $wk): ?>
-          <?php foreach ($wk as $cell): ?>
-            <?php /* 用户第 5 条：点格子里的空白 = 在这天建日程。
-                     用 data-new-at 把日期带过去，由底部 JS 交给新建表单
-                     （点了小条本身是"打开那条日程"，由 <a> 自己处理，JS 会排除掉）。 */ ?>
-            <div class="cal-cell<?= $cell['in_month'] ? '' : ' is-out' ?><?= $cell['is_today'] ? ' is-today' : '' ?><?= $canNew ? ' rt-writable' : '' ?>"
-                 data-new-at="<?= e((string)$cell['date']) ?>">
-              <div class="cal-dnum"><?= (int)$cell['day'] ?></div>
-              <div class="cal-evs">
-                <?php
-                  /* 🔴 v70（用户 2026-10-20 第 2 条）：「日历导入进去了，但是不显示」。
-                     真根因不在这里的 3 条，而在**排序 + "+N 条"点不开**的组合：
-                     每格只画 3 条，而旧排序把"全天"（时间空串）排最前 ⇒ 农历/节气/
-                     节假日天天占满前三，用户自己导入的日程全被挤进 "+N 条"，
-                     而那个 "+N 条" 只是个 <span>，点不开 = 完全看不到。
-                     两处都已修：① `Calendar::displayRank()` 让派生条目排最后；
-                     ② 下面把 "+N 条" 换成**真按钮**，点开当天的全部条目浮层。
-                     ⚠️ 保留 3 条不改成"全画"：格子是固定高度（min-height:104px），
-                        15 条硬塞会把月网格撑得不像月历；超出部分交给浮层看。 */
-                  $cellEvents = $cell['events'];
-                  $shown = 3;
-                  $hiddenCnt = count($cellEvents) - $shown;
-                ?>
-                <?php $n = 0; foreach ($cellEvents as $ev): $n++; ?>
-                  <?php if ($n <= $shown): ?>
-                    <?php
-                      $evKind = (string)($ev['kind'] ?? 'custom');
-                      $evRef  = (int)($ev['ref_id'] ?? 0);
-                      $evEdit = '';
-                      if ($evKind === 'custom' && $evRef > 0)   { $evEdit = url('calendar/event', ['id' => $evRef, 'embed' => 1]); }
-                      elseif ($evKind === 'movie' && $evRef > 0) { $evEdit = url('movies/edit', ['id' => $evRef, 'embed' => 1]); }
-                      elseif ($evKind === 'task' && $evRef > 0)  { $evEdit = url('tasks/edit', ['id' => $evRef]); }
-                      elseif ($evKind === 'anniv' && $evRef > 0) { $evEdit = url('days/edit', ['id' => $evRef, 'embed' => 1]); }
-                    ?>
-                    <a class="cal-ev<?= empty($ev['all_day']) ? '' : ' is-allday' ?>"
-                       data-cal="<?= (int)$ev['cal'] ?>"
-                       data-fb-entry='<?= fb_entry_json($ev, (string)($ev['href'] ?? ''), $evEdit) ?>'
-                       style="background: <?= e((string)$ev['color']) ?>;"
-                       href="<?= e((string)$ev['href']) ?>"
-                       title="<?= e((string)$ev['title']) ?>">
-                      <?php if (($ev['time'] ?? '') !== ''): ?><b><?= e((string)$ev['time']) ?></b> <?php endif; ?>
-                      <?= e((string)$ev['title']) ?>
-                    </a>
-                  <?php endif; ?>
-                <?php endforeach; ?>
-                <?php if ($hiddenCnt > 0): ?>
-                  <?php /* 点开 = 当天全部条目（含被折叠的），一律走全站的条目详情浮层；
-                         每条都带 data-fb-entry，所以在浮层里还能继续点进详情/编辑/删除。
-                         ⚠️ 用一个 `<a href>` 兜住无 JS 的情况：直接跳那天的日视图
-                            （日视图按时间网格铺开，不会再截断）。 */ ?>
-                  <button type="button" class="cal-more"
-                          data-cal-day="<?= e((string)$cell['date']) ?>"
-                          aria-label="看这一天全部 <?= count($cellEvents) ?> 条">+<?= $hiddenCnt ?> 条</button>
-                  <?php /* 浮层用的全部条目数据（服务端渲染好，点开时不需要再请求）。
-                         放在格子外面（display:none 的 script 里）—— 塞进格子会撑高月网格。 */ ?>
-                <?php endif; ?>
-              </div>
-            </div>
-          <?php endforeach; ?>
-        <?php endforeach; ?>
-      </div>
-    </div>
-    <?php endif; ?>
+    <?php /* 🔵 工单 #37：视图区抽成独立片段 `_view.php`。
+            整页路径与「新建/修改后的局部重绘」**必须**走同一份模板 ——
+            这样"插进去的样子"与"刷新一次的样子"不可能不一致。
+            ⚠️ 原来这里是一大段内联 HTML（月/周/日三套）。抽走时**一字未改**，
+               只把外层缩进调平；变量的给出方式也照旧（$view/$cols/$tgrid/$weeks/
+               $canNew/$nowTop 都由上面备好）。 */ ?>
+    <?php require __DIR__ . '/_view.php'; ?>
   </div>
 </div>
 
@@ -571,34 +308,55 @@ $headText = $view === 'month' ? date('Y 年 n 月', $ts)
      （它在该 IIFE 外面，看不到闭包里的 openNew）⇒ 暴露一个窗口入口。 */
   window.fbCalOpenNew = openNew;
 
-  /* 月视图格子 */
-  Array.prototype.forEach.call(document.querySelectorAll('.cal-cell[data-new-at]'), function (cell) {
-    cell.addEventListener('click', function (ev) {
-      // 点在小条上 = 想打开那条日程（<a> 的默认行为），不要抢
-      if (ev.target.closest && ev.target.closest('.cal-ev')) { return; }
-      /* 🔴 v70：点「+N 条」= 要看**当天的全部条目**，不是要新建日程。
-         ⚠️ 必须显式排除：它是个 <button>，不排除的话会**同时**触发
-            "新建日程浮层" 与 "当天全部条目浮层" 两个浮层叠在一起。 */
-      if (ev.target.closest && ev.target.closest('.cal-more')) { return; }
-      if (!<?= $canWrite && $writable ? 'true' : 'false' ?>) { return; }
-      openNew(cell.getAttribute('data-new-at'), '09', '00');
-    });
-  });
+  /* ============================================================
+     「点格子 / 点列空白 = 在那天（那个时刻）新建日程」
+     ------------------------------------------------------------
+     🔵 工单 #37：**改成 document 上的事件委托**，不再逐元素绑定。
 
-  /* 周/日视图的列：纵向位置 → 时刻。
-     列高 1056px = 24 小时（见 .tg-col 的 CSS），所以 1 分钟 = 1056/1440 px。 */
-  Array.prototype.forEach.call(document.querySelectorAll('.tg-col[data-new-at]'), function (col) {
-    col.addEventListener('click', function (ev) {
-      if (ev.target.closest && ev.target.closest('.tg-block')) { return; }
-      if (!<?= $canWrite && $writable ? 'true' : 'false' ?>) { return; }
-      var box = col.getBoundingClientRect();
-      var ratio = (ev.clientY - box.top) / Math.max(1, box.height);
-      var mins = Math.max(0, Math.min(24 * 60 - 30, Math.round(ratio * 1440 / 30) * 30));
-      var hh = String(Math.floor(mins / 60)).padStart(2, '0');
-      var mm = String(mins % 60).padStart(2, '0');
-      openNew(col.getAttribute('data-new-at'), hh, mm);
+     为什么必须改：原来是 `querySelectorAll(...).forEach(el => addEventListener(...))`，
+     只对"渲染那一刻存在"的节点生效。而本工单让视图区可以整块重绘（新建/修改后
+     取服务端片段替换），重绘后换进来的新格子**没人绑** ⇒ 点一下没反应。
+     委托之后一根监听管全部（含以后换进来的），重绘也不需要重新绑定。
+
+     ⚠️ 顺序有意义：先判 `.cal-ev` / `.tg-block`（点条目 = 打开那条，不抢），
+        再判 `.cal-more`（点 +N 条 = 看清单，不新建），最后才落到"新建"。
+     ============================================================ */
+  (function () {
+    /* 服务端就把"能不能写"烘进这段脚本 —— 只读账号点了不该有反应 */
+    var CAN_WRITE = <?= $canWrite && $writable ? 'true' : 'false' ?>;
+
+    document.addEventListener('click', function (ev) {
+      var t = ev.target;
+      if (!t || !t.closest) { return; }
+      if (!CAN_WRITE) { return; }
+
+      /* ① 月视图格子：一格 = 一天 → 09:00 起（"当日默认"比 00:00 更像个日程） */
+      var cell = t.closest('.cal-cell[data-new-at]');
+      if (cell) {
+        // 点在小条上 = 想打开那条日程（<a> 的默认行为），不要抢
+        if (t.closest('.cal-ev')) { return; }
+        /* 🔴 v70：点「+N 条」= 要看**当天的全部条目**，不是要新建日程。
+           ⚠️ 必须显式排除：它是个 <button>，不排除的话会**同时**触发
+              "新建日程浮层" 与 "当天全部条目浮层" 两个浮层。 */
+        if (t.closest('.cal-more')) { return; }
+        openNew(cell.getAttribute('data-new-at'), '09', '00');
+        return;
+      }
+
+      /* ② 周/日视图的列：按鼠标在**那一列里的纵向位置**反算时刻，最接近半小时。
+            列高 1056px = 24 小时（见 .tg-col 的 CSS），所以 1 分钟 = 1056/1440 px。 */
+      var col = t.closest('.tg-col[data-new-at]');
+      if (col) {
+        if (t.closest('.tg-block')) { return; }
+        var box = col.getBoundingClientRect();
+        var ratio = (ev.clientY - box.top) / Math.max(1, box.height);
+        var mins = Math.max(0, Math.min(24 * 60 - 30, Math.round(ratio * 1440 / 30) * 30));
+        var hh = String(Math.floor(mins / 60)).padStart(2, '0');
+        var mm = String(mins % 60).padStart(2, '0');
+        openNew(col.getAttribute('data-new-at'), hh, mm);
+      }
     });
-  });
+  })();
 
   /* 从 ?new_at= 进来（比如别处链过来）→ 直接开弹窗并预填 */
   var preset = <?= json_encode($newAt, JSON_UNESCAPED_UNICODE) ?>;
@@ -659,268 +417,22 @@ $headText = $view === 'month' ? date('Y 年 n 月', $ts)
       if (tip) { tip.textContent = msg; tip.className = 'cal-modal-tip err'; }
     }
 
-    /** 把一条 `fb_entry_json` 形态的条目补进 `#calDayData`（按天分组，幂等）。
-     *  ⚠️ 只补**还没在里面**的那条（同 ref + 同 occ 视为同一条）——
-     *     否则连点两次「加上」或前端重放会把同一条塞两遍，清单里出现两条一样的。 */
-    function pushDayData(day, entry) {
-      var host = document.getElementById('calDayData');
-      if (!host || !day || !entry) { return; }
-      var all;
-      try { all = JSON.parse(host.textContent || '{}') || {}; } catch (e) { return; }
-      var list = all[day] || [];
-      var same = false;
-      for (var i = 0; i < list.length; i++) {
-        if (String(list[i].ref || '') === String(entry.ref || '')
-            && String(list[i].occ || '') === String(entry.occ || '')
-            && String(list[i].title || '') === String(entry.title || '')) { same = true; break; }
-      }
-      if (!same) {
-        /* 位置按服务端那套 `displayRank + 时间` 插（派生条目垫底），
-           免得清单里的顺序与刷新后的顺序不一致。 */
-        var rk = function (o) {
-          var s = String(o.source || '');
-          return s === 'event' ? 0 : 4;      /* 派生条目一律 4，与服务端 displayRank 的兜底一致 */
-        };
-        var tm = function (o) {
-          var rows = o.rows || [];
-          for (var k = 0; k < rows.length; k++) {
-            if (rows[k][0] === '时间') {
-              var v = String(rows[k][1] || '');
-              /* "YYYY-MM-DD HH:MM–HH:MM" / "YYYY-MM-DD 全天" → 取时刻部分比较 */
-              var seg = v.slice(day.length).trim();
-              return seg === '全天' ? '' : seg.slice(0, 5);
-            }
-          }
-          return '';
-        };
-        var pos = list.length;
-        for (var j = 0; j < list.length; j++) {
-          if (rk(list[j]) > rk(entry)) { pos = j; break; }
-          if (rk(list[j]) === rk(entry) && tm(list[j]) > tm(entry)) { pos = j; break; }
-        }
-        list.splice(pos, 0, entry);
-        all[day] = list;
-        try { host.textContent = JSON.stringify(all); } catch (e2) { /* 序列化失败就别动 */ }
-      }
-    }
+    /* 🔵 工单 #37（用户 2026-11-01）：「修改和新建，都不应该刷新页面，
+       而是使用js动态调整。」
 
-    /** 月视图：往 data-new-at="YYYY-MM-DD" 那个格子里塞一条小条 */
-    function putMonth(ev) {
-      var day = String(ev.starts_at || '').slice(0, 10);
-      var cell = document.querySelector('.cal-cell[data-new-at="' + day + '"]');
-      if (!cell) { return false; }
-      var box = cell.querySelector('.cal-evs');
-      if (!box) { return false; }
-      var a = document.createElement('a');
-      a.className = 'cal-ev' + (ev.all_day ? ' is-allday' : '');
-      a.setAttribute('data-cal', String(ev.cal || ''));
-      a.style.background = ev.color || '';
-      a.setAttribute('href', ev.href || '#');
-      a.setAttribute('title', ev.title || '');
-      /* ⚠️ 时间前缀的形状必须与服务端一致（<b>HH:MM</b> 后面一个空格）——
-             不一致的话刷新一次就会看出差别。 */
-      if (ev.time) {
-        var b = document.createElement('b');
-        b.textContent = ev.time;
-        a.appendChild(b);
-        a.appendChild(document.createTextNode(' '));
-      }
-      a.appendChild(document.createTextNode(ev.title || ''));
-      /* 🔴 插到**正确的时间位置**，不能 append 到末尾。
-         为什么必须按时间插：服务端只渲染前 3 条（第 4 条起收进"+N 条"），
-         而"哪 3 条"是按**时间顺序**取的。若这边一律 append：
-           · 新加一条**早上 7 点**的日程，它会被排到最后 → 落到"+N 条"里看不见，
-             可刷新一次又会跑到第一位 —— 这正是"插进去和刷新后长得不一样"。
-         ⚠️ 判据与服务端渲染同一套：先比 <b>HH:MM</b>，没有时间前缀的（全天）排前面
-            （与 Calendar::month 给 all_day 的处理一致），再比标题兜底稳定性。 */
-      var newTime = ev.time || '';
-      var placed = false;
-      var existing = Array.prototype.slice.call(box.querySelectorAll('.cal-ev'));
-      for (var k = 0; k < existing.length; k++) {
-        var tEl = existing[k].querySelector('b');
-        var tTxt = tEl ? tEl.textContent.trim() : '';
-        if (tTxt === '' && newTime !== '') { continue; }      /* 空时间(全天)在前 */
-        if (tTxt !== '' && newTime === '') { box.insertBefore(a, existing[k]); placed = true; break; }
-        if (tTxt > newTime) { box.insertBefore(a, existing[k]); placed = true; break; }
-      }
-      if (!placed) { box.appendChild(a); }
+       这里**原来有一整套手写复刻服务端渲染的代码**（`pushDayData` / `putMonth` /
+       `relayoutColumn` / `putTimed` / `insert`，约 270 行）：月视图往格子里塞小条
+       并按时间插到正确位置、周/日视图按"24h=100%"算 top/height、插完重算整列分栏…
 
-      /* 再按"只显示前 3 条"收口，与服务端渲染对齐（否则会多出一条）。 */
-      var links = box.querySelectorAll('.cal-ev');
-      var more = box.querySelector('.cal-more');
-      /* 🔴 v70：新条目同步进 `#calDayData` —— 否则「+N 条」点开是**旧**清单，
-         刚建的这条不在里面（刷新一次又有了）。放在收口之前做，跟服务端渲染时
-         "先把当天全部条目收进数据岛、再只画前 3 条"的顺序一致。 */
-      if (ev.entry) { pushDayData(day, ev.entry); }
-      for (var j = 0; j < links.length; j++) {
-        links[j].style.display = (j < 3) ? '' : 'none';
-      }
-      if (links.length > 3) {
-        var extra = links.length - 3;
-        if (!more) {
-          /* 🔴 v70（用户 2026-10-20 第 2 条）：「+N 条」原来是颗 `<span>`，
-             **点不动** ⇒ 被它折叠掉的条目永远看不到（"导进去了但不显示"）。
-             这里必须造**按钮**并带 `data-cal-day`（与模板渲染同形），
-             否则新建一条之后，这个格子就退回"点不动"。 */
-          more = document.createElement('button');
-          more.type = 'button';
-          more.className = 'cal-more';
-          box.appendChild(more);
-        }
-        more.setAttribute('data-cal-day', day);
-        more.setAttribute('aria-label', '看这一天全部 ' + links.length + ' 条');
-        more.textContent = '+' + extra + ' 条';
-      } else if (more) {
-        more.parentNode.removeChild(more);
-      }
-      return true;
-    }
+       它自己的注释里就记着一次真实事故：新加一条 07:00 的日程被 append 到末尾 ⇒
+       落进「+N 条」看不见，可刷新一次又跑到第一位。
+       这类 bug 的根子是"两处渲染必须同步"，只要两处存在就一定会有偏差。
 
-    /* 🔴🔴 v51（用户 2026-10-15 第 3 条）：「添加一个日程之后，只是把这个日程放在了
-         周视图或者是日视图上面。如果它这个时间段已经有日程了，它会**直接盖在上面**，
-         却并没有按照**分栏**的方式左右显示。这个需要再调整一下。」
-
-         真根因：`putTimed()` 只把自己那条色块按 top/height **整宽铺上去**，
-         完全不知道同一列里已有的日程 —— 于是两条重叠时后加的直接压在先有的上面
-         （服务端渲染时是有分栏的：`App\Calendar::conflictLanes`，但那是**整页重绘**时才算的）。
-
-         ⇒ 修法：**在浏览器里重算整列的分栏**（与服务端同一套算法），插入后重排该列。
-         为什么"重算整列"而不是"给新块腾个位置"：
-           新日程可能同时与**多条**已有日程冲突（比如插进一个 3 段重叠的时段），
-           只挪新块会让已有多条的宽度/位置也不对（它们现在是 2 列、重算后该是 3 列）
-           —— 必须让整列一起重排才是自洽的。
-         ⚠️ 算法**照抄** app/Calendar.php 的 conflictLanes（贪心分列 + 分组复列）：
-            两边算错一个边界，刷新一次位置就会跳。
-         ⚠️ 高度仍按各自"声明的起止"算（没结束的用 +30′）—— 与服务端那套一致。
-            （服务端在"没填结束"时还会拿同列下一条的起点当视觉结束；这里简化成 +30′，
-             差别只在"未填结束"这一种情况，且插入后用户一刷新就归位。 */
-    function minsAttr(el, attr) {
-      var v = el.getAttribute(attr);
-      if (v === null || v === '') { return null; }
-      var n = parseInt(v, 10);
-      return isNaN(n) ? null : n;
-    }
-
-    /** 重算某一列里**所有** .tg-block 的分栏（left/width）与 top/height */
-    function relayoutColumn(col) {
-      var blocks = Array.prototype.slice.call(col.querySelectorAll('.tg-block'));
-      if (!blocks.length) { return; }
-      // ① 归一成 [{el, s, e}]（缺 data-e → +30′；缺 data-s → 从 top 反推兜底）
-      var rows = [];
-      blocks.forEach(function (el) {
-        var s = minsAttr(el, 'data-s');
-        if (s === null) {
-          var tp = parseFloat(el.style.top) || 0;
-          s = Math.round(tp / 100 * 1440);
-        }
-        var e = minsAttr(el, 'data-e');
-        if (e === null || e <= s) { e = s + 30; }
-        rows.push({ el: el, s: s, e: Math.min(e, 1440) });
-      });
-      // ② 按开始时间升序（同开始则长的在前）—— 与服务端 usort 同序
-      rows.sort(function (a, b) { return a.s - b.s || b.e - a.e; });
-      // ③ 划分冲突组（与组内最晚结束仍重叠就并组）
-      var groups = [], cur = [], endMax = -1;
-      rows.forEach(function (r) {
-        if (cur.length && r.s >= endMax) { groups.push(cur); cur = []; endMax = -1; }
-        cur.push(r);
-        endMax = Math.max(endMax, r.e);
-      });
-      if (cur.length) { groups.push(cur); }
-      // ④ 组内贪心分列（每列记最后结束分钟，放进编号最小的可用列）
-      groups.forEach(function (g) {
-        var laneEnd = [], laneOf = [];
-        g.forEach(function (r, k) {
-          var lane = -1;
-          for (var li = 0; li < laneEnd.length; li++) {
-            if (laneEnd[li] <= r.s) { lane = li; break; }
-          }
-          if (lane < 0) { lane = laneEnd.length; laneEnd.push(r.e); }
-          else { laneEnd[lane] = r.e; }
-          laneOf[k] = lane;
-        });
-        var cols = Math.max(1, laneEnd.length);
-        g.forEach(function (r, k) {
-          var left = laneOf[k] / cols * 100, width = 100 / cols;
-          r.el.style.left  = 'calc(2px + ' + left.toFixed(4) + '%)';
-          r.el.style.width = 'calc(' + width.toFixed(4) + '% - 4px)';
-          r.el.style.top    = (r.s / 1440 * 100).toFixed(4) + '%';
-          r.el.style.height = ((Math.max(15, r.e - r.s)) / 1440 * 100).toFixed(4) + '%';
-        });
-      });
-    }
-
-    /** 周/日视图：按"列高 = 24 小时"算 top/height 插时间块 */
-    function putTimed(ev) {
-      if (ev.all_day) {
-        var ad = document.querySelector('.tg-adcell');
-        if (!ad) { return false; }
-        var box2 = document.querySelector('.tg-allday');
-        var col = null;
-        if (box2) {
-          /* 找到"那一天"那一列：列的顺序与 .tg-dayname 一致，
-             用 data-new-at 反查（服务端给每列写了当天日期）。 */
-          var cols = Array.prototype.slice.call(document.querySelectorAll('.tg-col[data-new-at]'));
-          var day2 = String(ev.starts_at || '').slice(0, 10);
-          var idx = -1;
-          cols.forEach(function (c, i) { if (c.getAttribute('data-new-at') === day2) { idx = i; } });
-          if (idx >= 0) {
-            var cells = document.querySelectorAll('.tg-adcell');
-            col = cells[idx] || null;
-          }
-        }
-        var host = col || ad;
-        if (!host) { return false; }
-        var a2 = document.createElement('a');
-        a2.className = 'cal-ev is-allday';
-        a2.setAttribute('data-cal', String(ev.cal || ''));
-        a2.style.background = ev.color || '';
-        a2.setAttribute('href', ev.href || '#');
-        a2.setAttribute('title', ev.title || '');
-        a2.textContent = ev.title || '';
-        host.appendChild(a2);
-        return true;
-      }
-      var cols3 = Array.prototype.slice.call(document.querySelectorAll('.tg-col[data-new-at]'));
-      var day3 = String(ev.starts_at || '').slice(0, 10);
-      var ci = -1;
-      cols3.forEach(function (c, i) { if (c.getAttribute('data-new-at') === day3) { ci = i; } });
-      if (ci < 0) { return false; }
-      var target = cols3[ci];
-      var minsOf = function (t) {
-        var m = String(t || '').match(/[ T](\d{1,2}):(\d{1,2})/);
-        return m ? (+m[1]) * 60 + (+m[2]) : 0;
-      };
-      var st = minsOf(ev.starts_at), en = minsOf(ev.ends_at);
-      if (en <= st) { en = st + 30; }                 /* 没填结束就给半小时 —— 与服务端一致 */
-      var top = (st / 1440) * 100, hgt = ((en - st) / 1440) * 100;
-      var blk = document.createElement('a');
-      blk.className = 'tg-block';
-      blk.setAttribute('data-cal', String(ev.cal || ''));
-      /* 🔴 v51：带上"声明的起止分钟"，重算分栏要用（服务端渲染的同名属性）。
-         ⚠️ 与服务端口径一致：结束缺失/倒挂 → 不带 data-e（按 +30′ 处理）。 */
-      blk.setAttribute('data-s', String(st));
-      var declE = minsOf(ev.ends_at);
-      if (declE > st) { blk.setAttribute('data-e', String(declE)); }
-      blk.style.background = ev.color || '';
-      blk.style.top = top.toFixed(4) + '%';
-      blk.style.height = hgt.toFixed(4) + '%';
-      blk.setAttribute('href', ev.href || '#');
-      blk.setAttribute('title', ev.title || '');
-      blk.textContent = ev.title || '';
-      target.appendChild(blk);
-      /* 🔴 v51（第 3 条）：插完**重排整列** —— 否则这条会整宽盖在已有日程上（用户报的现象）。 */
-      relayoutColumn(target);
-      return true;
-    }
-
-    function insert(ev) {
-      /* 先看当前视图是哪一种：页面上有 .cal-grid 就是月视图；
-         有 .tg-col 就是周/日视图。两者都不在（理论上不会）→ 退回刷新。 */
-      if (document.querySelector('.cal-grid')) { return putMonth(ev); }
-      if (document.querySelector('.tg-col[data-new-at]')) { return putTimed(ev); }
-      return false;
-    }
+       ⇒ **整段删掉**，改用 `assets/js/cal_sync.js` 的 `refresh()`：
+         新建成功后取一份服务端渲染好的视图片段整块替换。
+         这样"加进去的样子"与"刷新一次的样子"**必然**相同，因为只有一处渲染。
+         日历页新建 / 首页新建 / 浮层改完，三条路走同一个函数。
+    */
 
     form.addEventListener('submit', function (e) {
       if (form.getAttribute('data-native-submit') === '1') { return; }
@@ -936,38 +448,50 @@ $headText = $view === 'month' ? date('Y 年 n 月', $ts)
         .then(function (d) {
           if (sub) { sub.disabled = false; }
           if (d && d.ok && d.event) {
-            var ok = false;
-            try { ok = insert(d.event); } catch (err) { ok = false; }
-            if (ok) {
-              /* 观影 / 旅行本是**派生**的（内容来自观影/旅程表）：AJAX 时服务端
-                 不再自动跳详情页（跳走就离开了日历），改在提示行给一个链接。 */
-              if (d.goto && tip) {
-                tip.className = 'cal-modal-tip';
-                tip.textContent = (d.msg || '已加上。') + ' ';
-                var ga = document.createElement('a');
-                ga.href = d.goto;
-                ga.textContent = '去看详情 →';
-                tip.appendChild(ga);
-                setTimeout(function () {
-                  if (tip) { tip.textContent = ''; }
-                }, 6000);
-              }
-              closeNew();
-              /* 重置"只填一次的字段"，但**保留**日历本的选择（用户往往连加几条）。
-                 ⚠️ 标题必须清掉，否则下一条会带着上一条的标题（很容易漏掉）。 */
-              var t = document.getElementById('ev-title');
-              var lo = document.getElementById('ev-location');
-              var no = document.getElementById('ev-note');
-              if (t) { t.value = ''; }
-              if (lo) { lo.value = ''; }
-              if (no) { no.value = ''; }
+            /* 🔵 工单 #37：不再手写插 DOM，改为让 cal_sync 取片段重绘。
+               `d.msg` 里带着服务端那句人话（含"已加进观影/旅程"这类说明）。
+               ⚠️ 观影/旅程本是**派生**的：服务端给了 `goto` 时反而**不能**
+                  立刻重绘收提示 —— 用户可能想点那个"去看详情"。所以这两条路分开：
+                  有 goto（派生本）→ 保留提示行 + 链接，重绘照做；
+                  没有 goto（普通日程）→ 关浮层 + 轻提示 + 重绘。 */
+            var sync = window.fbCalSync;
+            if (!sync || typeof sync.refresh !== 'function') {
+              /* 老缓存没加载到脚本 → 退回原生提交，别假装成功 */
+              form.setAttribute('data-native-submit', '1');
+              if (typeof form.requestSubmit === 'function') { form.requestSubmit(); }
+              else { form.submit(); }
               return;
             }
-            /* 插入不成功 = "没刷新却也没看到" → 宁可刷新一次，别假装成功 */
-            form.setAttribute('data-native-submit', '1');
-            if (typeof form.requestSubmit === 'function') { form.requestSubmit(); }
-            else { form.submit(); }
+            /* 观影 / 旅行本是**派生**的（内容来自观影/旅程表）：AJAX 时服务端
+               不再自动跳详情页（跳走就离开了日历），改在提示行给一个链接。 */
+            if (d.goto && tip) {
+              tip.className = 'cal-modal-tip';
+              tip.textContent = (d.msg || '已加上。') + ' ';
+              var ga = document.createElement('a');
+              ga.href = d.goto;
+              ga.textContent = '去看详情 →';
+              tip.appendChild(ga);
+              setTimeout(function () {
+                if (tip) { tip.textContent = ''; }
+              }, 6000);
+            }
+            closeNew();
+            /* 重置"只填一次的字段"，但**保留**日历本的选择（用户往往连加几条）。
+               ⚠️ 标题必须清掉，否则下一条会带着上一条的标题（很容易漏掉）。 */
+            var t = document.getElementById('ev-title');
+            var lo = document.getElementById('ev-location');
+            var no = document.getElementById('ev-note');
+            if (t) { t.value = ''; }
+            if (lo) { lo.value = ''; }
+            if (no) { no.value = ''; }
+            /* 重绘当前视图（不刷新页面）。有 goto 的是派生本，提示留 6 秒让人点链接。 */
+            var opts = { msg: (d.msg || '已加上。') };
+            if (d.goto) {
+              opts.msg = (d.msg || '已加上。') + '　去看详情 →';
+            }
+            sync.refresh(opts);
             return;
+
           }
           if (d && d.msg) { sayErr(d.msg); return; }
           /* 拿不到 JSON：会话过期 / 500 → 退回原生提交，让服务端说话 */

templates/layout.php

@@ -251,6 +251,17 @@ require __DIR__ . '/_entry_popup.php'; ?>
    三处入口分散在首页/日程页，按需加载的判据会在这些页面之间来回漏；
    它只有几 KB，不值得为省这点流量赌"某个页面漏加载"。 */ ?>
 <script src="<?= e(asset('/assets/js/entry_popup.js')) ?>" defer></script>
+<?php /* 🔵 工单 #37（用户 2026-11-01）：「修改和新建，都不应该刷新页面，
+   而是使用js动态调整。」
+   ⇒ 新建/修改成功后**取服务端渲染好的片段整块替换**，不手写复刻渲染。
+   历史教训：手写复刻必然出错（`templates/calendar/index.php` 里 `putMonth` 的注释记着
+   一次真实事故 —— 新加一条 07:00 的日程被 append 到末尾，落进「+N 条」看不见，
+   刷新后却又跑到第一位）。
+   ⚠️ 全站加载：它在**首页**和**日程页**各有落点，按需加载的判据会来回漏；
+      自带"两个落点都不在就什么都不做"的判据，开销可忽略。
+   ⚠️ 必须排在 `entry_popup.js` 之后（浮层保存成功后要调它的 refresh）。
+      `defer` 保证按文档顺序执行，所以这两行的先后就是执行先后。 */ ?>
+<script src="<?= e(asset('/assets/js/cal_sync.js')) ?>" defer></script>
 <?php /* 🔴 v78：首页任务面板的动作脚本（状态/看板/子任务/附件/评论）。
    同样全站加载：面板是浮层的一部分，而浮层本身就挂在本布局里；
    脚本自带"面板不在就什么都不做"的判据。 */ ?>