Support

Home Forums Event Espresso Premium [EE4 Widget] To show a countdown to the next upcoming event

[EE4 Widget] To show a countdown to the next upcoming event

Posted: February 18, 2014 at 10:36 pm


Martin Adnum

February 18, 2014 at 10:36 pm

Hi,

I am currently using –
Wordpress Version: 3.8.1 in a dev environment;
Event Espresso Version: 4.1.3.reg;
โ€”

Is it possible show a Hours, Minutes, Seconds countdown to the next event? Even a hint as to how to edit the widget show just the most upcoming date/time to the event would be helpful (I don’t need a full javascript solution).

Also, It doesn’t seem to allow me to show the venue for the next event.

Any help is greatly appreciated ๐Ÿ™‚
Thanks.


Dean

February 19, 2014 at 3:30 am

Hi Martin,

One option would be a custom shortcode. i made this VERY basic example for someone recently, but it would need expanding on

function eecountdown($atts) {
	extract(shortcode_atts(array('event_id' => ''), $atts));
$event_id = "{$event_id}";

	global $wpdb, $espresso_manager, $current_user, $org_options;

	$sql = "SELECT * FROM " . EVENTS_DETAIL_TABLE . " WHERE id = '$event_id'";

	$event = $wpdb->get_row($sql);

//echo "<pre>" . print_r($event, 1) . "</pre>";
	$current_date = strtotime(date('Y-m-d'));
	$start_date = strtotime($event->start_date);

	$time_remaining = $start_date - $current_date;
	$time_remaining = floor($time_remaining/(60*60*24));

?>

<h2><?php echo $time_remaining; ?></h2>
<p>Days remaining until</p>
<p><?php echo $event->event_name; ?></p>
<p><?php echo apply_filters('filter_hook_espresso_display_featured_image', $event_id, !empty($event_meta['event_thumbnail_url']) ? $event_meta['event_thumbnail_url'] : '');?></p>

<p><?php echo espresso_format_content($event->event_desc); ?></p>
<p><a href="http://www.ee-3136.1.dev/event-registration/?ee=<?php echo $event_id;?>">Register Now</a>
<?php
}
add_shortcode('eecountdown','eecountdown');

If you wanted to merely expand the current widget, you could use some of the code above, along with this to add in the days/hours/minutes/seconds http://stackoverflow.com/questions/8273804/convert-seconds-into-days-hours-minutes-and-seconds

Something like

function eecountdown($atts) {
	extract(shortcode_atts(array('event_id' => ''), $atts));
$event_id = "{$event_id}";

	global $wpdb, $espresso_manager, $current_user, $org_options;

	$sql = "SELECT * FROM " . EVENTS_DETAIL_TABLE . " WHERE id = '$event_id'";

	$event = $wpdb->get_row($sql);

//echo "<pre>" . print_r($event, 1) . "</pre>";
	$current_date = strtotime(date('Y-m-d h:i:s'));
	$start_date = strtotime($event->start_date);

	$time_remaining = $start_date - $current_date;
	//$time_remaining = floor($time_remaining/(60*60*24));


	$secondsInAMinute = 60;
    $secondsInAnHour  = 60 * $secondsInAMinute;
    $secondsInADay    = 24 * $secondsInAnHour;

    // extract days
    $days = floor($time_remaining / $secondsInADay);

    // extract hours
    $hourSeconds = $time_remaining % $secondsInADay;
    $hours = floor($hourSeconds / $secondsInAnHour);

    // extract minutes
    $minuteSeconds = $hourSeconds % $secondsInAnHour;
    $minutes = floor($minuteSeconds / $secondsInAMinute);

    // extract the remaining seconds
    $remainingSeconds = $minuteSeconds % $secondsInAMinute;
    $seconds = ceil($remainingSeconds);



?>

<h2><?php //echo $time_remaining; ?></h2>

<h2><?php echo $days . ' - ' . $hours . ' - ' .  $minutes  . ' - ' . $seconds; ?></h2>


<p>Days remaining until</p>
<p><?php echo $event->event_name; ?></p>
<p><?php echo apply_filters('filter_hook_espresso_display_featured_image', $event_id, !empty($event_meta['event_thumbnail_url']) ? $event_meta['event_thumbnail_url'] : '');?></p>

<p><?php echo espresso_format_content($event->event_desc); ?></p>
<p><a href="http://www.ee-3136.1.dev/event-registration/?ee=<?php echo $event_id;?>">Register Now</a>
<?php
}
add_shortcode('eecountdown','eecountdown');

Obviously this is all just examples, if you are not well up on PHP etc then I would advise you to contact a web developer for assistance.


Martin Adnum

February 19, 2014 at 4:49 pm

Hi @dean,

Thanks for your reply! I have managed to get most of it working however the date that gets displayed is incorrect.

The Event is set for: 13/03/2014 8:00 am
However the widget is showing: 2014-03-12 21:00:00
Oddly enough the function – espresso_list_of_event_dates( $event->ID(), ‘D M jS, Y’, ‘@ g:i a’, FALSE ); Displays the correct date/time. I have also tried using the espresso_event_date_obj() to grab the proper date.

Here is the main part of code I”m using:

Edit: Code is posted below.

Thanks.


Martin Adnum

February 19, 2014 at 5:03 pm

I’m going to try pasting the code again haha.

Edit: code is posted below.


Martin Adnum

February 19, 2014 at 5:05 pm

[code language=”php”]
if ( ! empty( $events )) {
echo ‘<div class=”widget”>’;
foreach ( $events as $event ) {
if ( $event instanceof EE_Event && $post_id != $event->ID() ) {
$event_id = “{$event->ID()}”;

//printr( $event, ‘$event <br /><span style=”font-size:10px;font-weight:normal;”>’ . __FILE__ . ‘<br />line no: ‘ . __LINE__ . ‘</span>’, ‘auto’ );
echo ‘<div class=”book-now”>’;
if ( ! empty( $title )) {
echo $before_title . $title . $after_title;
}

// how big is the event name ?
$name_length = strlen( $event->name() );
switch( $name_length ) {
case $name_length > 70 :
$len_class = ‘three-line’;
break;
case $name_length > 35 :
$len_class = ‘two-line’;
break;
default :
$len_class = ‘one-line’;
}

$sql = “SELECT * FROM wp_esp_datetime WHERE EVT_ID = ‘$event_id'”;
$event_details = $wpdb->get_row($sql);

$current_date = strtotime(date(‘Y-m-d h:i:s’));
$start_date = strtotime($event_details->DTT_EVT_start);
$time_remaining = $start_date – $current_date;

$secondsInAMinute = 60;
$secondsInAnHour = 60 * $secondsInAMinute;
$secondsInADay = 24 * $secondsInAnHour;

// extract days
$days = floor($time_remaining / $secondsInADay);
// extract hours
$hourSeconds = $time_remaining % $secondsInADay;
$hours = floor($hourSeconds / $secondsInAnHour);
// extract minutes
$minuteSeconds = $hourSeconds % $secondsInAnHour;
$minutes = floor($minuteSeconds / $secondsInAMinute);
// extract the remaining seconds
$remainingSeconds = $minuteSeconds % $secondsInAMinute;
$seconds = ceil($remainingSeconds);

//echo ‘<div class=”time”>’ . $days . ‘:’ . $hours . ‘:’ . $minutes .'</div>’;
echo $event_details->DTT_EVT_start;
echo ‘<div class=”location”>’ . $event->name() . ‘</div>’;
[/code]


Sidney Harrell

February 20, 2014 at 9:03 am

Is that code working for you, or are you still looking for a solution? Are you guys talking about a widget or a shortcode? (just want to clear things up, thanks)


Martin Adnum

February 23, 2014 at 3:17 pm

@sidney I want this for the widget, so I’ve refactored the shortcode into the widget code. Its working, but the wrong date is being displayed.


Josh

  • Support Staff

February 24, 2014 at 11:20 am

Hi Martin,

Is there a reason why you’re not using:

echo espresso_list_of_event_dates( $event->ID(), 'D M jS, Y', '@ g:i a', FALSE );


Martin Adnum

February 24, 2014 at 9:00 pm

@josh Because in my previous tests, that function seems to display all dates, and in this case I only want to show 1 date to countdown to.


Dean

February 25, 2014 at 5:13 am

Hi,

I cant seem to figure out how you inserted that into the widget. Can you add the full widget code to pastebin or similar service) please?

Please don’t post the full code directly into the forum.


Martin Adnum

February 25, 2014 at 8:01 pm

Sure @dean: http://pastebin.com/MevkxSja


Dean

February 26, 2014 at 5:10 am

Hi,

Thanks for that.

The date is accurate on my system so I would check your WordPress settings to make sure the date/time is accurate there.

To change the date format use

<pre class=”brush: php; gutter: true; first-line: 1; highlight: []; html-script: false”>$wp_date = get_option('date_format');
echo date($wp_date . ' H:i', strtotime( $event_details->DTT_EVT_start) );


Martin Adnum

February 26, 2014 at 7:55 pm

Hi @dean,

So I checked the date/time, and it is correct. I have also used your code yet the time still shows:
The Event is set for: 13/03/2014 10:00 am
However the widget is showing: 12/03/2014 23:00

I even changed my timezone and the event time changed, but not the widget.
I changed the event time, and it affected both places.

Is it possible that the widget is in its own timezone?


Josh

  • Support Staff

February 27, 2014 at 6:16 am

Is there a plugin (or a function in the theme) that’s using date_default_timezone_set()? If so that may be causing the issue.

https://vip.wordpress.com/documentation/use-current_time-not-date_default_timezone_set/


Martin Adnum

February 27, 2014 at 3:29 pm

@josh I did a search over my code and it looks like only event-expresso is using the function. Do you still have my theme on hand?

Thanks.


Josh

  • Support Staff

February 27, 2014 at 3:53 pm

Event Espresso 4 does not use date_default_timezone_set()

The support post ‘[EE4 Widget] To show a countdown to the next upcoming event’ is closed to new replies.

Have a question about this support post? Create a new support post in our support forums and include a link to this existing support post so we can help you.

Event Espresso