.

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;">
+      {# Rota selection is handled by route scoping; no dropdown needed here #}
-        <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>
 
       <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 %};
+      let initialRota = null;
-      window.initCalendar('calendar', { leaves: leaves, leavesUrl: leavesUrlBase, rotaId: initialRota, requestUrl: '{% url "rota:request_leave" %}', mode: container.dataset.mode || 'inline' });
+      try{
-
+        const sel = document.getElementById('selected_rota_json');
-      // Wire rota selector to update the calendar scope
+        if(sel) initialRota = JSON.parse(sel.textContent || sel.innerText || 'null');
-      const selector = document.getElementById('rota-selector');
+      }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){
+      // Refresh legend for the initially selected rota (or show all rotas)
-        selector.addEventListener('change', function(){
+      refreshLegendFor(initialRota);
-          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);
-      }
     })();
   </script>