The Divi Countdown module is great for counting down to a set date. The problem though, is that the date is a SET date and not an auto updating date. What if it were possible to get the countdown module to auto update to the time of the next event on your Google Calendar? There is no native option for that within the countdown module and at this time there is no plugin that you can download to get that functionality. (Maybe this might inspire a simple plugin for this) This can be done using another free plugin to retrieve you Google calendar events and loop through them to find the next one and then use that time to update the counter. Let’s begin.

For a prerequisite to this tutorial, I am going to assume that you already have WordPress and the Divi Plugin (or a theme using Divi such as Extra) already installed.

Step 1: Let’s first get the Google Calendar Events to the page. We will use these events to find the next future event and use that start timestamp to add it to work with our countdown. The easiest way I have found to pull in Google Calendar Events is by using the plugin Simple Calendar – Google Calendar Plugin we are using this plugin with WordPress 5.2.3 and all is working compatibly without any issues.

Step 2: After installing and activating the plugin, “Add a new Calendar”. In the Calendar Settings set the “Event Source” to use ‘Google Calendar’. I chose to show the calendar in “List” view for our application. In the Events tab I chose to have the calendar start on “Today” and show the earliest event as “Same as start date” For this application we will always have numerous recurring events each week so I chose to show the latest event “1 Week after start date”. Be sure to include your public Google Calendar ID on the “Google Calendar” tab to actually get your events.

Step 3: If you have not already, create a page/post and add the Divi Countdown Timer module to the page. On the module settings, pick any date in the past for the date to countdown to. In the “Advanced” tab, expand the “CSS ID & Classes” section and add a “CSS ID”. I am using nextEventCounter. This will give us a easy way to target this counter with Javascript.

Step 4: On the same page, add a Text Module and copy in the calendar shortcode that you setup in Step 2 above. Go to the Advanced settings and enter a unique id in the “CSS ID & Classes: CSS ID” field. I am using nextEvent.

As Step 4 is necessary to get the next event date from Google, it is not necessary to display the events to the user. You can opt to add display:none; in the Advanced settings of the element in the Custom CSS :Main Element field.

Step 5: Now that we have included both the Countdown Timer module with a unique ID and the Calendar events with a unique ID, we can now add some javascript to loop through all of the events, find the first future event, grab the timestamp, and place it in the countdown timer. This can sound complicated, but I have made it easy for your. Add the code module to the same Divi layout and paste in the following:

<script>
window.onload = function(){
     const nextEvent = "nextEvent";
     const nextEventCounter = "nextEventCounter";
     const currentDate = new Date().valueOf()/1000;
     //console.log('Current Date: '+currentDate);
     const allEvents = document.querySelectorAll('#'+nextEvent+' .simcal-event')
     if(allEvents == null){
         console.log('No calendar events found');
         return false;
     }   
     //console.log(allEvents);
     var nextEventDate = null;
     [].some.call(allEvents, (e)=>{
         if (!("start" in e.dataset)) {
             console.log('No start data attribute found');
             console.log(e.dataset);
             return false;
         }
         //console.log(e.dataset.start);
         if(e.dataset.start > currentDate){
             //console.log('Found next date: '+e.dataset.start);
             nextEventDate = e.dataset.start;
             return true;
         }
     });
 if(nextEventDate != null){     const nextEventCounterEl = document.querySelector('#'+nextEventCounter);     nextEventCounterEl.dataset.endTimestamp = nextEventDate; } else {     console.log('No next even found to load into counter'); }
 };
</script>

If you used different IDs than I did, update the first two variables to equal the string of your unique IDs.

DONE! That is all there is to it. You can do this in 5, mostly simple steps. I hope this helps you and I would love to see this implemented in the wild on your website. Feel free to contact me, and send me a link to your website.