Countdown based on calendar does not reset properly.

[jaysavage1983]

What happened?

I'm using craft calendar with custom api and jquery countdown.
I've noticed after an event ends for example Wednedays 6pm-8pm the countdown resets its self to 24 hours 00 minutes on page refresh and every refresh resets the same back to the 24 hours. The countdown does not correctly reset until 12am the following day. If something in my code needs to be changed to fix this

Just to keep this space clean all of the code can be found here: https://gist.github.com/JayGreentree/f0fa719ff45f768373754c066fa74563

Errors and Stack Trace (if available)

How can we reproduce this?

1. Create data.json.twig file in /templates/api (from the gist link above)
2. Create the jquery countdown in /web/js/chopNew.js (from the gist link above)
3. Add CSS (from the gist link above)
4. Add the countdown code to any twig template (from the gist link above)
5. Add an event to craft calendar for every 1 week hit save.
6. wait til even date/time is over and refresh page with countdown

Calendar Edition

Pro

Calendar Version

5.0.16

Craft Version

5.6.14

When did this issue start?

• Unsure
• Fresh install of Calendar
• After upgrading from older Calendar version
• After upgrading from older Craft version
• After a change to hosting configuration

Previous Calendar Version

No response

[kjmartens]

Hi @JayGreentree,

I sort of cheated and ran this one through ChatGPT. It suggests the following:

Your issue is not with the countdown logic itself, but how you calculate seconds_till at the start, and how you determine if the event is over.

Right now, you only check:

if (data.response.item.isLive) {
  return goLive();
} else {
  seconds_till = ((new Date(data.response.item.eventStartTime)) - (new Date())) / 1000;
  ...
}

The problem

After the event ends, data.response.item.isLive becomes false (which is correct).

But you're still counting from the next future start time or from the past start time, depending on how your API is giving eventStartTime.

So, if the event already finished but the date is still today, it assumes a new countdown (because eventStartTime is for today's event).

Solution

You need to get both eventStartTime and eventEndTime from your API.

Then, add this condition:

const now = new Date();
const eventStartTime = new Date(data.response.item.eventStartTime);
const eventEndTime = new Date(data.response.item.eventEndTime);

if (now > eventEndTime) {
  // Event is finished, hide countdown or show message
  $("#churchonline_counter").hide();
  return;
}

So, the full adjustment would be:

success: function(data) {
  var seconds_till;
  const now = new Date();
  const eventStartTime = new Date(data.response.item.eventStartTime);
  const eventEndTime = new Date(data.response.item.eventEndTime);

  if (data.response.item.isLive) {
    return goLive();
  } else if (now > eventEndTime) {
    $("#churchonline_counter").hide();
    return;
  } else {
    seconds_till = (eventStartTime - now) / 1000;
    ...
    // your existing countdown logic
  }
}

Can you see if this helps at all or at least gets you closer? 🙂

[jaysavage1983]

With help over on craft discord I did manage to fix the js side. However the calendar now seems to be the issue. testing my json data it isnt changing after the event ends https://jaygreentree.org/api/data.json is the working json
For context I have an even set for 6-8pm central time tomorrow

[kjmartens]

Sorry for the delay @JayGreentree.

I just want to check in... are you still experiencing issues with this? And if so, can you provide us with more information? 🙂

[jaysavage1983]

The javascript side is working but what I was trying to do is figure out how to load the next scheduled event after the previous one has ended. Currently it does not load the next even until 12am the following day.

For example each week I have Wednesdays from 6:00 pm - 8:00 pm and Fridays from 6:00 pm - 8:00 pm. At 8:00pm on Wednesday or shortly after it needs to load the Friday 6:00 pm - 8:00 pm. However it does not pick up Friday until 12am on Thursday.

[jaysavage1983]

Sorry for the delay @JayGreentree.

I just want to check in... are you still experiencing issues with this? And if so, can you provide us with more information? 🙂

I dont know if this helps or not:
I have tried both craft 4 and 5 with the same results. In craft 4 there is a plugin called Calendarize (not available on craft 5) and I tested it and that one works as intended. Calendarize is not a full calendar however so it doesn't have all the features of solspace/calendar

[jaysavage1983]

@kjmartens I did some more digging and it appears to be related to repeating events. if I set the event to not repeat it shows the countdown for the next event as expected.

[seandelaney]

@JayGreentree Can I see {% include 'isLive.twig' %} ?

[seandelaney]

@JayGreentree

I have setup the following event

Its now 16:19 so the event is live ATM. When I view the countdown template, I get 23:59:59.

In my data.json, I just set isLive to false as I don't have your include file isLive.twig.

Is this what you get?

Are you expecting to get 2 days, 1 hour, 38 minutes and X seconds ?

[jaysavage1983]

Its now 16:19 so the event is live ATM. When I view the countdown template, I get 23:59:59.

In my data.json, I just set isLive to false as I don't have your include file isLive.twig.

isLive.twig template uses a lightswitch from the nystudio107/craft-youtubeliveembed plugin

{% if craft.youtubelive.isLive() %}
true
{% else %}
false
{% endif %}

Is this what you get?

Yes I get 23:59:59. and then it resets back to that on page refresh until midnight. Once it hits midnight it then gets the next event. I did get some help with the js side so when the countdown hits zero I either get the "live now" link or "event has ended"

Are you expecting to get 2 days, 1 hour, 38 minutes and X seconds ?

Yes after the current event has ended.

[kjmartens]

Hi @JayGreentree,

Does your project have any sort of budget for premium support?
https://docs.solspace.com/support/premium/

What I can do is have our developer work through your code and correct the issue(s) for you. Let me know if that interests you or if you have any questions. 🙂

[jaysavage1983]

Hi @JayGreentree,

Does your project have any sort of budget for premium support? https://docs.solspace.com/support/premium/

What I can do is have our developer work through your code and correct the issue(s) for you. Let me know if that interests you or if you have any questions. 🙂

Unfortunately no since it is currently for my personal website. I was hoping to eventually use this for a church once I had it working properly.

[seandelaney]

@JayGreentree

Calendar handles repeating events correctly. So the issue is within your Twig and JS.

By default, when you query craft.calendar.events, it returns base events, not individual occurrences of repeating events. You want the next upcoming occurrence, not the base event. Looking at your Gist, you are using event.startDate and this is giving you the first occurrence's date, not the next upcoming event date.

{% set events = craft.calendar.events({
    id: 'not ' ~ currentEventId,
    rangeStart: 'today',
    rangeEnd: '1 month',
    limit: 10,
    orderBy: 'startDate asc',
    loadOccurrences: true
}) %}

...

{% for event in events %}
    {% set upcomingOccurrences = event.occurrences|filter(occurrence => occurrence.startDate > now) %}
    // Now use upcomingOccurrences info instead of the base event info.
{% endfor %}

Then in your JS, check for next upcoming event and compare the current time with each of the event times, and select the next upcoming event start date time in your countdown timer.