I have a calendar with multiple views. I am trying to create a drop-down (other than the one in the ribbon) that can display in or around the web part and allow the user to select and see different views (ie. overlays).
Update: I created a calendar for each of the views, display each on the page as a web part. Then, managed to develop the following code, which seems to work, except that when I make a selection, it does not change the web part.
The intent is to hide all web parts and show only the one selected. Child(1) is the drop down and Child(2) is the web part - I think this may be where it's going wrong?
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script>
$(document).ready(function () {
$('div.ms-rtestate-read.ms-rte-wpbox:not(:nth-child(1),:nth-child(2))').hide();
$('option').on('click', function(){
var target = $(this).attr('rel');
$("#"+target).show().siblings('div.ms-rtestate-read.ms-rte-wpbox').hide();
});
});</script>
</head>
<body>
<select id="SelectorDropdown">
<option a href="#" rel="MSOZoneCell_WebPartWPQ9" class="DDOptions" id="ViewWP1">All Teams</option>
<option a href="#" rel="MSOZoneCell_WebPartWPQ3" class="DDOptions" id="ViewWP2">Team 1</option>
<option a href="#" rel="MSOZoneCell_WebPartWPQ4" class="DDOptions" id="ViewWP3">Team 2</option>
<option a href="#" rel="MSOZoneCell_WebPartWPQ5" class="DDOptions" id="ViewWP4">Team 3</option>
<option a href="#" rel="MSOZoneCell_WebPartWPQ6" class="DDOptions" id="ViewWP5">Team 4</option>
<option a href="#" rel="MSOZoneCell_WebPartWPQ7" class="DDOptions" id="ViewWP6">Team 5</option>
<option a href="#" rel="MSOZoneCell_WebPartWPQ8" class="DDOptions" id="ViewWP7">Team 6</option>
<option a href="#" rel="MSOZoneCell_WebPartWPQ10" class="DDOptions" id="ViewWP8">Team 7</option>
<option a href="#" rel="MSOZoneCell_WebPartWPQ11" class="DDOptions" id="ViewWP9">Team 8</option>
</select>
</body>
</html>
