Crocoblock / suggestions

The suggestions for CrocoBlock project
195 stars 78 forks source link

Please Add an "Add to Calendar" Button/Link that Uses Dynamic Content #3501

Open jototheweb opened 3 years ago

jototheweb commented 3 years ago

Many users use JetEngine to create custom post types (CPTs) for events. What's missing is the ability to insert a link or button that would allow the user add these events to the user's Google, Outlook or Apple Calendar.

It would be wonderful if Crocoblock could add this functionality so that we can include an Add to Calendar link or button in our event listings built with JetEngine's CPTs.

It is possible to do this using PHP but requires advance coding and it would be so helpful to have this included in Crocoblock's suite of plugins.

Elementor currently has an option to add a link to Add to Calendar but it doesn't pull content dynamically. Dynamic.ooo also has the ability to create a Calendar Button/Add to Calendar Link but that would require setting up CPTs with ACF (and for those of us who love JetEngine and would prefer to just use JetEngine, we don't want to do).

WonderJay94 commented 2 years ago

I agree, this could be great. When you said it could be done with advanced PHP, by any chance do you have an idea of how to do it or where to look? I've been trying to do the "Add to Google Calendar" button using the Dynamic Link Widget and almost go it, if it wasn't for a date format issue I found. Jetengine handles dates in timestamp format and Google Calendar handles them in ISO8601...and I haven't managed to fix the format issue, that's is the only thing I'm missing so this feature could be a big help! BTW this are the query arguments of the dynamic link, if someone knows a way to fix the format it could be great help since support just said to open an issue in GitHub... text=%title% details=%current_meta|sesion-description% dates=%current_meta|sesion-hour-start%/%current_meta|sesion-hour-end%

afagard commented 3 months ago

I can help on this one.

I create a container template with an icon list widget and each item in the list (calendar provider) has the relevant social icon + title and for the link it has a shortcode dynamic tag with: [calendar_link_url service="google"], [calendar_link_url service="outlook"], etc.

This template is then used inside jetelements dropbar widget and is used either inside the single event pages or within the event listing grid listing.

Then in functions.php (or similar) I define the shortcode:

add_shortcode('calendar_link_url', function ($atts) {
    global $post;

    $atts = shortcode_atts(
        [
            'service' => 'google',
        ],
        $atts,
        'calendar_link_url'
    );

    if (!in_array($atts['service'], ['apple', 'google', 'outlook', 'outlookcom', 'office365', 'yahoo', 'stream'])) {
        return '';
    }

    $meta = get_post_meta($post->ID);

    if (empty($meta['start_date']) || empty($meta['end_date'])) {
        return '';
    }

    $location = '1 A Place, MA 01250';

    return sprintf('https://calndr.link/d/event/?service=%s&start=%s&end=%s&title=%s&timezone=%s&location=%s',
        $atts['service'],
        wp_date('Y-m-d H:i', $meta['start_date'][0]),
        wp_date('Y-m-d H:i', $meta['end_date'][0]),
        $post->post_title,
        get_option('timezone_string'),
        $location
    );

});

This code assumes you are using 2 datetime fields (start_date and end_date) as well as this so the datetime is outputted correctly for the timezone the site is in with the individual applications such as Google Calendar etc. using the site's timezone as a reference for local time calculations for the user if they are in a different TZ.

The code uses https://calndr.link/