Add to Calendar Button

[Kevin]

Hello!

We’ve been using Event Calendar Pro for a while now and it’s been working great. However, we’ve had a number of people ask if we can add an ‘Add to Calendar’ or ‘Add to My Calendar’ button to our events, to add events to people’s Apple iCal, Yahoo Calendar, etc.

Here’s a site that has a button like that: http://ccm.uc.edu/boxoffice/calendar.html#/?i=1

How would I go about adding a button like this to Events Calendar Pro or with a certain add on?

Thanks!

[Courtney]

Hi Kevin

I took at peak at http://cincinnaticathedral.com/event/social-advocacy-sundays-10/2017-09-10/ and noticed you are missing the add to calendar options that we support (Google & iCal). When you visit our demo site: http://wpshindig.com/event/writespeakcode-work-night/2017-08-31/, you should see how this is normally displayed.

Can you start by going through our Testing for Conflicts Guide https://theeventscalendar.com/knowledgebase/testing-for-conflicts/?  I am wondering if you might have a plugin or theme conflict.  Begin by deactivating all other plugins, using a theme such as Twenty Seventeen https://wordpress.org/themes/twentyseventeen/, and see if the issue still persists. Also, double check for any other updates available (Dashboard » Updates). 

Please let me know if the issue still persists after these tests.

Thanks
Courtney 🙂

[Kevin]

Thanks so much for the prompt reply and for the link to the demo site!

I went ahead and updated all plugins related to Events Calendar Pro, disabled all the rest of the website’s plugins/viewed our website on the default 2017 WordPress theme, and it looks like I’m still not seeing the Google Calendar and ICal button on our calendar. Are these buttons an option I have to enable or disable somewhere within the Events Calendar Pro plugin itself? Or perhaps I have to add these buttons manually?

[Courtney]

Hi Kevin

It’s unlikely you’ve added this code anywhere, but here are our steps for removing those export buttons: https://theeventscalendar.com/knowledgebase/remove-ical-and-google-calendar-links-from-single-event-view/

Do you have any other customizations in place on your site related to our plugins? I wonder if something in there might be hiding it.

Thanks
Courtney 🙂

[Kevin]

Thanks so much for the help! I was able to get those buttons to appear on our calendar now, but now I’m having some trouble with having the ‘Export Events’ button calendar above the monthly calendar view.

Is there a way to make that button appear above the calendar? I tried following this guide: https://theeventscalendar.com/support/forums/topic/moving-the-export-events-button/ but it’s not working. (This is appearing above the calendar where that button should be instead:
<div class=”tribe-events-cal-links”>+ Export Month’s Events</div> <!– .tribe-events-cal-links –> )

Thanks again for all your help before; after we get this button repositioned we’ll be good to go!

[Courtney]

Hi Kevin

Can you try this code for the top placement?

/*
* The Events Calendar -  Add iCal Link Above Month View
* @ Version 3.9.3
*/
add_action('tribe_events_before_header', 'ecp_add_month_ical');
function ecp_add_month_ical() {
 if ( tribe_is_month() ) {
     echo '
    <div class="tribe-events-cal-links">';
    echo '+ Export Month\'s Events';
    echo '</div>
    <!-- .tribe-events-cal-links -->';
 }
}

I believe the code editor on our forum boards may have been at fault with otherwise working code.

Let me know if this moves the export option to the top for you.

Thanks
Courtney 🙂

[Kevin]

Thanks for looking at this so prompt! I went ahead and put that code in place, but it looks it’s still not working. I have it in place if you want to take a look and see what the error looks like:
http://cincinnaticathedral.com/?post_type=tribe_events

Just let me know what I’m doing wrong!

[Courtney]

Hi Kevin

We’re certainly closer. It looks like you need to still add the 2nd code to remove the lower export button from https://theeventscalendar.com/support/forums/topic/moving-the-export-events-button/.

To style the top export button, you’ll want to edit your CSS a bit. Please check out this Customizing WordPress #2 – Using Chrome Developers Tools YouTube video in addition to our Using Chrome Developer Tools tutorial on how to easily make changes using CSS. Add any changes to your code to your child theme, or in Appearance » Customize » Additional CSS?

To be absolutely sure your top button actually clicks, I’m including the code a 2nd time. I’ve tested this on my own site and it works there. On your site, it isn’t an active link.

/*
* The Events Calendar -  Add iCal Link Above Month View
* @ Version 3.9.3
*/
add_action('tribe_events_before_header', 'ecp_add_month_ical');
function ecp_add_month_ical() {
 if ( tribe_is_month() ) {
     echo '
    <div class="tribe-events-cal-links">';
    echo '<a title="' . $title . '" href="' . esc_url( tribe_get_ical_link() ) . '">+ Export Month\'s Events</a>';
    echo '</div>
    <!-- .tribe-events-cal-links -->';
 }
}

Can you copy/paste that in place again and see if the link works?

Thanks
Courtney 🙂

[Kevin]

Thank you so much Courtney! I put that code in place and it’s now showing at the top of the calendar properly, with some added CSS in place now as well.

The only thing I can’t get to work properly is the functions.php code to remove the bottom calendar button. Could you help me clarify that issue and then we’ll be all good to go? The code here isn’t working properly on my end: https://theeventscalendar.com/support/forums/topic/moving-the-export-events-button/

[Courtney]

Hi Kevin

Can you try this:

/**
 * Move the export events link to before the calendar page
 */
function tribe_move_calendar_export_link() {
	if ( function_exists( 'tribe' ) ) {
		remove_action( 'tribe_events_after_footer', array( tribe( 'tec.iCal' ), 'maybe_add_link' ) );
		add_action( 'tribe_events_before_header', array( tribe( 'tec.iCal' ), 'maybe_add_link' ), 11, 1 );
	}
}
add_action( 'init', 'tribe_move_calendar_export_link' );

Let me know if that works for you!

Thanks
Courtney 🙂

[Kevin]

Thanks so much Courtney! I put that in place and removed the previous functions php code and that buttons now above the calendar. We’re super close to having this all wrapped up!:

I’m trying to get that button to align on the left hand side, but when I try to float it left with CSS, it’s affecting the Google and iCal export buttons on the event pages. Is there a way to get this Monthly export button on the left hand side, similar to the way the Google and iCal event buttons are on the left hand side?

Thanks again for your help so far; if you could please just let me know how I can align that properly and we’ll be good to go!

[Courtney]

Hey Kevin

Can you add the following code to your child theme, or in Appearance » Customize » Additional CSS?

.tribe-events-month .tribe-events-ical.tribe-events-button {
    float: left;
}

Thanks
Courtney 🙂

[Support Droid]

Hey there! This thread has been pretty quiet for the last three weeks, so we’re going to go ahead and close it to avoid confusion with other topics. If you’re still looking for help with this, please do open a new thread, reference this one and we’d be more than happy to continue the conversation over there.

Thanks so much!
The Events Calendar Support Team

[Author]

Posts