diff --git a/static/js/calendar.js b/static/js/calendar.js
index 4a6802b..7651ec4 100644
--- a/static/js/calendar.js
+++ b/static/js/calendar.js
@@ -14,8 +14,12 @@
   function iso(y,m,d){ return `${y}-${String(m+1).padStart(2,'0')}-${String(d).padStart(2,'0')}` }
 
   function initCalendar(containerId, opts){
-    const container = document.getElementById(containerId);
+    // Accept either an element id or a direct element reference
+    const container = typeof containerId === 'string' ? document.getElementById(containerId) : containerId;
     if(!container) return;
+  // ensure container uses the expected CSS class so shared styles apply
+  try{ container.classList.add && container.classList.add('calendar'); }catch(e){}
+    console.debug('initCalendar', containerId, opts);
     const workerId = opts.workerId || container.dataset.workerId || '';
   let leaves = opts.leaves || [];
   const leavesUrl = opts.leavesUrl || null;
@@ -46,7 +50,7 @@
         };
       }
       const label = document.getElementById('sel-label');
-      if(selStart && selEnd) label.textContent = `Selected: ${selStart} → ${selEnd}`;
+  if(selStart && selEnd) label.textContent = `Selected: ${selStart} -> ${selEnd}`;
       else if(selStart) label.textContent = `Start: ${selStart}`;
       else label.textContent = 'No dates selected';
       document.getElementById('sel-confirm').disabled = !selStart;
@@ -127,6 +131,7 @@
       container.addEventListener('pointerdown', function(evt){
         try{
           const dayEl = evt.target.closest && evt.target.closest('.day');
+          console.debug('calendar click', evt.target, dayEl && dayEl.dataset && dayEl.dataset.iso);
           if(!dayEl || dayEl.classList.contains('other-month')) return;
           const clicked = dayEl.dataset.iso;
           if(!selStart){ selStart = clicked; selEnd = null; }