MDL-71817 calendar: Fix duplicate IDs for multiple calendar blocks

Done by:
* Designating instance IDs for each month_exporter instances and
assigning these instance IDs in templates.
* Adding the instance ID as an optional parameter for the
core_calendar_renderer::course_filter_selector() to generate
course filters with unique element IDs.

calendar/classes/external/month_exporter.php

@@ -39,6 +39,12 @@ use moodle_url;
  */
 class month_exporter extends exporter {
 
+    /** @var int Number of calendar instances displayed. */
+    protected static $calendarinstances = 0;
+
+    /** @var int This calendar instance's ID. */
+    protected $calendarinstanceid = 0;
+
     /**
      * @var \calendar_information $calendar The calendar to be rendered.
      */
@@ -77,6 +83,10 @@ class month_exporter extends exporter {
      * @param array $related The related information
      */
     public function __construct(\calendar_information $calendar, \core_calendar\type_base $type, $related) {
+        // Increment the calendar instances count on initialisation.
+        self::$calendarinstances++;
+        // Assign this instance an ID based on the latest calendar instances count.
+        $this->calendarinstanceid = self::$calendarinstances;
         $this->calendar = $calendar;
         $this->firstdayofweek = $type->get_starting_weekday();
 
@@ -190,6 +200,10 @@ class month_exporter extends exporter {
                 'type' => PARAM_INT,
                 'default' => 0,
             ],
+            'calendarinstanceid' => [
+                'type' => PARAM_INT,
+                'default' => 0,
+            ],
         ];
     }
 
@@ -227,6 +241,7 @@ class month_exporter extends exporter {
             'rarrow' => $output->rarrow(),
             'includenavigation' => $this->includenavigation,
             'initialeventsloaded' => $this->initialeventsloaded,
+            'calendarinstanceid' => $this->calendarinstanceid,
         ];
 
         if ($this->showcoursefilter) {
@@ -252,7 +267,7 @@ class month_exporter extends exporter {
      */
     protected function get_course_filter_selector(renderer_base $output) {
         $content = '';
-        $content .= $output->course_filter_selector($this->url, '', $this->calendar->course->id);
+        $content .= $output->course_filter_selector($this->url, '', $this->calendar->course->id, $this->calendarinstanceid);
 
         return $content;
     }

calendar/renderer.php

@@ -243,9 +243,10 @@ class core_calendar_renderer extends plugin_renderer_base {
      * @param moodle_url $returnurl The URL that the user should be taken too upon selecting a course.
      * @param string $label The label to use for the course select.
      * @param int $courseid The id of the course to be selected.
+     * @param int|null $calendarinstanceid The instance ID of the calendar we're generating this course filter for.
      * @return string
      */
-    public function course_filter_selector(moodle_url $returnurl, $label = null, $courseid = null) {
+    public function course_filter_selector(moodle_url $returnurl, $label = null, $courseid = null, int $calendarinstanceid = null) {
         global $CFG, $DB;
 
         if (!isloggedin() or isguestuser()) {
@@ -301,9 +302,13 @@ class core_calendar_renderer extends plugin_renderer_base {
             $labelattributes['class'] = 'sr-only';
         }
 
-        $select = html_writer::label($label, 'course', false, $labelattributes);
+        $filterid = 'calendar-course-filter';
+        if ($calendarinstanceid) {
+            $filterid .= "-$calendarinstanceid";
+        }
+        $select = html_writer::label($label, $filterid, false, $labelattributes);
         $select .= html_writer::select($courseoptions, 'course', $selected, false,
-                ['class' => 'cal_courses_flt ml-1 mr-auto', 'id' => 'course']);
+                ['class' => 'cal_courses_flt ml-1 mr-auto', 'id' => $filterid]);
 
         return $select;
     }

calendar/templates/calendar_month.mustache

@@ -31,12 +31,12 @@
     {
     }
 }}
-<div id="calendar-month-{{uniqid}}" data-template="core_calendar/month_detailed">
+<div id="calendar-month-{{uniqid}}-{{calendarinstanceid}}" data-template="core_calendar/month_detailed">
     {{> core_calendar/header}}
     {{> core_calendar/month_detailed}}
 </div>
 {{#js}}
 require(['jquery', 'core_calendar/calendar'], function($, Calendar) {
-    Calendar.init($("#calendar-month-{{uniqid}}"));
+    Calendar.init($("#calendar-month-{{uniqid}}-{{calendarinstanceid}}"));
 });
 {{/js}}

calendar/templates/month_detailed.mustache

@@ -42,7 +42,7 @@
     }}>
     {{> core_calendar/month_navigation }}
     {{> core/overlay_loading}}
-    <table id="month-detailed-{{uniqid}}" class="calendarmonth calendartable mb-0">
+    <table id="month-detailed-{{uniqid}}-{{calendarinstanceid}}" class="calendarmonth calendartable mb-0">
         <thead>
             <tr>
                 {{# daynames }}
@@ -159,7 +159,7 @@ require([
     CalendarSelectors,
     CalendarEvents
 ) {
-    var root = $('#month-detailed-{{uniqid}}');
+    var root = $('#month-detailed-{{uniqid}}-{{calendarinstanceid}}');
     DragDrop.init(root);
 
     $('body').on(CalendarEvents.filterChanged, function(e, data) {

calendar/templates/month_navigation.mustache

@@ -31,7 +31,7 @@
     {
     }
 }}
-<div id="month-navigation-{{uniqid}}" class="controls">
+<div id="month-navigation-{{uniqid}}-{{calendarinstanceid}}" class="controls">
     <div class="calendar-controls">
         <a{{!
             }} href="{{previousperiodlink}}"{{!
@@ -64,7 +64,7 @@
 </div>
 {{#js}}
 require(['jquery', 'core_calendar/month_navigation_drag_drop'], function($, DragDrop) {
-    var root = $('#month-navigation-{{uniqid}}');
+    var root = $('#month-navigation-{{uniqid}}-{{calendarinstanceid}}');
     DragDrop.init(root);
 });
 {{/js}}