.

djangorota/djangorota/templates/rota/leaves_global.html

@@ -9,15 +9,7 @@
       {% include 'rota/partials/flatpickr_includes.html' %}
       <link rel="stylesheet" href="{% static 'css/calendar.css' %}">
 
-      <div style="display:flex;gap:0.5rem;align-items:center;margin-bottom:0.5rem;">
-        <label for="rota-selector" style="margin:0;">Rota:</label>
-        <select id="rota-selector">
-          <option value="">All rotas</option>
-          {% for r in rotas %}
-            <option value="{{ r.id }}" {% if selected_rota_id == r.id %}selected{% endif %}>{{ r.name }}</option>
-          {% endfor %}
-        </select>
-      </div>
+      {# Rota selection is handled by route scoping; no dropdown needed here #}
 
       <div id="calendar" class="calendar" data-mode="inline"></div>
       <p class="help">View all leave requests across workers. Choose a rota to scope the calendar, or select "All rotas" to see everything. Click and drag to select dates to open the leave form (you'll need to choose workers in the modal).</p>
@@ -31,6 +23,7 @@
   </div>
 
   <script id="worker_leaves_json" type="application/json">{{ leaves_json|safe }}</script>
+  <script id="selected_rota_json" type="application/json">{{ selected_rota_id|default:"null" }}</script>
   <script src="{% static 'js/calendar.js' %}"></script>
   <script>
     (function(){
@@ -48,11 +41,12 @@
       // Base URL for leaves JSON
       let leavesUrlBase = '{% url "rota:leaves_global_json" %}';
       // Read initial rota selection provided by the view (if any)
-      const initialRota = {% if selected_rota_id %} '{{ selected_rota_id }}' {% else %} null {% endif %};
-      window.initCalendar('calendar', { leaves: leaves, leavesUrl: leavesUrlBase, rotaId: initialRota, requestUrl: '{% url "rota:request_leave" %}', mode: container.dataset.mode || 'inline' });
-
-      // Wire rota selector to update the calendar scope
-      const selector = document.getElementById('rota-selector');
+      let initialRota = null;
+      try{
+        const sel = document.getElementById('selected_rota_json');
+        if(sel) initialRota = JSON.parse(sel.textContent || sel.innerText || 'null');
+      }catch(e){ initialRota = null; }
+  window.initCalendar('calendar', { leaves: leaves, leavesUrl: leavesUrlBase, rotaId: initialRota, requestUrl: '{% url "rota:request_leave" %}', mode: container.dataset.mode || 'inline' });
       function refreshLegendFor(id){
         const legend = document.getElementById('rota-worker-legend');
         if(!legend) return;
@@ -65,16 +59,8 @@
           legend.innerHTML = Object.entries(byWorker).map(([id,info])=> `<div style="display:inline-flex;align-items:center;gap:0.5rem;margin-right:0.5rem"><span style="width:14px;height:14px;background:${info.color};border:1px solid rgba(0,0,0,0.1);display:inline-block"></span><span>${info.name}</span></div>`).join('');
         }).catch(e=>{ legend.innerText = 'Unable to load legend'; console.debug(e); });
       }
-      if(selector){
-        selector.addEventListener('change', function(){
-          const v = selector.value || null;
-          try{ const cal = window._calendars && window._calendars['calendar']; if(cal && typeof cal.setRotaId === 'function'){ cal.setRotaId(v); } }
-          catch(e){ console.debug('Unable to set rotaId on calendar', e); }
-          refreshLegendFor(v);
-        });
-        // initial legend
-        refreshLegendFor(initialRota);
-      }
+      // Refresh legend for the initially selected rota (or show all rotas)
+      refreshLegendFor(initialRota);
     })();
   </script>