Solution to get the next event data

THe plugin doesn;t have a direct way to get the data for the events currently. The closes thing I can think of would be the event builder codes. You could set them up to retrieve the events data that you want and maybe put it into a hidden div that is visible only when you need it?

Here are the event builder codes: https://wpdocs.philderksen.com/google-calendar-events/event-builder/

Is that kind of what you are looking for?

Interesting, but I am not sure that would do the trick.
Here is what I want on my page:

the calendar :
[google-calendar-events id=”XXX”]

the next event data :
<span style=”text-align:centerr;width:100%”>Next event:</span>
<div id=”next-event”>
<span id=”next-event-title”>Title :</span>
<span id=”next-event-title-value”></span>
<span id=”next-event-start-date”>Start date :</span>
<span id=”next-event-date-value”></span>
…
</div>

I need to get what is the next event for my calendar and fill its data (in italic). Through a javascript script for instance.

I am not sure to have fully understood what you think about: is it to load every event of the calendar inside a hidden div, using the event builder codes? In order to then looking for the next event (a loop) to extract the data and load them in the #next-event div?

Something like that:

<div hidden=”true”>
//For every event
<div class=”event-data” id=[event-id]>
<div>[event-title]</div>
<div>[start-date]</div>
…
//end for
</div>

And then (sorry if I make Javascript errors):

var today = getToday();
var events = $(“.event-data”);

for(i = 0; i < events.length; i++) {
var currentDay = events[i].children()[1]; //start date
if(isInFuture(today, currrentDay) {
loadData(events[i]);
break;
}
}

function getToday() {
var today = “”;
// get today in the correct format, thanks to a native javascript function or directly from the calendar and then “gce-today” class
return today;
}

function isInFuture(today, day) {
var isInFuture = false;
//compare today and day
return isInFuture;
}

function loadData(event){
$(“#next-event-title-value”).text(event.children()[0].text());
$(“#next-event-start-date-value”).text(event.children()[1].text());
…
}

Ok. I think I understand how it works ?? This page :https://wpdocs.philderksen.com/google-calendar-events/shortcode/ gives short examples.

[google-calendar-events id=”XXX” display=”list” interval=”events” interval_count=”1″] should do it! I just have to add styles now. Thank you!

EDIT: One problem remains, if there is an event today, it’s not picked. ??

Example:
* Today is the 03/27, it is 3pm is there is an event “event 0” at 8pm.
* Yersterday was the 03/26, there was an event “event -1” at 8pm.
* Tomorrow will be the 03/28, there will be an even “event 1” at 8pm.

With:
[google-calendar-events id=”XXX” display=”list” interval=”events” interval_count=”1″]
-> “event 1” is displayed, even if “event 0” is in the future (it’s 3pm and it will happen at 8pm)

With:
[google-calendar-events id=”XXX” display=”list” interval=”events” interval_count=”1″ offset_interval_count=”1″ offset_direction=”back”]
-> “event -1” is displayed. I thought “event 0” would be displayed if the “bug” was “logical”… But here it seems to behave correctly.

The problem only exists for an event happening today at an ulterior hour. It’s annoying because people usually want information about the last minute event to come. :/

Just in case, I also tried:
[google-calendar-events id=”XXX” display=”list” interval=”events” interval_count=”1″ offset_interval_count=”0″ offset_direction=”back”]
and
[google-calendar-events id=”XXX” display=”list” interval=”events” interval_count=”1″ offset_interval_count=”0″ offset_direction=”forward”]
but it still doesn’t work.

I figured out was it the problem : there is no problem.

I was looking at a widget calendar that is displayed on the right of the website in the same time as the event list page.
This calendar displayed an event for the 27th of March but the event list was not : it was not normal.
The thing is the event list was looking at events of the calendar XXX, and the widget calendar is displaying events of both calendars XXX and YYY… And of course, the 27th of March event was one of the YYY calendar events.

So no problem: topic resolved. ??

Glad to hear that!