Michael Bett

I created code to do this flip between grid and list views in WordPress. We are actually going to display both the list view and grid view at the same time. However, to get the effect that I want, we’ll hide the one that we do not want to see and unhide the one we do want to see.

To start, make a duplicate of your calendar in the Simple Calendar app. Both should have the same Google Calendar feed. However, change one to list view and the other one to grid view.

On a new page enter the create a Custom HTML block with the following contents:

<script>
// Initialize the calendar view
//
function initializeEventView() {

   // Get the HTML elements so we can manipulate them
   var listview = document.getElementById("list-view");
   var gridview = document.getElementById("grid-view");
   var togglebutton = document.getElementById("toggle-button");

   // Initially display the calendar (grid) view.
   //
   // Show the grid view and hide the list view
   gridview.style.display = "block";
   listview.style.display = "none";

   // Update the toggle button
   togglebutton.innerHTML = "Show Event List";

}

// This function is called when the toggle button is pressed
//
function toggleCalendarView() {
  
  // Get the HTML elements so we can manipulate them
  var listview = document.getElementById("list-view");
  var gridview = document.getElementById("grid-view");
  var togglebutton = document.getElementById("toggle-button");
    
  // Toggle the view from grid to list
  if (listview.style.display === "none") {
    gridview.style.display = "none";
    listview.style.display = "block";
    
    // Update the button label
    togglebutton.innerHTML = "Show Event Grid";
  } else { // Otherwise, toggle the view from list to grid
    gridview.style.display = "block";
    listview.style.display = "none";

    // Update the button label
    togglebutton.innerHTML = "Show Event List";
  }
}

</script>


<button id="toggle-button" onclick="toggleCalendarView()">Toggle Me</button>

<div id="list-view">

We use <div> to name the blocks so we can manipulate them. Then create a shortcode that points to your list view calendar

[calendar id="your list-view calendar id"]

Create a second CustomHTML block and enter:

</div>

<div id="grid-view">

Again we are using <div> to name the blocks so we can manipulate them. Then we create a shortcode that points to your grid view calendar.

</div>

<script>
   // Initialize the calendar view
   //
   initializeEventView();
</script>

Save and view your page. Fix any errors (hint: use the console window) and “Presto” this should work for you.

Below are images of what this looks like for me.

Cheers,

Michael

• This reply was modified 11 months ago by Michael Bett. Reason: Add screen dumps