ultimate-jekyll-manager 1.6.4 → 1.6.6

package/dist/assets/js/pages/admin/calendar/calendar-events.js

@@ -32,7 +32,6 @@ export default class CalendarEvents {
     this._initTypeToggle();
     this._initRecurrenceToggle();
     this._initSendNow();
-    this._initDeleteButton();
     this._initCreateButton();
     this._initPreview();
   }
@@ -47,7 +46,12 @@ export default class CalendarEvents {
       this._setType('email');
       this._resetRecurrence();
       document.getElementById('campaign-modal-title-text').textContent = 'Create Campaign';
+      document.getElementById('campaign-modal-id').classList.add('d-none');
+      document.getElementById('campaign-local-time-row').style.display = 'none';
     });
+
+    document.getElementById('campaign-date').addEventListener('input', () => this._updateLocalTimeHint());
+    document.getElementById('campaign-time').addEventListener('input', () => this._updateLocalTimeHint());
   }
 
   _initResultsModal() {
@@ -82,15 +86,57 @@ export default class CalendarEvents {
       allowResubmit: true,
     });
 
-    this.formManager.on('submit', async ({ data }) => {
-      const payload = this._buildPayload(data);
+    this.formManager.on('validation', ({ $submitButton }) => {
+      const action = $submitButton?.value || 'save';
+      if (action === 'delete' || action === 'test') {
+        this.formManager.clearFieldErrors();
+      }
+    });
+
+    this.formManager.on('submit', async ({ data, $submitButton }) => {
+      const action = $submitButton?.value || 'save';
+
+      if (action === 'delete') {
+        if (!this.editingCampaignId) { return; }
+        if (!confirm('Delete this campaign? This cannot be undone.')) {
+          this.formManager.ready();
+          return;
+        }
+        await this._deleteCampaign(this.editingCampaignId);
+        this._getEditorModal().hide();
+        return;
+      }
+
+      if (action === 'test') {
+        const payload = this._buildPayload(data);
+        payload.test = true;
+        payload.sendAt = 'now';
+        delete payload.recurrence;
+
+        if (this.editingCampaignId) {
+          payload.recurringId = this.editingCampaignId;
+        }
+
+        const url = `${webManager.getApiUrl()}/backend-manager/marketing/campaign`;
+        await authorizedFetch(url, {
+          method: 'POST',
+          timeout: 60000,
+          response: 'json',
+          tries: 1,
+          log: true,
+          body: payload,
+        });
+        this.formManager.showSuccess('Test sent');
+        return;
+      }
 
+      // Default: save
+      const payload = this._buildPayload(data);
       if (this.editingCampaignId) {
         await this._updateCampaign(this.editingCampaignId, payload);
       } else {
         await this._createCampaign(payload);
       }
-
       this._getEditorModal().hide();
     });
   }
@@ -105,7 +151,7 @@ export default class CalendarEvents {
         const isEmail = $radio.value === 'email';
         $emailFields.classList.toggle('d-none', !isEmail);
         $pushFields.classList.toggle('d-none', isEmail);
-        $subjectHint.textContent = isEmail ? '(email subject line)' : '(notification body text)';
+        $subjectHint.textContent = isEmail ? '(email subject line)' : '(notification body — campaign name is used as title)';
       });
     });
   }
@@ -168,6 +214,8 @@ export default class CalendarEvents {
     const $patternSelect = document.getElementById('campaign-recurrence-pattern');
     const $dayHint = document.getElementById('recurrence-day-hint');
     const $monthRow = document.getElementById('recurrence-month-row');
+    const $nthRow = document.getElementById('recurrence-nth-row');
+    const $dayInput = document.getElementById('campaign-recurrence-day');
 
     $checkbox.addEventListener('change', () => {
       $fields.classList.toggle('d-none', !$checkbox.checked);
@@ -175,14 +223,21 @@ export default class CalendarEvents {
 
     $patternSelect.addEventListener('change', () => {
       const pattern = $patternSelect.value;
-      // Update day hint based on pattern
-      if (pattern === 'weekly') {
+
+      const isWeekday = pattern === 'weekly' || pattern === 'monthly-weekday';
+
+      if (isWeekday) {
         $dayHint.textContent = '(of week, 0=Sun)';
+        $dayInput.min = 0;
+        $dayInput.max = 6;
       } else {
         $dayHint.textContent = '(of month)';
+        $dayInput.min = 1;
+        $dayInput.max = 31;
       }
-      // Show month field only for yearly
+
       $monthRow.classList.toggle('d-none', pattern !== 'yearly');
+      $nthRow.classList.toggle('d-none', pattern !== 'monthly-weekday');
     });
   }
 
@@ -191,27 +246,10 @@ export default class CalendarEvents {
       const now = new Date();
       document.getElementById('campaign-date').value = formatDateUTC(now);
       document.getElementById('campaign-time').value = formatTimeUTC(now);
+      this._updateLocalTimeHint();
     });
   }
 
-  _initDeleteButton() {
-    document.getElementById('btn-delete-campaign').addEventListener('click', async () => {
-      if (!this.editingCampaignId) {
-        return;
-      }
-
-      if (!confirm('Delete this campaign? This cannot be undone.')) {
-        return;
-      }
-
-      try {
-        await this._deleteCampaign(this.editingCampaignId);
-        this._getEditorModal().hide();
-      } catch (error) {
-        this.formManager.showError(`Delete failed: ${error.message}`);
-      }
-    });
-  }
 
   // ============================================
   // Modal Operations
@@ -220,12 +258,14 @@ export default class CalendarEvents {
     this.editingCampaignId = null;
     this.formManager.reset();
     this._toggleDeleteButton(false);
+    this._showCampaignId(null);
     this._setType('email');
     document.getElementById('campaign-modal-title-text').textContent = 'Create Campaign';
 
     // Pre-fill date and time
     document.getElementById('campaign-date').value = date || '';
     document.getElementById('campaign-time').value = time || '09:00';
+    this._updateLocalTimeHint();
 
     this._getEditorModal().show();
   }
@@ -246,6 +286,7 @@ export default class CalendarEvents {
       }
       this.editingCampaignId = template.id;
       this._toggleDeleteButton(true);
+      this._showCampaignId(template.id);
       document.getElementById('campaign-modal-title-text').textContent = 'Edit Recurring Campaign';
       this._populateFormFromCampaign(template, true);
       this._getEditorModal().show();
@@ -260,10 +301,15 @@ export default class CalendarEvents {
       return;
     }
 
-    // Recurring template: editable (changes apply to all future sends)
+    // Recurring template: editable only if still pending
     if (displayType === DISPLAY_TYPES.RECURRING_TEMPLATE) {
+      if (campaign.status === 'sent' || campaign.status === 'failed') {
+        this._openResultsModal(campaign);
+        return;
+      }
       this.editingCampaignId = campaignId;
       this._toggleDeleteButton(true);
+      this._showCampaignId(campaignId);
       document.getElementById('campaign-modal-title-text').textContent = 'Edit Recurring Campaign';
       this._populateFormFromCampaign(campaign, true);
       this._getEditorModal().show();
@@ -273,6 +319,7 @@ export default class CalendarEvents {
     // One-off pending: fully editable
     this.editingCampaignId = campaignId;
     this._toggleDeleteButton(true);
+    this._showCampaignId(campaignId);
     document.getElementById('campaign-modal-title-text').textContent = 'Edit Campaign';
     this._populateFormFromCampaign(campaign, true);
     this._getEditorModal().show();
@@ -309,7 +356,8 @@ export default class CalendarEvents {
     document.getElementById('campaign-subject').value = settings.subject || '';
     document.getElementById('campaign-date').value = formatDateUTC(d);
     document.getElementById('campaign-time').value = formatTimeUTC(d);
-    document.getElementById('campaign-discount-code').value = settings.discountCode || '';
+    const contentData = settings.data?.content || {};
+    document.getElementById('campaign-discount-code').value = contentData.discountCode || '';
     document.getElementById('campaign-test').checked = !!settings.test;
 
     // Targeting
@@ -319,8 +367,8 @@ export default class CalendarEvents {
 
     // Email fields
     document.getElementById('campaign-preheader').value = settings.preheader || '';
-    document.getElementById('campaign-content').value = settings.content || '';
-    document.getElementById('campaign-template').value = settings.template || 'default';
+    document.getElementById('campaign-content').value = contentData.message || '';
+    document.getElementById('campaign-template').value = settings.template || 'card';
     document.getElementById('campaign-sender').value = settings.sender || 'marketing';
 
     // Push fields
@@ -359,23 +407,32 @@ export default class CalendarEvents {
     const $recurrenceFields = document.getElementById('recurrence-fields');
 
     if (recurrence) {
+      const pattern = recurrence.pattern || 'monthly';
+      const isWeekday = pattern === 'weekly' || pattern === 'monthly-weekday';
+
       $recurringCheckbox.checked = true;
       $recurrenceFields.classList.remove('d-none');
-      document.getElementById('campaign-recurrence-pattern').value = recurrence.pattern || 'monthly';
+      document.getElementById('campaign-recurrence-pattern').value = pattern;
       document.getElementById('campaign-recurrence-hour').value = recurrence.hour || 0;
+      document.getElementById('campaign-recurrence-minute').value = recurrence.minute || 0;
       document.getElementById('campaign-recurrence-day').value = recurrence.day || 1;
+      document.getElementById('campaign-recurrence-nth').value = recurrence.nth || 2;
       document.getElementById('campaign-recurrence-month').value = recurrence.month || 1;
 
-      // Show month row if yearly
-      document.getElementById('recurrence-month-row').classList.toggle('d-none', recurrence.pattern !== 'yearly');
+      document.getElementById('recurrence-month-row').classList.toggle('d-none', pattern !== 'yearly');
+      document.getElementById('recurrence-nth-row').classList.toggle('d-none', pattern !== 'monthly-weekday');
 
-      // Update day hint
       const $dayHint = document.getElementById('recurrence-day-hint');
-      $dayHint.textContent = recurrence.pattern === 'weekly' ? '(of week, 0=Sun)' : '(of month)';
+      const $dayInput = document.getElementById('campaign-recurrence-day');
+      $dayHint.textContent = isWeekday ? '(of week, 0=Sun)' : '(of month)';
+      $dayInput.min = isWeekday ? 0 : 1;
+      $dayInput.max = isWeekday ? 6 : 31;
     } else {
       $recurringCheckbox.checked = false;
       $recurrenceFields.classList.add('d-none');
     }
+
+    this._updateLocalTimeHint();
   }
 
   _setType(type) {
@@ -386,6 +443,45 @@ export default class CalendarEvents {
     }
   }
 
+  _showCampaignId(id) {
+    const $el = document.getElementById('campaign-modal-id');
+    if (id) {
+      $el.textContent = id;
+      $el.classList.remove('d-none');
+    } else {
+      $el.classList.add('d-none');
+    }
+  }
+
+  _updateLocalTimeHint() {
+    const $row = document.getElementById('campaign-local-time-row');
+    const $hint = document.getElementById('campaign-time-local');
+    const date = document.getElementById('campaign-date').value;
+    const time = document.getElementById('campaign-time').value;
+
+    if (!date || !time) {
+      $row.style.display = 'none';
+      return;
+    }
+
+    const [y, mo, d] = date.split('-').map(Number);
+    const [h, m] = time.split(':').map(Number);
+    const utc = new Date(Date.UTC(y, mo - 1, d, h, m));
+
+    const localStr = utc.toLocaleString('en', {
+      weekday: 'short',
+      month: 'short',
+      day: 'numeric',
+      year: 'numeric',
+      hour: 'numeric',
+      minute: '2-digit',
+      timeZoneName: 'short',
+    });
+
+    $hint.textContent = `Local: ${localStr}`;
+    $row.style.display = '';
+  }
+
   // ============================================
   // Payload Building
   // ============================================
@@ -404,9 +500,6 @@ export default class CalendarEvents {
     };
 
     // Config
-    if (c.discountCode) {
-      payload.discountCode = c.discountCode.trim();
-    }
     if (c.test) {
       payload.test = true;
     }
@@ -440,15 +533,23 @@ export default class CalendarEvents {
       if (c.preheader) {
         payload.preheader = c.preheader.trim();
       }
-      if (c.content) {
-        payload.content = c.content;
-      }
-      if (c.template && c.template !== 'default') {
+      if (c.template && c.template !== 'card') {
         payload.template = c.template;
       }
       if (c.sender) {
         payload.sender = c.sender;
       }
+
+      const content = {};
+      if (c.content) {
+        content.message = c.content;
+      }
+      if (c.discountCode) {
+        content.discountCode = c.discountCode.trim();
+      }
+      if (Object.keys(content).length) {
+        payload.data = { ...payload.data, content };
+      }
     }
 
     // Push-specific
@@ -498,12 +599,17 @@ export default class CalendarEvents {
     // Recurrence
     if (c.recurring) {
       const rec = c.recurrence || {};
+      const pattern = rec.pattern || 'monthly';
       payload.recurrence = {
-        pattern: rec.pattern || 'monthly',
+        pattern,
         hour: parseInt(rec.hour, 10) || 0,
+        minute: parseInt(rec.minute, 10) || 0,
         day: parseInt(rec.day, 10) || 1,
       };
-      if (rec.pattern === 'yearly') {
+      if (pattern === 'monthly-weekday') {
+        payload.recurrence.nth = parseInt(rec.nth, 10) || 1;
+      }
+      if (pattern === 'yearly') {
         payload.recurrence.month = parseInt(rec.month, 10) || 1;
       }
     }
@@ -616,8 +722,13 @@ export default class CalendarEvents {
 
     // Update recurrence metadata for the backend cron
     recurrence.hour = d.getUTCHours();
+    recurrence.minute = d.getUTCMinutes();
     if (recurrence.pattern === 'weekly') {
       recurrence.day = d.getUTCDay();
+    } else if (recurrence.pattern === 'monthly-weekday') {
+      recurrence.day = d.getUTCDay();
+      // Calculate which occurrence of this weekday falls on this date (1st, 2nd, 3rd, 4th)
+      recurrence.nth = Math.ceil(d.getUTCDate() / 7);
     } else if (recurrence.pattern === 'monthly' || recurrence.pattern === 'quarterly') {
       recurrence.day = d.getUTCDate();
     } else if (recurrence.pattern === 'yearly') {
@@ -670,9 +781,12 @@ export default class CalendarEvents {
     html += `<span class="badge bg-${campaign.type === 'email' ? 'primary' : 'success'}">${campaign.type === 'email' ? 'Email' : 'Push'}</span>`;
     html += `</div>`;
     html += `<table class="table table-sm table-borderless mb-0">`;
-    html += `<tr><td class="text-muted" style="width:120px">Name</td><td>${webManager.utilities().escapeHTML(settings.name || '')}</td></tr>`;
+    html += `<tr><td class="text-muted" style="width:120px">ID</td><td><code>${webManager.utilities().escapeHTML(campaign.id)}</code></td></tr>`;
+    html += `<tr><td class="text-muted">Name</td><td>${webManager.utilities().escapeHTML(settings.name || '')}</td></tr>`;
     html += `<tr><td class="text-muted">Subject</td><td>${webManager.utilities().escapeHTML(settings.subject || '')}</td></tr>`;
-    html += `<tr><td class="text-muted">Sent At</td><td>${formatDateUTC(d)} ${formatTimeUTC(d)} UTC</td></tr>`;
+    html += `<tr><td class="text-muted">Test</td><td>${settings.test ? '<span class="badge bg-warning">Yes</span>' : 'No'}</td></tr>`;
+    const localStr = d.toLocaleString('en', { weekday: 'short', month: 'short', day: 'numeric', year: 'numeric', hour: 'numeric', minute: '2-digit', timeZoneName: 'short' });
+    html += `<tr><td class="text-muted">Sent At</td><td>${formatDateUTC(d)} ${formatTimeUTC(d)} UTC <span class="text-muted">(${localStr})</span></td></tr>`;
 
     if (campaign.type === 'email') {
       if (settings.preheader) {
@@ -705,10 +819,11 @@ export default class CalendarEvents {
     html += '</div>';
 
     // Content (email only)
-    if (campaign.type === 'email' && settings.content) {
+    const resultContent = settings.data?.content?.message;
+    if (campaign.type === 'email' && resultContent) {
       html += '<div class="mb-4">';
       html += '<h6>Content</h6>';
-      html += `<pre class="bg-body-tertiary p-3 rounded small" style="white-space:pre-wrap;max-height:200px;overflow-y:auto">${webManager.utilities().escapeHTML(settings.content)}</pre>`;
+      html += `<pre class="bg-body-tertiary p-3 rounded small" style="white-space:pre-wrap;max-height:200px;overflow-y:auto">${webManager.utilities().escapeHTML(resultContent)}</pre>`;
       html += '</div>';
     }
 
@@ -735,9 +850,12 @@ export default class CalendarEvents {
     document.getElementById('recurrence-fields').classList.add('d-none');
     document.getElementById('campaign-recurrence-pattern').value = 'monthly';
     document.getElementById('campaign-recurrence-hour').value = '14';
+    document.getElementById('campaign-recurrence-minute').value = '0';
     document.getElementById('campaign-recurrence-day').value = '1';
+    document.getElementById('campaign-recurrence-nth').value = '2';
     document.getElementById('campaign-recurrence-month').value = '1';
     document.getElementById('recurrence-month-row').classList.add('d-none');
+    document.getElementById('recurrence-nth-row').classList.add('d-none');
   }
 
 }

package/dist/assets/js/pages/admin/calendar/calendar-renderer.js

@@ -14,6 +14,18 @@ export default class CalendarRenderer {
     this.$toolbar = document.getElementById('calendar-toolbar');
     this.$grid = document.getElementById('calendar-grid');
     this._nowLineInterval = null;
+    this._resizeObserver = null;
+
+    this._initResizeObserver();
+  }
+
+  _initResizeObserver() {
+    this._resizeObserver = new ResizeObserver(() => {
+      if (this.core.viewMode === 'month') {
+        this._fitMonthEvents();
+      }
+    });
+    this._resizeObserver.observe(this.$grid);
   }
 
   // ============================================
@@ -90,6 +102,7 @@ export default class CalendarRenderer {
   // Month View
   // ============================================
   _renderMonthView() {
+    this._pillHeight = null;
     const core = this.core;
     const cells = core.getMonthGrid();
 
@@ -110,10 +123,9 @@ export default class CalendarRenderer {
       html += `<div class="calendar-cell-date">${cell.date.getUTCDate()}</div>`;
       html += '<div class="calendar-cell-events">';
 
-      const maxVisible = 3;
-      campaigns.slice(0, maxVisible).forEach((c) => { html += this._renderEventPill(c); });
-      if (campaigns.length > maxVisible) {
-        html += `<div class="calendar-cell-more" data-date="${dateStr}">+${campaigns.length - maxVisible} more</div>`;
+      campaigns.forEach((c) => { html += this._renderEventPill(c); });
+      if (campaigns.length > 0) {
+        html += `<div class="calendar-cell-more" data-date="${dateStr}" style="display:none"></div>`;
       }
 
       html += '</div></div>';
@@ -121,11 +133,81 @@ export default class CalendarRenderer {
     html += '</div>';
 
     this.$grid.innerHTML = html;
+    requestAnimationFrame(() => this._fitMonthEvents());
     this._bindCellClicks();
     this._bindCampaignClicks();
     this._bindDragAndDrop();
   }
 
+  _fitMonthEvents() {
+    // Measure natural pill height once from a detached clone so flex
+    // compression doesn't skew the value
+    if (!this._pillHeight) {
+      const $sample = this.$grid.querySelector('.calendar-event');
+      if ($sample) {
+        const $clone = $sample.cloneNode(true);
+        $clone.style.cssText = 'position:absolute;visibility:hidden;pointer-events:none;';
+        document.body.appendChild($clone);
+        this._pillHeight = $clone.getBoundingClientRect().height;
+        $clone.remove();
+      }
+    }
+
+    this.$grid.querySelectorAll('.calendar-cell').forEach(($cell) => {
+      const $events = $cell.querySelector('.calendar-cell-events');
+      if (!$events) { return; }
+
+      const $pills = $events.querySelectorAll('.calendar-event');
+      const $more = $events.querySelector('.calendar-cell-more');
+      if ($pills.length === 0) { return; }
+
+      // Hide everything first so the cell has its natural empty height
+      $pills.forEach(($p) => { $p.style.display = 'none'; });
+      if ($more) { $more.style.display = 'none'; }
+
+      const cellRect = $cell.getBoundingClientRect();
+      const eventsRect = $events.getBoundingClientRect();
+      const available = cellRect.bottom - eventsRect.top;
+
+      const pillHeight = this._pillHeight || 20;
+      const gap = 1;
+
+      // Measure "+more" line height
+      if ($more) {
+        $more.textContent = '+1 more';
+        $more.style.display = '';
+      }
+      const moreLineHeight = $more ? $more.getBoundingClientRect().height + gap : 0;
+      if ($more) { $more.style.display = 'none'; }
+
+      // Calculate how many pills fit
+      let maxVisible = 0;
+      for (let n = 1; n <= $pills.length; n++) {
+        const pillsHeight = n * pillHeight + (n - 1) * gap;
+        const needsMore = n < $pills.length;
+        const total = pillsHeight + (needsMore ? moreLineHeight : 0);
+        if (total <= available) {
+          maxVisible = n;
+        } else {
+          break;
+        }
+      }
+
+      // Apply visibility
+      $pills.forEach(($p, i) => {
+        $p.style.display = i < maxVisible ? '' : 'none';
+      });
+
+      if ($more) {
+        const hidden = $pills.length - maxVisible;
+        if (hidden > 0) {
+          $more.textContent = `+${hidden} more`;
+          $more.style.display = '';
+        }
+      }
+    });
+  }
+
   // ============================================
   // Week View
   // ============================================
@@ -141,12 +223,6 @@ export default class CalendarRenderer {
     });
     html += '</div>';
 
-    html += '<div class="calendar-week-allday"><div class="calendar-week-time-label">all-day</div>';
-    weekDates.forEach((date) => {
-      html += `<div class="calendar-cell" data-date="${formatDateUTC(date)}" data-allday="true" style="min-height:auto;border-bottom:none;"></div>`;
-    });
-    html += '</div>';
-
     html += '<div class="calendar-week-body"><div class="calendar-week-time-col">';
     hours.forEach((hour) => { html += `<div class="calendar-week-time-label">${hour.label}</div>`; });
     html += '</div>';
@@ -277,7 +353,7 @@ export default class CalendarRenderer {
         html += `<tr class="calendar-list-date-header"><td colspan="4">${dayName}, ${monthName} ${d.getUTCDate()}, ${d.getUTCFullYear()}${todayBadge}</td></tr>`;
       }
 
-      const timeStr = this._formatTime(formatTimeUTC(campaign.sendAt));
+      const timeStr = this._formatLocalTime(campaign.sendAt);
       const name = (campaign.settings && campaign.settings.name) || 'Untitled';
       const statusStyle = core.campaignStatusStyle(campaign);
       const isRecurring = core.isRecurring(campaign);
@@ -320,7 +396,7 @@ export default class CalendarRenderer {
 
   _renderEventPill(campaign) {
     const core = this.core;
-    const timeStr = this._formatTime(formatTimeUTC(campaign.sendAt));
+    const timeStr = this._formatLocalTime(campaign.sendAt);
     const color = core.campaignColor(campaign);
     const statusStyle = core.campaignStatusStyle(campaign);
     const name = (campaign.settings && campaign.settings.name) || 'Untitled';
@@ -356,11 +432,11 @@ export default class CalendarRenderer {
 
   _renderTimeEvent(campaign, layout) {
     const core = this.core;
-    const time = formatTimeUTC(campaign.sendAt);
-    const [hours, minutes] = time.split(':').map(Number);
+    const utcTime = formatTimeUTC(campaign.sendAt);
+    const [hours, minutes] = utcTime.split(':').map(Number);
     const topPx = (hours * 60 + minutes);
     const heightPx = Math.max(core.campaignDuration(), 15);
-    const timeStr = this._formatTime(time);
+    const timeStr = this._formatLocalTime(campaign.sendAt);
     const color = core.campaignColor(campaign);
     const statusStyle = core.campaignStatusStyle(campaign);
     const name = (campaign.settings && campaign.settings.name) || 'Untitled';
@@ -452,7 +528,7 @@ export default class CalendarRenderer {
   // ============================================
   _startNowLine() {
     clearInterval(this._nowLineInterval);
-    if (this.core.viewMode !== 'day' && this.core.viewMode !== 'week') {
+    if (this.core.viewMode !== 'day' && this.core.viewMode !== 'week' && this.core.viewMode !== 'month') {
       return;
     }
     this._updateNowLine();
@@ -466,6 +542,7 @@ export default class CalendarRenderer {
     const todayStr = formatDateUTC(now);
     const minutesSinceMidnight = now.getUTCHours() * 60 + now.getUTCMinutes();
 
+    // Week/day views: absolute position in px (1px per minute)
     const $cols = this.$grid.querySelectorAll(
       `.calendar-week-day-col[data-date="${todayStr}"], .calendar-day-col[data-date="${todayStr}"]`
     );
@@ -476,6 +553,24 @@ export default class CalendarRenderer {
       $line.style.top = `${minutesSinceMidnight}px`;
       $col.appendChild($line);
     });
+
+    // Month view: position on the grid container so the dot isn't clipped by cell overflow
+    if (this.core.viewMode === 'month') {
+      const $cell = this.$grid.querySelector(`.calendar-cell[data-date="${todayStr}"]`);
+      if ($cell) {
+        const gridRect = this.$grid.getBoundingClientRect();
+        const cellRect = $cell.getBoundingClientRect();
+        const pct = minutesSinceMidnight / 1440;
+        const topPx = (cellRect.top - gridRect.top) + (cellRect.height * pct);
+
+        const $line = document.createElement('div');
+        $line.className = 'calendar-now-line';
+        $line.style.top = `${topPx}px`;
+        $line.style.left = `${cellRect.left - gridRect.left}px`;
+        $line.style.width = `${cellRect.width}px`;
+        this.$grid.appendChild($line);
+      }
+    }
   }
 
   // ============================================
@@ -679,5 +774,14 @@ export default class CalendarRenderer {
     const display = h === 0 ? 12 : h > 12 ? h - 12 : h;
     return `${display}${m > 0 ? ':' + String(m).padStart(2, '0') : ''}${period}`;
   }
+
+  _formatLocalTime(sendAt) {
+    const d = new Date(sendAt * 1000);
+    const h = d.getHours();
+    const m = d.getMinutes();
+    const period = h >= 12 ? 'p' : 'a';
+    const display = h === 0 ? 12 : h > 12 ? h - 12 : h;
+    return `${display}${m > 0 ? ':' + String(m).padStart(2, '0') : ''}${period}`;
+  }
 }