How to add year-long ical feed to Month view

[Ajay Gilbert]

Following the post with the code to add a year-long ical feed at https://theeventscalendar.com/support/forums/topic/can-i-create-a-ical-feed-sync/#post-1024051 I would like to add the ical feed http://example.com/events/?ical=1&year-feed at the base of the month calendar display as an export to ics instead of “+ EXPORT MONTH’S EVENTS” but also to Google Calendar like the single events option. How is this possible?

[Ajay Gilbert]

I see now that there are other Gists to help with this:
See https://gist.github.com/cliffordp/b0e5ece86040d9838f09 to customize text of iCal Event Export button text
See https://gist.github.com/cliffordp/0add8931e1c6422a7b4c to override the iCal link to always be this link

However the latter tells me that it technically works but /wp-content/plugins/the-events-calendar/src/resources/js/tribe-events.min.js?ver=4.0.5 overwrites it!

So my question stands 🙂

[Nico]

Hi Ajay,

Thanks for reaching out to us and also for doing some research before posting 🙂

You raise an interesting point about the JS override of the link, we are not doing a great job there! But I guess there’s a simpler way around this.

The snippet below just targets the ical export query for month view and modify the parameters, so there’s no need to change the link 🙂


/**
* Change month ical export time range to a year
*/
add_action( 'pre_get_posts', 'tribe_custom_month_time_range_ics_export' );
function tribe_custom_month_time_range_ics_export( WP_Query $query ) {
if ( ! isset( $_GET['ical'] ) || ! isset( $_GET['tribe_display'] ) || $_GET['tribe_display'] != 'month' ) {
return;
}

$query->set( 'eventDisplay' , 'custom' );
$query->set( 'start_date' , 'now' );
$query->set( 'end_date' , '+ 365 days' );
$query->set( 'posts_per_page', -1 );
}


This should make all month export buttons the same basically, and export all year events.

Please give it a try and let me know if this answers your question or if I’m missing something there,
Best,
Nico

[Ajay Gilbert]

Thanks for that chunk of code. However the link still says http://example.com/events/?ical=1&tribe_display=month which is a little confusing 🙁

What would be perfect would be able to have an Add to Google Calendar button like the single event has – to easily add the year calendar to Google Calendar.

Is it possible for me to add code to below the tribe events footer section to implement this?

[Nico]

Hey Ajay,

Thanks for following up!

However the link still says http://example.com/events/?ical=1&tribe_display=month which is a little confusing 🙁

We can look into changing that, I would need to look into it because as you mentioned before there’s some js changing the link after it’s displayed. But I guess we might be able to find a -hope not so hacky- workaround.

What would be perfect would be able to have an Add to Google Calendar button like the single event has – to easily add the year calendar to Google Calendar.

Unfortunately I don’t think that’s possible at all. I did a search because I wasn’t sure about it, but could only find the option to import one event directly to G Cal. If you find an example of how to do this I would like to take a look and see if we can integrate it!

Best,
Nico

[Ajay Gilbert]

It’s be cool if you could change the link to say it is a year feed but it would be even better if it was prettified with some format like http://www.expample.com/events/ical/year

I’ve discovered working on previous websites that to add an iCal feed to Google Calendar all you need to do is add http://www.google.com/calendar/render?cid= before the iCal link so for the example we are using it would become http://www.google.com/calendar/render?cid=http://example.com/events/?ical=1&tribe_display=month

See http://dev.bowdenweb.com/os/calendar/google-calendar.html for reference

[Nico]

Thanks for the follow-up Ajay! Interest to know how to import a feed into G Cal, thanks for the info 🙂

Well I changed the approach a bit, take a look at the following code:


/**
* Change month ical export time range to a year when the query var year is present
*/
add_action( 'pre_get_posts', 'tribe_custom_month_time_range_ics_export' );
function tribe_custom_month_time_range_ics_export( WP_Query $query ) {
if ( ! isset( $_GET['ical'] ) || ! isset( $_GET['year-feed'] ) || ! isset( $_GET['tribe_display'] ) || $_GET['tribe_display'] != 'month' ) {
return;
}

$query->set( 'eventDisplay' , 'custom' );
$query->set( 'start_date' , 'now' );
$query->set( 'end_date' , '+ 365 days' );
$query->set( 'posts_per_page', -1 );
}

/**
* Replace default export options
*/
if ( class_exists(Tribe__Events__iCal) ) {
// remove default export button
remove_filter( 'tribe_events_after_footer', array( 'Tribe__Events__iCal', 'maybe_add_link' ), 10 );
// add customized export options
add_filter( 'tribe_events_after_footer', 'custom_maybe_add_link' );
}

function custom_maybe_add_link() {
global $wp_query;
$show_ical = apply_filters( 'tribe_events_list_show_ical_link', true );

if ( ! $show_ical ) {
return;
}
if ( tribe_is_month() && ! tribe_events_month_has_events() ) {
return;
}
if ( is_single() || ! have_posts() ) {
return;
}

$tec = Tribe__Events__Main::instance();

$view = $tec->displaying;
if ( defined( 'DOING_AJAX' ) && DOING_AJAX && isset( $wp_query->query_vars['eventDisplay'] ) ) {
$view = $wp_query->query_vars['eventDisplay'];
}

echo '+ Export all year events';
echo '+ Add all year events to Google Calendar';
}


Please note I’m intentionally removing the tribe-events-ical class from the links in order for the URL to be skipper by the JS link filter. This will have a little effect on the element styling you can surely solve with some CSS.

To give the feed a custom URL is something you can achieve by adding a 301 redirect to the site or by creating the rewrite rules for it. I guess that would be a bit out of scope as the default options doesn’t have such permalink either.

Please give the code a try and let me know about it,
Best,
Nico

[Ajay Gilbert]

Thanks for the code. There was a small typo and I’ve added the css to make it look pretty. However it only shows the calendar up until the 4 June although from 25 April.

The feed doesn’t seem to take any notice of the year-feed argument.

/**
* Change month ical export time range to a year when the query var year is present
*/
add_action( 'pre_get_posts', 'tribe_custom_month_time_range_ics_export' );
function tribe_custom_month_time_range_ics_export( WP_Query $query ) {
    if ( ! isset( $_GET['ical'] ) ||  ! isset( $_GET['year-feed'] ) || ! isset( $_GET['tribe_display'] ) || $_GET['tribe_display'] != 'month' ) {
        return;
    }
 
    $query->set( 'eventDisplay'  , 'custom' );
    $query->set( 'start_date'    , 'now' );
    $query->set( 'end_date'      , '+ 365 days' );
    $query->set( 'posts_per_page', -1 );
}
 
/**
* Replace default export options
*/
if ( class_exists(Tribe__Events__iCal) ) {
    // remove default export button
    remove_filter( 'tribe_events_after_footer', array( 'Tribe__Events__iCal', 'maybe_add_link' ), 10 );
    // add customized export options
    add_filter( 'tribe_events_after_footer', 'custom_maybe_add_link' );
}
 
function custom_maybe_add_link() {
    global $wp_query;
    $show_ical = apply_filters( 'tribe_events_list_show_ical_link', true );
 
    if ( ! $show_ical ) {
        return;
    }
    if ( tribe_is_month() && ! tribe_events_month_has_events() ) {
        return;
    }
    if ( is_single() || ! have_posts() ) {
        return;
    }
 
    $tec = Tribe__Events__Main::instance();
 
    $view = $tec->displaying;
    if ( defined( 'DOING_AJAX' ) && DOING_AJAX && isset( $wp_query->query_vars['eventDisplay'] ) ) {
        $view = $wp_query->query_vars['eventDisplay'];
    }
 
    echo '<a style="float:right;" class="tribe-events-button" title="Export to iCal" href="' . esc_url( site_url('whats-on/?ical=1&year-feed') ) . '">+ Export to iCal</a><br />';
    echo '<a style="float:right;" class="tribe-events-button" title="Add to Google Calendar" href="//www.google.com/calendar/render?cid=' . esc_url( site_url('whats-on/?ical=1&year-feed')  ) . '">+ Add to Google Calendar</a>';
}

[Nico]

Thanks for following up Ajay!

Can you link mt to the site where I can see this ?

Also, you are using whats-on slug, I guess it’s the configured slug for events. Can you change the feed URL in the buttons to site_url('whats-on/?ical=1&year-feed=1'). I tested this locally and it was working like a charm so not sure what’s up!

Also can you confirm that modified buttons/links are showing up instead of the default ones?

Thanks,
Nico

[Ajay Gilbert]

This reply is private.

[Nico]

This reply is private.

[Ajay Gilbert]

Tried the new code you sent privately which I tweaked to make the links look prettier and it appears to work now – although the Google Calendar seems to have cached the old version so it’s only a month long, but the .ics file shows everything up to a year ahead now. Thanks.

/**
* Change month ical export time range to a year when the query var year is present
*/
add_action( 'pre_get_posts', 'tribe_custom_month_time_range_ics_export' );
function tribe_custom_month_time_range_ics_export( WP_Query $query ) {
    if ( ! isset( $_GET['ical'] ) ||  ! isset( $_GET['year-feed'] ) ) {
        return;
    }
  
    $query->set( 'eventDisplay'  , 'custom' );
    $query->set( 'start_date'    , 'now' );
    $query->set( 'end_date'      , '+ 365 days' );
    $query->set( 'posts_per_page', -1 );
}
  
/**
* Replace default export options
*/
if ( class_exists(Tribe__Events__iCal) ) {
    // remove default export button
    remove_filter( 'tribe_events_after_footer', array( 'Tribe__Events__iCal', 'maybe_add_link' ), 10 );
    // add customized export options
    add_filter( 'tribe_events_after_footer', 'custom_maybe_add_link' );
}
  
function custom_maybe_add_link() {
    global $wp_query;
    $show_ical = apply_filters( 'tribe_events_list_show_ical_link', true );
  
    if ( ! $show_ical ) {
        return;
    }
    if ( tribe_is_month() && ! tribe_events_month_has_events() ) {
        return;
    }
    if ( is_single() || ! have_posts() ) {
        return;
    }
  
    $tec = Tribe__Events__Main::instance();
  
    $view = $tec->displaying;
    if ( defined( 'DOING_AJAX' ) && DOING_AJAX && isset( $wp_query->query_vars['eventDisplay'] ) ) {
        $view = $wp_query->query_vars['eventDisplay'];
    }
  
    echo '<a style="float:right;" class="tribe-events-button" title="Export to iCal" href="' . esc_url( site_url('whats-on/?ical=1&year-feed=1') ) . '">+ Export to iCal</a><br />';
    echo '<a style="float:right;" class="tribe-events-button" title="Add to Google Calendar" href="//www.google.com/calendar/render?cid=' . esc_url( site_url('whats-on/?ical=1&year-feed=1')  ) . '" target="_blank">+ Add to Google Calendar</a>';
}

[Nico]

Glad to hear this is working now! Thanks for sharing the final code Ajay 🙂

I’ll go ahead and close out this thread, but if you need help with anything else please don’t hesitate to create a new one and we will be happy to assist you.

Best,
Nico

[Author]

Posts