Stachethemes Event Calendar

Contents

1. Action and Filter Hook Reference

2. Map View: Changing the event color box to Google Maps default pin

3. How to use Custom Icons?

4. Displaying Stachethemes Event Calendar version 5 on the Front-End

5. Shortcodes

6. Set up Weather Forecast for Stachethemes Event Calendar version 5

7. Using iCalendar RRULE Repeater Options (BETA)

8. Creating Tickets for Booking

9. Broken Font-Awesome Icons

10. How to display the Box Grid view

11. Creating Event Coming Soon Page

12. Does this have ical or google cal auto sync features?

13. How to add Event Organizer Information?

14. Changing Filter Icon to Text

15. Layout is broken, what to do?

16. Creating Calendar

17. Changing the Single Event Page URL from stec_event/ to event/

18. Activation

19. How to Embed Events

20. How to Open Event in External URL

21. Adding products with WooCommerce

22. Installation

23. Obtaining Captcha API Key

24. Creating Events

25. How to show Event Date instead of Icon

26. Displaying Different Views for Desktop and Mobile Devices

27. How to add new Icon from Font Awesome Library

28. Obtaining Disqus Shortname

29. Updating

30. How to add Image instead of Icon

31. Creating Custom Tabs

32. Using Theme Feature

33. Adding custom fields to the RSVP form code example

34. Extending event preview

35. Stachethemes Event Calendar 5 Dynamic Date Values

36. Stachethemes Event Calendar 5 Custom RSVP Input Fields hook example:

37. Set up Google Captcha Enterprise for Stachethemes Event Calendar version 5

38. Translating Stachethemes Event Calendar version 5

39. Translating the event template (Version 5)

40. Stachethemes Event Calendar 5 Shortcodes List

41. Missing Font Awesome Icons

42. Removing the event countdown element using the Builder (v5)

43. How to Add Event Images to Yoast SEO in Stachethemes Event Calendar Version 5

44. Version 5 Permission Settings

45. Activating Stachethemes Event Calendar version 5

46. Stachethemes Event Calendar version 5 Shortcode Parameters

47. Missing Colors and/or Undetected Shortcodes

1. Action and Filter Hook Reference

Action and Filter Hooks for version 3.x!

PHP Hooks

Hook Type File
stec_insert_postFilter\assets\php\abstract.post.php
stec_api_query_cache_timeFilter\assets\php\api\class.controller.php
stec_ac_exclude_jsFilter\assets\php\class.ac.php
stec_ac_exclude_cssFilter\assets\php\class.ac.php
stec_builder_front_elementsFilter\assets\php\class.builder-elements.php
stec_get_calendarsFilter\assets\php\class.calendars.php
stec_insert_postFilter\assets\php\class.calendars.php
stec_user_can_write_calendarFilter\assets\php\class.calendars.php
stec_user_can_edit_calendarFilter\assets\php\class.calendars.php
stec_get_writable_calendar_listFilter\assets\php\class.calendars.php
stec_admin_get_cron_jobsFilter\assets\php\class.cron.php
stec_csv_event_fields_assocFilter\assets\php\class.csv-settings.php
stec_get_admin_events_countFilter\assets\php\class.events.php
stec_get_admin_events_paramsFilter\assets\php\class.events.php
stec_get_admin_eventsFilter\assets\php\class.events.php
stec_front_get_eventsFilter\assets\php\class.events.php
stec_get_events_paramsFilter\assets\php\class.events.php
stec_get_eventsFilter\assets\php\class.events.php
stec_insert_postFilter\assets\php\class.events.php
stec_user_can_view_eventFilter\assets\php\class.events.php
stec_user_can_edit_eventFilter\assets\php\class.events.php
stec_get_custom_relatedFilter\assets\php\class.events.php
stec_csv_export_fieldsFilter\assets\php\class.export-csv.php
stec_csv_export_schedule_fieldsFilter\assets\php\class.export-csv.php
stec_csv_export_guests_fieldsFilter\assets\php\class.export-csv.php
stec_csv_export_organizers_fieldsFilter\assets\php\class.export-csv.php
stec_csv_export_attendance_fieldsFilter\assets\php\class.export-csv.php
stec_csv_export_booking_fieldsFilter\assets\php\class.export-csv.php
stec_csv_export_shop_fieldsFilter\assets\php\class.export-csv.php
stec_csv_export_proccess_event_custom_fieldsFilter\assets\php\class.export-csv.php
stec_csv_export_proccess_schedule_custom_fieldsFilter\assets\php\class.export-csv.php
stec_csv_export_proccess_guests_custom_fieldsFilter\assets\php\class.export-csv.php
stec_csv_export_proccess_organizers_custom_fieldsFilter\assets\php\class.export-csv.php
stec_csv_export_proccess_attendance_custom_fieldsFilter\assets\php\class.export-csv.php
stec_csv_export_proccess_booking_custom_fieldsFilter\assets\php\class.export-csv.php
stec_csv_export_proccess_shop_custom_fieldsFilter\assets\php\class.export-csv.php
stec_socialFilter\assets\php\class.helper.php
stec_iconsFilter\assets\php\class.helper.php
stec_calendar_writable_listFilter\assets\php\class.helper.php
stec_calendar_visibility_listFilter\assets\php\class.helper.php
stec_event_visibility_listFilter\assets\php\class.helper.php
stec_get_user_roles_listFilter\assets\php\class.helper.php
stec_get_event_ogFilter\assets\php\class.helper.php
stec_esc_raw_before_returnFilter\assets\php\class.helper.php
stec_esc_noscript_before_returnFilter\assets\php\class.helper.php
stec_before_import_eventFilter\assets\php\class.import.php
stec_before_import_eventFilter\assets\php\class.import.php
stec_mail_add_special_wordsFilter\assets\php\class.mail.php
stec_send_event_changed_mailFilter\assets\php\class.mail.php
stec_send_event_rejected_mailFilter\assets\php\class.mail.php
stec_send_event_invitations_mailFilter\assets\php\class.mail.php
stec_send_event_approved_mailFilter\assets\php\class.mail.php
stec_send_event_submitted_admin_mailFilter\assets\php\class.mail.php
stec_send_event_submitted_owner_mailFilter\assets\php\class.mail.php
stec_send_event_remind_mailFilter\assets\php\class.mail.php
stec_send_gdpr_request_confirmationFilter\assets\php\class.mail.php
stec_send_mail_confirmedFilter\assets\php\class.mail.php
stec_send_event_rsvp_acceptedFilter\assets\php\class.mail.php
stec_send_event_cancelled_mailFilter\assets\php\class.mail.php
stec_send_event_author_new_attendeeFilter\assets\php\class.mail.php
stec_ticket_qr_code_urlFilter\assets\php\class.wc.booking.php
stec_rsvp_to_event_before_addFilter\assets\php\inc\inc.admin-ajax-public-task-handler.php
stec_add_event_single_tab_excludeFilter\assets\php\inc\inc.tabs.php
stec_event_tabsFilter\assets\php\inc\inc.tabs.php
stec_attendee_get_avatarFilter\assets\php\o.event-meta-attendee.php
stec_get_descriptionFilter\assets\php\o.event.php
stec_event_get_front_dataFilter\assets\php\o.event.php
stachethemes_ec_attsFilter\shortcodes\stachethemes_ec.php
stec_permissionFilter\stachethemes_event_calendar.php
stec_admin_events_per_pageFilter\view\admin\events\index.php
stec_order_details_itemsFilter\view\front\pages\order-details.php
stec_organizer_page_shortcodeFilter\view\front\pages\organizer.php
stec_api_add_routeAction\assets\php\api\class.routes.php
stec_add_rewrite_rulesAction\assets\php\class.debug-tools.php
stec_after_book_item_order_completedAction\assets\php\class.wc.booking.php
stec_after_book_order_completedAction\assets\php\class.wc.booking.php
stec_add_rewrite_rulesAction\assets\php\inc\inc.admin-ajax-task-handler.php
stec_add_admin_menuAction\assets\php\inc\inc.admin-menu.php
stec_add_admin_menu_assetsAction\assets\php\inc\inc.admin-menu.php
stec_register_custom_postAction\assets\php\inc\inc.custom-posts.php
stec_register_custom_stateAction\assets\php\inc\inc.custom-states.php
stec_load_calendar_scriptsAction\assets\php\inc\inc.page-templates.php
stec_organizer_page_wp_headAction\assets\php\inc\inc.page-templates.php
stec_organizer_page_wp_footerAction\assets\php\inc\inc.page-templates.php
stec_load_builder_scriptsAction\assets\php\inc\inc.posts-templates.php
stec_single_edit_wp_headAction\assets\php\inc\inc.posts-templates.php
stec_single_edit_wp_footerAction\assets\php\inc\inc.posts-templates.php
stec_single_wp_headAction\assets\php\inc\inc.posts-templates.php
stec_single_wp_footerAction\assets\php\inc\inc.posts-templates.php
stec_register_taxonomyAction\assets\php\inc\inc.taxonomies.php
stec_before_htmlAction\shortcodes\stachethemes_ec.php
stec_after_htmlAction\shortcodes\stachethemes_ec.php
stec_load_calendar_scriptsAction\shortcodes\stachethemes_ec.php
stec_builder_form_before_htmlAction\shortcodes\stec_builder.php
stec_builder_form_after_htmlAction\shortcodes\stec_builder.php
stec_load_builder_scriptsAction\shortcodes\stec_builder.php
stec_add_rewrite_rulesAction\stachethemes_event_calendar.php
stec_admin_addedit_event_tabAction\view\admin\events\addedit.php
stec_admin_addedit_event_tab_contentAction\view\admin\events\addedit.php
stec_builder_edit_event_before_contentAction\view\front\edit.php
stec_builder_edit_event_after_contentAction\view\front\edit.php
stec_add_event_tabAction\view\front\layout.event.inner.inc.php
stec_add_event_tab_contentAction\view\front\layout.event.inner.inc.php
stec_order_details_before_account_detailsAction\view\front\pages\order-details.php
stec_order_details_after_item_detailsAction\view\front\pages\order-details.php
stec_order_details_after_itemsAction\view\front\pages\order-details.php
stec_order_details_after_order_totalAction\view\front\pages\order-details.php
stec_organizer_page_before_contentAction\view\front\pages\organizer.php
stec_organizer_page_is_emptyAction\view\front\pages\organizer.php
stec_organizer_page_after_contentAction\view\front\pages\organizer.php
stec_single_before_contentAction\view\front\pages\single.php
stec_add_event_single_tabAction\view\front\pages\single.php
stec_add_event_single_tab_contentAction\view\front\pages\single.php
stec_single_show_relatedAction\view\front\pages\single.php
stec_single_after_contentAction\view\front\pages\single.php

Javascript Hooks

Hook Type File
filterTooltipHtmlstec_extend\assets\js\front\adds\tooltip.js
beforeProcessEventsstec_extend\assets\js\front\caldata.js
onAddToEventsPoolstec_extend\assets\js\front\caldata.js
beforeProccessGetEventsstec_extend\assets\js\front\caldata.js
beforeReturnGetEventsstec_extend\assets\js\front\caldata.js
beforeProccessGetEventsstec_extend\assets\js\front\caldata.js
onEventHolderClosestec_extend\assets\js\front\stec.js
onEventHolderOpenstec_extend\assets\js\front\stec.js
onLayoutSetstec_extend\assets\js\front\stec.js
stecOnAdminAddAttendeetrigger\assets\js\admin\main.js
onBeforeEventWeatherDataAjaxtrigger\assets\js\front\adds\forecast.js
stecOnRsvpAfterFieldstrigger\assets\js\front\rsvp.js
onEventToggleOpentrigger\assets\js\front\stec.js
stecBeforeReturnEventPreviewHtmltrigger\assets\js\front\stec.js
stecMapMarkerIcontrigger\assets\js\front\stec.js

2. Map View: Changing the event color box to Google Maps default pin

Open your theme functions.php and at the bottom paste this code:

add_action('wp_footer', function() {
    global $post;
    if (!is_a($post, 'WP_Post') || !has_shortcode($post->post_content, 'stachethemes_ec')) {
        return;
    }
    ?>
    <script type="text/javascript">
        (function ($) {
            $(function () {
                if (typeof $.stecExtend === 'undefined') {
                    return;
                }
                $.stecExtend(function (m) {
                    m.$instance.on('stecMapMarkerIcon', function (e, data) {
                        data.temp.stecMapMarkerIcon = '';
                    });
                });
            });
        })(window.jQuery);
    </script>
    <?php
});


3. How to use Custom Icons?

With Update 2.4 you can upload custom images instead of Font Awesome icons. You can create transparent PNG images with your icons and upload them by using Image option in the Event Symbol Type menu. 



We suggest for best result to use images with dimensions 500x500px. You can watch demonstration video here:



4. Displaying Stachethemes Event Calendar version 5 on the Front-End

Variant 1: Using the [stec] Shortcode

  1. Log in to your WordPress admin area.
  2. Go to "Pages" in the admin dashboard.
  3. Edit the page where you want to display the calendar.
  4. Add a block that supports shortcodes.
  5. Insert the [stec] shortcode into the block.
  6. Save your changes and view the page on the front-end.

Variant 2: Using Gutenberg Block or Elementor Widget

  1. Log in to your WordPress admin area.
  2. Go to "Pages" in the admin dashboard.
  3. Edit the page where you want to display the calendar.
  4. If using Gutenberg:
    • Add a new block.
    • Look for the "Stachethemes" section and select the "Full Calendar" block.
  5. If using Elementor:
    • Add a new section to your page.
    • Search for the "Full Calendar" widget under "Stachethemes" and add it to the section.
  6. Customize the calendar settings as needed.
  7. Save your changes and view the page on the front-end.

Choose the variant that best suits your needs - either the [stec] shortcode or the Gutenberg block/Elementor widget method.

Next: Shortcode Parameters


5. Shortcodes

THIS ARTICLE IS FOR STACHETHEMES EVENT CALENDAR VERSION 3.x !

Default shortcode:

[stachethemes_ec]


Shortcode attributes:


cal - Show events from specific calendar(s) only:

[stachethemes_ec cal=1,2,3]

 where 1,2,3 are calendar ids


filter_location - Show events with this location only

[stachethemes_ec filter_location="London, UK"]


organizer_id - Show events from this organizer

[stachethemes_ec organizer_id=10]

where 10 is for example the organizer id number


cat - Show events from specific category or categories only:

[stachethemes_ec cat=1,2,3]


upcoming_only=1 - Show upcoming events only

[stachethemes_ec upcoming_only=1]


expired_only=1 - Show expired events only

[stachethemes_ec expired_only=1]


min_date - Minimum date range

max_date - Maximum date range

start_date - Initial calendar date

values: today, prev_week, this_week, next_week, prev_month, this_month, next_month or YYYY-MM-DD date

[stachethemes_ec min_date=2022-01-01 max_date=2022-12-31]
[stachethemes_ec min_date=prev_week max_date=next_week start_date=this_week] 
[stachethemes_ec min_date=prev_month max_date=next_month start_date=this_month]
[stachethemes_ec min_date=today]

map_date_start , map_date_end - Force map view to display events in given range

[stachethemes_ec map_date_start=2022-01-01 map_date_end=2022-12-31]


gmap_theme - Google maps theme

values: silver, aubergine, retro, night, dark

[stachethemes_ec gmap_theme=silver]


show_create_event_form - Show/Hide submit an event form

values: 1/0 (on / off)

[stachethemes_ec show_create_event_form=0]
[stachethemes_ec show_create_event_form=1]


show_calfilter - Show top menu filter

values - 0 (off), 1 (togglable), 2 (always visible)

[stachethemes_ec show_calfilter=0]
[stachethemes_ec show_calfilter=1]
[stachethemes_ec show_calfilter=2]

view - Initial calendar layout 

values: agenda, month, week, day, grid, boxgrid, map

[stachethemes_ec view=month]


views - Include only following calendar views 

values: agenda, month, week, day, grid, boxgrid, map

[stachethemesc_ec views=month,day,week]
[stachethemesc_ec views=month]
[stachethemesc_ec views=grid,map]
...

show_top - Show/Hide calendar top menu

values: 1/0 (on /off)

[stachethemes_ec show_top=0]
[stachethemes_ec show_top=1]

show_views - Show/Hide top menu views buttons (layout buttons)

values: 1/0 (on /off)

[stachethemes_ec show_views=0]


agenda_list_display - show/hide agenda list 

values: 1/0 (on / off)

[stachethemes_ec agenda_list_display=0]


agenda_cal_display - show/hide agenda calendar slider from agenda view. 

values: 1/0 (on / off)

[stachethemes_ec agenda_cal_display=0]
[stachethemes_ec agenda_cal_display=1]


reverse_agenda_list - Reverse agenda list order

[stachethemes_ec reverse_agenda_list=1]


future_months_ahead - How far to look for upcoming events.

value is in months

[stachethemes_ec future_months_ahead=60]

e.g. 60 for 5 years ahead


agenda_get_n - number of events to show in agenda view per "look for more" click. 

[stachethemes_ec agenda_get_n=5]


grid_per_click - number of events to show in grid view per "look for more" click.

[stachethemes_ec grid_per_click=5]


boxgrid_per_click - number of events to show in box grid view per "look for more" click.

[stachethemes_ec boxgrid_per_click=5]


agenda_lfm - display "Look for more" button in the agenda view

values: 1/0

[stachethemes_ec agenda_lfm=1]


grid_lfm - display "Look for more" button in the grid view

values: 1/0

[stachethemes_ec grid_lfm=1]


boxgrid_lfm - display "Look for more" button in the box grid view

values: 1/0

[stachethemes_ec boxgrid_lfm=1]


preview_location - show location in event preview container

values 1/0

[stachethemes_ec preview_location=0]


preview_desc - show short description in event preview container

values 1/0

[stachethemes_ec preview_desc=0]


open_event_in - open events method

values: single (single page), external (uses the event external link url), modal (popup), self (in calendar)

[stachethemes_ec open_event_in=self]
[stachethemes_ec open_event_in=modal]
[stachethemes_ec open_event_in=single]
[stachethemes_ec open_event_in=external]


reminder - Show/Hide reminder button

values 1/0

[stachethemes_ec reminder=0]


first_day_of_the_week - Define first day of the week

values: mon, sat, sun

[stachethemes_ec first_day_of_the_week=mon]


show_event_title_all_cells - Show event title on all cells (month & week views)

values: 1/0

[stachethemes_ec show_event_title_all_cells=1]


grid_columns - Grid view desired columns

[stachethemes_ec grid_columns=4]


grid_gutter - Grid view space between events (in pixels)

[stachethemes_ec grid_gutter=10]


boxgrid_columns - Box Grid view desired columns

[stachethemes_ec boxgrid_columns=4]


boxgrid_gutter - Box Grid view space between events (in pixels)

[stachethemes_ec boxgrid_gutter=10]


event_open_target - Open links in same windows or new window

values: _self, _blank

[stachethemes_ec event_open_target=_self]
[stachethemes_ec event_open_target=_blank]





6. Set up Weather Forecast for Stachethemes Event Calendar version 5

Set up Weather Forecast

Your Calendar plugin requires an API key from OpenWeatherMap to fetch weather data. 

Users can set up this API key in the plugin settings as follows:

  1. Go to Dashboard -> STEC -> Settings -> Forecast tab.
  2. Select the API Version:
    • The calendar offers two API versions, 2.5 and 3. Here's what you need to know:
      • Version 3: This is the recommended version for new users. If you are a new user to OpenWeatherMap, select "Version 3" from the dropdown menu.
      • Version 2.5: This version is deprecated and intended for older users who might have previously used it. If you have been using the plugin with an older API key, you can select Version 2.5, but it's advisable to migrate to version 3.
  3. Enter Your API Key:
    • In the "Forecast" settings tab, you will see a field labeled "API Key." This is where you should enter your OpenWeatherMap API key.
    • If you don't already have an account on OpenWeatherMap, go to their website at https://openweathermap.org/ and sign up for a free account. If you have an account, log in.
    • Go to https://home.openweathermap.org/api_keys
    • Generate a New API Key and place it in the Forecast settings "API Key" field.
  4. Save Your Settings:
    • Once you have entered your API key and selected the appropriate API version, don't forget to save your settings.

Note: Weather Forecast is available only for events that have physical location with valid coordinates.

7. Using iCalendar RRULE Repeater Options (BETA)

THIS ARTICLE IS FOR STACHETHEMES EVENT CALENDAR VERSION 3.x !

There is undocumented feature in the repeater that is still in beta allowing you more complicated repeating options, but you can use it successfully.

Go to the event and click Set Repeater button and this popup will show up:



Now the option I will give you is quicker, but as I said undocumented yet. Click on the popup (anywhere also the form should be rested no checks or options selected) and press CTRL + ALT + SHIFT+ R and the popup will change into this:



In the first input RRULE String paste the RRULE generated from this website: https://icalendar.org/rrule-tool.html

8. Creating Tickets for Booking

From your Dashboard go to St. Event Calendar menu and select Tickets. Click Create Ticket and fill the information in the form.

When you are done press Create Ticket button bellow.

To add the ticket to your event simply go to Events and open your event or create new one. Go to Booking tab and select the ticket from the menu. You can add as many tickets as you want.

You can watch demonstration video:

9. Broken Font-Awesome Icons

Currently Stachethemes Event Calendar is using the latest version of Font-Awesome while many of the themes using build-in plugins like WP-Bakery or Slider Revolution are using old version.

This may sometimes can cause some icons to not be displayed. The reason for that is because in the latest version Font-Awesome renamed some of the icons and the old version can't find them anymore.

For now to fix this open your theme functions.php file and on the bottom paste this code:

add_action("wp_enqueue_scripts", function() {
    if (class_exists('Stachethemes\Stec\Stachethemes_Event_Calendar')) {
        global $post;
        $stec = Stachethemes\Stec\Stachethemes_Event_Calendar::get_instance();
        if ($post->post_type === 'stec_event' || $stec->scripts_are_forced() === true || (is_a($post, 'WP_Post') && has_shortcode($post->post_content, 'stachethemes_ec'))) {
            $stec->add_asset_js("stec-fa-5-compat", "js/front/fa-back-compat.js");
        }
    }
});

If the problem persist please contact our Customer Support.

10. How to display the Box Grid view

With Update 2.4 we added a new events view called Box Grid.

You can see how to enable the view here:

11. Creating Event Coming Soon Page

Hello everyone!

With update 2.3.9 we added option for you to create coming soon page for event of your choosing.

For a start you will need to know the ID of the event you want to show in Coming Soon page. Go to St. Event Calendar, Events and scroll down and see what is the id of the Event.



This event for example have ID number 22. Now when you know the event ID go to Dashboard, Pages and Create new Page. Enter the title of the page and in the text area below enter the event ID and in the Page attributes select Template: St. Event Calendar Coming Soon Page.


And with this your coming soon page is complete. You can watch the "How to" video here:

12. Does this have ical or google cal auto sync features?

It has something similar to sync.

We’ve added option to import .ics events directly from url (for example: https://calendar.google.com/calendar/ical/en.bulgarian%23holiday%40group.v.calendar.google.com/public/basic.ics) every hour or so using the wordpress cron function.

You can give it a try on our live admin demo http://stachethemes.com/wp-demos/tbb/ and see if this works for you.

The feature is located in Dashboard -> Stachethemes Event Calendar -> Import -> Auto-import events from URL

13. How to add Event Organizer Information?

With Update 2.4 you now have the option to add the event organizer information. To do this simply go to your Dashboard -> Events, select the event you want and you will see there is a new tab  "Organizers".



Add the data and click Update Event. You can watch demonstration video here:



14. Changing Filter Icon to Text

If you want to change the filter icon to just text Filter simply go to Dashboard -> STEC -> Fonts & Colors -> Custom style and place the css below:

.stec-top-menu-filter i { display: none !important; }
.stec-top-menu-filter::after {
    content: "Filter";
    font-family: Arial;
    font-size: 14px;
    color: inherit;
}
.stec-top-menu-filter.active::after,
.stec-top-menu-filter:hover::after {
    color:#fff !important;
}

Video of the process you can watch here: 

15. Layout is broken, what to do?

This article will show you how to fix the most common broken layout problem with not only ours, but mostly any front-end plugin.

In this example if our plugin look like this: 



Go to your Dashboard -> Pages and open the page that contain the Stachethemes Event Calendar shortcode.

Open in Text mode and see if the shortcode is wrapped in PRE tag like this: 



If this is the case, remove them and update the page. If this don't fix the problem you are having please open a ticket and we will take look at it :)

Video of the steps explained can be seen here:




16. Creating Calendar

To create a calendar go to your “Dashboard” then “Stachethemes Event Calendar” and click “Calendars” from the menu. Fill Calendar Name, Color, Timezone and Visibility (public or private) and click on “Create Calendar” button.

A new calendar should appear under “List with your created calendars”.


17. Changing the Single Event Page URL from stec_event/ to event/

THIS ARTICLE IS FOR STACHETHEMES EVENT CALENDAR VERSION 3.x !

  2. Go to Dashboard -> STEC -> General -> Tools tab.
  3. Scroll to "Permalinks" section and under "Event single page permalink" change the value from "stec_event" to "event".
  4. Click on the blue button "Save & refresh permalinks"


18. Activation

As of version 1.4 the plugin requires activation.

To activate the plugin go to “Dashboard” -> “STEC”  -> “Activator” and paste your purchase code and click activate. 

19. How to Embed Events

THIS ARTICLE IS FOR STACHETHEMES EVENT CALENDAR VERSION 3.x !

To embed event simply go to the share section of the event

And click the link icon. Small pop-up will appear containing the embed code of the event.

20. How to Open Event in External URL

With Update 2.4 now you can open event not only in Calendar and Single Page, but in External URL.

Simply go to your Dashboard -> St. Event Calendar -> General and on the bottom you will see this menu: 



Select External Link and Save the Settings. Now go to your Event Introduction tab and on the bottom you will see this: 



Enter your website link with http:// (or https)  -  (example: http://www.google.com) and Update the event.

You can see video demonstration here:



21. Adding products with WooCommerce

Here is how you can add items to sell with your events by using WooCommerce.

  1. Go to Events.
  2. Select Calendar.
  3. Click Add Event or Edit Event.
  4. Click on Shop tab
  5. From the dropdown select the WooCommerce product you want to add to the product.
  6. Click Add to Event

All of the products logic is handled by WooCommerce itself. We are simply linking the product to the event. You don’t write prices etc. through our plugin. When you are creating an event there is a new tab “Shop” with list of all products you have.

You can select product(s) from the list and click “Add to Event”.

On the front-end if the event has linked products, the calendar will pull from WooCommerce the product details along with buy button, short description, prices etc. On clicking the buy button the plugin sends ajax request to WooCommerce plugin and then refreshes the Cart on success.

22. Installation

Installation of Stachethemes Event Calendar is very simple.

Go to your “Dashboard” then “Plugins” click “Add New” and “Upload Plugin”. 

Click “Browse”, pick the Stachethemes Event Calendar archive and Click “Install Now”. 

After installation click “Activate plugin” and a new menu should appear named “STEC”.


You can watch quick video demo here: 

23. Obtaining Captcha API Key

THIS ARTICLE IS FOR STACHETHEMES EVENT CALENDAR VERSION 3.x !

To mange your Google reCAPTCHA API Keys got to https://www.google.com/recaptcha/admin#list

Fill the form and press “Register”.

Copy and Paste Site and Secret Key into Stachethemes Event Calendar Captcha tab in General Settings and press “Save Settings”.

24. Creating Events

Before adding events you must have at least one calendar created otherwise the Events menu in the Dashboard will not appear!

To create an event go to your “Dashboard” go to “Stachethemes Event Calendar” and click “Events” from the menu. 

Select “Calendar” from the list or create one if you haven’t created one yet. Click on “Add Event” button. Fill desired event details and click “Add Event”.

Keep in mind that most event tabs are optional. You can fill all the tabs before clicking on the “Add Event” button.


25. How to show Event Date instead of Icon

With Update 2.4 you have the option to show the Event Date instead of Icon in the Agenda List and Grid view. 


To do that go to your Event General Tab and in Event Symbol Type menu select Date.



You can see video demonstration here:



26. Displaying Different Views for Desktop and Mobile Devices

This article will show you how to display two different views one for Desktop and one for Mobile device.
Simply open your active theme functions.php file and at the bottom paste following code:

add_action('wp_footer', function() {
    global $post;
    if (!is_a($post, 'WP_Post') || !has_shortcode($post->post_content, 'stachethemes_ec')) {
        return;
    }
    ?>
    <script type="text/javascript">
        (function ($) {
            $(function () {
                if (typeof $.stecExtend === 'undefined') {
                    return;
                }
                // config vars
                var mobileView = 'grid';
                var normalView = 'agenda';
                $.stecExtend(function (m) {
                    m.glob.options.view = m.helper.isMobile() ? mobileView : normalView; 
                });
            });
        })(window.jQuery);
    </script>
    <?php
});

To change the mobile view just edit this line: var mobileView = 'grid';

And for Desktop this one: var normalView = 'agenda';

27. How to add new Icon from Font Awesome Library

With Update 2.4 you now have the option to add more icons from Font Awesome Library. 

When you open your Event General Tab you will see this interface:



The Event Symbol Type menu is set by default to Icon. On the bottom you see Add Icon from Font-Awesome section. To add new icon simply go to https://fontawesome.com/icons?d=gallery and pick Icon. The page will change for this for example:



On the bottom you see this option:


Click the Clipboard icon and go back to your Dashboard and paste it in the Icon Class Name input and click Add to the List. This will add the new icon to your library.

You can watch video demonstration here:



28. Obtaining Disqus Shortname

To obtain Disqus Shortname register at https://disqus.com/profile/signup/

After you login select “I want to install Disqus on my site”

Fill the form and click “Create Site”.

The field “Website Name” is your SHORTNAME. Copy that in your clipboard. Paste it in the Stachethemes General Settings Disqus Shortname.


29. Updating

VERSION 3.0 OR NEWER

Since version 3.0 the plugin uses the default Wordpress updater. To check for update go to Dashboard -> Plugins page. If no update shows up try de-activating and re-activating the plugin.

Version 2.x

1) Go to Dashboard -> St. Event Calendar -> Updates.

2) Click “Check for updates”. 3)

If new update is available a blue button “Download & Install” will appear.

 Version 1.7.2 and below

Steps to update manually:

1) First BACKUP the calendar folder ( wp-content/plugins/stachethemes_event_calendar ) !

2) Deactivate the plugin ( Do not uninstall or you will lose your events ).

3) Copy the new files to wp-content/plugins/stachethemes_event_calendar and overwrite if asked.

4) Re-activate the plugin.

That’s it.

STEPS (2) AND (4) ARE VERY IMPORTANT OTHERWISE YOUR SQL DATABASE WON’T UPDATE!

30. How to add Image instead of Icon

With Update 2.4 now you can add your custom images instead of icons. When you select Image in Event Symbol Type menu, you will have the option to add image: 


If you add more than one image they will change with fade effect every 3 seconds. You can watch demonstration video here:



31. Creating Custom Tabs

Code example for adding custom tab. Place code below in your theme functions.php file

/**
 * Step 1: Creating custom tab on the front-end 
 */
add_filter('stec_event_tabs', function($tabs) {
    // uses function add_event_tab($slug, $title, $icon, $content = "", $file = false)  
    $tabs[] = array("my-custom-tab", __('My Custom Tab', 'stec'), "fas fa-code", "", false);
    return $tabs;
});
/**
 *  Step 2: Add the custom tab to St. Event Calendar -> Events -> Create/Edit Event form 
 *  It will also include 1 text input for storing the tab content 
 */
add_action('stec_admin_addedit_event_tab', function() {
    ?><li data-tab="my-custom-tab"><?php _e('My Custom Tab', 'stec'); ?></li><?php
});
add_action('stec_admin_addedit_event_tab_content', function($event) {
    $value = null;
    if ($event) {
        $value = $event->get_custom_meta('custom_input_name');
    }
    ?>
    <div class="stachethemes-admin-section-tab" data-tab="my-custom-tab">        
        <p class="stachethemes-admin-info"><?php _e('Field title', 'stec'); ?></p>        
        <input class="stachethemes-admin-input" type="text" name="custom_input_name" value="<?php echo $value; ?>" >    
    </div>    
    <?php
});
/**
 * Step 3: Store custom input content and create/edit event 
 */
add_filter('stec_insert_post', function($post_data) {
    $custom_input_value = isset($_POST['custom_input_name']) ? $_POST['custom_input_name'] : null;
    if ($custom_input_value) {
        // if custom value is found, add it to the post meta data        
        $post_data['meta_input']['custom_input_name'] = $custom_input_value;
    }
    return $post_data;
});
/**
 * Step 4: Retrieve the tab content when query the event front data
 * */
add_filter('stec_event_get_front_data', function($data) {
    $value = get_post_meta($data['id'], 'custom_input_name', true);
    if ($value) {
        $data['custom_input_name'] = $value;
    }
    return $data;
});
/**
 * Step 5: Display the tab content via Javascript 
 */
add_action('wp_head', function() {
    ?>    
    <script type="text/javascript">
        (function ($) {
            $(function () {
                // Calendar 
                $(document).on('onEventToggleOpen', function (e, data) {
                    data.$instance.find('.stec-layout-event-inner-my-custom-tab').html(data.event.custom_input_name);
                });
                // Single Page
                if ($('.stec-layout-single').length > 0) {
                    $('.stec-layout-single-my-custom-tab').html(stecSingleEvent.custom_input_name);
                }
            });
        })(jQuery);
    </script>    
    <?php
});

32. Using Theme Feature

With Update 2.4 now you can Import and Export color themes. You can now create your calendar layout color theme and export it to import it later or use it somewhere else. You can also download our premade themes from our theme feature website: http://stachethemes.com/colorthemes/

You can watch demonstration video here: 

33. Adding custom fields to the RSVP form code example

THIS ARTICLE IS FOR STACHETHEMES EVENT CALENDAR VERSION 3.x !

Here's example on how to insert custom fields to the RSVP form. 

The code should be inserted in your theme or child-theme functions.php file.

/**
 * This code adds two custom fields (text input and select element) on the front-end modal window
 */
add_action('wp_footer', function() {
    ?>
    <script type="text/javascript">
        (function ($) {
            $(document).on('stecOnRsvpAfterFields', function (e, data) {
                var customHtml = [
                    '<input type="text" name="attendee_country" placeholder="Country" />',
                    '<select name="attendee_tag"><option value="1">Tag</option></select>'
                ];
                data.temp.customFields = customHtml;
            });
        })(window.jQuery);
    </script>
    <?php
});
/**
 * This code intercepts the custom fields when the form is submitted
 * \Stachethemes\Stec\Admin_Helper::post is same as $_POST[...] but returns default value (false) if !isset
 */
add_filter('stec_rsvp_to_event_before_add', function(\Stachethemes\Stec\Event_Meta_Attendee $attendee) {
    
    $country = \Stachethemes\Stec\Admin_Helper::post('attendee_country', false);
    $tag     = \Stachethemes\Stec\Admin_Helper::post('attendee_tag', false);
    if ($country && $tag) {
        $attendee->set_custom_data('country', $country);
        $attendee->set_custom_data('tag', $tag);
    }
    return $attendee;
});
/**
 * This code will display the customs fields in the admin area 
 * When clicking on attendee edit button
 */
add_action('admin_footer', function() {
    ?>
    <script type="text/javascript">
        (function ($) {
            $(document).on('stecOnAdminAddAttendee', function (e, data) {
                var attendeeIndex = data.$attendee.index('.stachethemes-admin-attendance-list-attendee');
                $.each(data.attendee.custom, function (key) {
                    var customHTML = [];
                    var inputKeyName = 'attendee[' + attendeeIndex + '][custom][' + key + ']';
                    customHTML.push('<p class="stachethemes-admin-info">' + key + '</p>');
                    customHTML.push('<input class="stachethemes-admin-input" type="text" name="' + inputKeyName + '" value="' + this + '" />');
                    $(customHTML.join('')).insertBefore(data.$attendee.find('.edit a[data-action="update-attendee"]'));
                });
            });
        })(window.jQuery);
    </script>
    <?php
});

34. Extending event preview

Javascript example on how to modify the event preview html.

The code should be placed in the active theme functions.php file.

This example replaces all preview html with simple title:

add_action('wp_footer', function() {
    global $post;
    if (!is_a($post, 'WP_Post') || !has_shortcode($post->post_content, 'stachethemes_ec')) {
        return;
    }
    ?>
    <script type="text/javascript">
        (function ($) {
            $(function () {
                if (typeof $.stecExtend === 'undefined') {
                    return;
                }
                $.stecExtend(function (m) {
                    m.$instance.on('stecBeforeReturnEventPreviewHtml', function (e, data) {
                        var newHTML = [];
                        newHTML.push('<div class="stec-layout-event-preview">');
                        newHTML.push('  <div style="padding: 20px;">');
                        newHTML.push('      <p class="stec-style-title">' + data.event.title + '</p>');
                        newHTML.push('  </div>');
                        newHTML.push('</div>');
                        data.temp.EventPreviewHtml = newHTML.join('');
                    });
                });
            });
        })(window.jQuery);
    </script>
    <?php
});

The next example modifies the default html and adds categories below the event title:

add_action('wp_footer', function() {
    global $post;
    if (!is_a($post, 'WP_Post') || !has_shortcode($post->post_content, 'stachethemes_ec')) {
        return;
    }
    ?>
    <script type="text/javascript">
        (function ($) {
            $(function () {
                if (typeof $.stecExtend !== 'function') {
                    return;
                }
                $.stecExtend(function (m) {
                    m.$instance.on('stecBeforeReturnEventPreviewHtml', function (e, data) {
                        var $eventPreview = $(data.temp.EventPreviewHtml);
                        var event = data.event;
                        var customHTML = [];
                        
                        // Check if event has categories
                        if (event.category.length <= 0) {
                            return;
                        }
                        customHTML.push('<div>');
                        
                        $.each(event.category, function () {
                            
                            var category = this;
                            
                            // Some extra css for the category block
                            var categoryCSS = [
                                'padding: 3px 6px', 
                                'border-radius: 3px',
                                'display:inline-block',
                                'margin:2px 5px 0 0',
                                'font-size: 10px',
                                'text-transform: uppercase',
                                'color: #fff',
                                'background: ' + category.color
                            ];
                            
                            customHTML.push('<span style="' + categoryCSS.join(';') + '">' + category.title + '</span>');
                        });
                        
                        customHTML.push('</div>');
                        $(customHTML.join('')).insertAfter($eventPreview.find('.stec-layout-event-preview-left-text-title'));
                        
                        // Replaces default preview html with the modified one
                        data.temp.EventPreviewHtml = $eventPreview.get(0).outerHTML;
                    });
                });
            });
        })(window.jQuery);
    </script>
    <?php
});


35. Stachethemes Event Calendar 5 Dynamic Date Values

Date filters accept static date or a dynamic date value

Static date 

Any date in format YYYY-MM-DD e.g. 2024-12-31 

or YYYY-MM-DDTHH:mm e.g. 2024-12-31T15:30

Dynamic dates list

Examples

min_date=2024-12-31

min_date=2024-12-31T15:30

min_date=now

min_date=start_of_this_month

max_date=start_of_today

max_date=6_months_ahead

Shortcode examples

Display upcoming events only:

[stec min_date=now]

Display events from current month:

[stec min_date=start_of_this_month max_date=end_of_this_month]

Display events from current week:

[stec min_date=start_of_this_week max_date=end_of_this_week]

Display current week's upcoming events:

[stec min_date=now max_date=end_of_this_week]


36. Stachethemes Event Calendar 5 Custom RSVP Input Fields hook example:

This example inserts two new inputs: Phone Number and Company Name.

The example assumes the code will be placed in the theme or the child-theme functions.php file.

/**
 * STEP 1:
 * Modify the Attendance Form Structure on the Front-end 
 * via stecFilterAttendFormContent JavaScript filter
 */
add_action('wp_footer', function () {
?>
    <script>
        window.stecFilterAttendFormContent = function({
            structure,
            attendanceData,
            isLoggedIn
        }) {
            const newStructure = JSON.parse(JSON.stringify(structure));
            // Insert Phone Number input field
            newStructure.push({
                id: 'phone-number',
                title: 'Phone number',
                type: 'input-text',
                metaKey: 'phone_number',
                value: attendanceData?.current_user?.phone_number || '',
                required: true,
                regexByType: 'phone',
                errorMessage: 'Invalid phone number'
            });
            // Insert Company Name input field
            newStructure.push({
                id: 'company-name',
                title: 'Company name',
                type: 'input-text',
                metaKey: 'company_name',
                value: attendanceData?.current_user?.company_name || '',
                required: true,
                regexByType: 'title',
                errorMessage: 'Invalid company name'
            });
            return newStructure;
        }
    </script>
<?php
});
/**
 * STEP 2:
 * Register the new custom input fields as a post meta
 * so that it can be saved in the database when the user submits the RSVP form
 */
add_action('init', function () {
    register_post_meta(
        'stec_attend',
        'phone_number',
        array(
            'type'          => 'string',
            'single'        => true,
            'show_in_rest'  => true
        )
    );
    register_post_meta(
        'stec_attend',
        'company_name',
        array(
            'type'          => 'string',
            'single'        => true,
            'show_in_rest'  => true
        )
    );
});

/**
 * STEP 3:
 * Include the new custom input fields from the database when 
 * the attendance data for the event is being retrieved on the front-end
 */
add_filter('stec_attendance_data_meta_fields', function ($fields) {
    $fields[] = 'phone_number';
    $fields[] = 'company_name';
    return $fields;
});
/**
 * STEP 4: 
 * Modify the Attendance Form Structure on the Admin via stecFilterAttendFormContentAdmin JavaScript filter
 * to include the new custom checkbox field
 * 
 * This is similar as STEP 1 but for the Admin panel
 */
add_action('admin_footer', 'stec_attendance_custom_form_admin');
add_action('wp_footer', 'stec_attendance_custom_form_admin');
function stec_attendance_custom_form_admin() {
?>
    <script>
        window.stecFilterAttendFormContentAdmin = function({
            structure,
            postData
        }) {
            const newStructure = JSON.parse(JSON.stringify(structure));
            newStructure.push({
                id: 'phone-number',
                title: 'Phone number',
                type: 'input-text',
                metaKey: 'phone_number',
                value: postData.current?.meta?.phone_number || '',
                regexByType: 'phone',
                required: true,
                errorMessage: 'Invalid phone number'
            });
            newStructure.push({
                id: 'company-name',
                title: 'Company Name',
                type: 'input-text',
                metaKey: 'company_name',
                value: postData.current?.meta?.company_name || '',
                regexByType: 'title',
                required: true,
                errorMessage: 'Invalid company name'
            });
            return newStructure;
        }
    </script>
<?php
}

37. Set up Google Captcha Enterprise for Stachethemes Event Calendar version 5

To enable Google Captcha Enterprise for your calendar, go to Dashboard -> STEC -> Settings -> Captcha:

 Obtaining the reCAPTCHA Key, Project ID and API Key values

  1. Sign in to Google Cloud Console:
  2. Create a New Project:
    • Click on the project dropdown at the top of the console.
    • Click on "New Project."
    • Enter a name for your project and select your organization if applicable.
    • Click on "Create" to create the project.
  3. Enable reCAPTCHA Enterprise API:
    • In the Cloud Console, navigate to the "APIs & Services" > "Library" section.
    • Search for "reCAPTCHA Enterprise API" and select it.
    • Click the "Enable" button to enable the API for your project.
  4. Generate API Key:
    • In the Cloud Console, navigate to the "APIs & Services" > "Credentials" section.
    • Click on "Create credentials" and select "API key."
    • Your API key will be generated. Make sure to restrict its usage to only the services you need, such as reCAPTCHA Enterprise.
  5. Obtain reCAPTCHA Key (Google reCAPTCHA Enterprise Key ID):
    • Visit the reCAPTCHA Enterprise website.
    • Click "Go to console".
    • Click "+ Create key".
    • Enter "Display name". For platform type select "Website".
    • Make sure to restrict the key only for the domains you will be using.
    • Click "Create key"
    • After setting up reCAPTCHA Enterprise, you will receive the reCAPTCHA Key (Key ID). It will be available in your reCAPTCHA Enterprise dashboard.
  6. Find Project ID (Google Cloud Platform Project ID):
    • The Project ID is the ID of your Google Cloud Platform project, which you created in step 2.
    • You can find it in the Cloud Console by clicking on your project name at the top of the console. It will be listed under the project name.
  7. Use the Obtained Values:
    • Once you have obtained the reCAPTCHA Key, Project ID, and API Key, insert them into the "Captcha settings" fields.



38. Translating Stachethemes Event Calendar version 5

General info

Please make sure your translation .po and .mo files reside in the system folder:

    [ WordPress Installation ] / wp-content / languages / plugins /

Otherwise, the plugin will not load your translation.

For translation tool, we recommend the Loco Translate plugin.

The translation folder contains some pre-built language packs using Google Translation AI which can serve as a starting point.

After you have set up your .po file go to Dashboard -> Stec -> Settings -> Language and check "Enable i18n data loader":

Do not enable "Enable multilingual support" unless you have WPML or POLYLANG plugins enabled.

How to translate the calendar using the Loco Translate plugin:

1. Go to Dashboard -> Loco Translate -> Plugins

2. Click on "Stachethemes Event Calendar"

3. If you want to use some of the pre-built language packs, for example Polish, hover over "Polish" and move it to the system folder by clicking "Move":

Then select "System" as new location:

And click "Move files" button below.

Click "Edit" to start translating:

---

If you want to create new .po file click on "+ New Language":

It is important the language files location to be set to "System". 

4. Before starting translating/editing the .po file click "Sync":

5. You can now start translating. Click "Save" after you are done.

6. Go to Dashboard -> STEC -> Settings -> Language and check "Enable i18n data loader" and click "Save Settings". 

Reload the page and that's all.


39. Translating the event template (Version 5)

The event template cannot be translated via a gettext editor (e.g. Loco Translate).

Update: Since version 5.1.9 Default Templates can be translated using Loco Translate or similar tool.

To translate the content, you will have to create your own event template via the builder.

1) Go to your Calendar Dashboard -> Builder -> Click the "Add template" button.

2) Select "Event layout" and leave "Blank template" unchecked to start with a prebuilt template.

3) Click the "Content Tabs" element to select it. Then, click on the cogwheel icon to access the settings.

4) On the left panel, you will find the Content Tabs settings, displaying each tab and its respective label.

You can assign an icon and label for each tab from that section.

5) After you have finished setting the labels, click "Save" in the top right corner and provide a name for your template.

6) Once you have saved your template, return to the Calendar Dashboard, then navigate to the Settings and select the Builder tab.

In the "Event template" input, choose the template you've just created.

And click "Save Settings".




40. Stachethemes Event Calendar 5 Shortcodes List

Calendar Shortcode:

[stec] or [stachethemes_ec]

Shortcode parameters.


Event Submission Form Shortcode:

[stec_submit_form]

Shortcode parameters:



Display a Single Event Shortcode:

[stec_single]

Shortcode parameters:


Display Events Slider Shortcode:

[stec_events_slider]

Shortcode parameters:



Display Events List Shortcode:

[stec_events_list]

Shortcode parameters:



Display Dashboard on the Front-end Shortcode:

[stec_dashboard]


Display Specific Event Tickets

[stec_event_tickets]

Shortcode parameters:

Shortcode example:

[stec_event_tickets event_id=123 mode=modal button_text="Buy Tickets"]



















41. Missing Font Awesome Icons

Fix for missing or incorrectly displayed icons

By default the calendar uses 'font-awesome' hook to register and enqueue the Font Awesome stylesheet.

However, it is possible that another plugin or theme is loading older version of Font Awesome using this same hook.

If a theme or plugin is using an older version of Font Awesome, it is very likely that your icons will break.

FIX:

Easiest way to fix issues with Font Awesome icons is to create a kit.

  1. Go to Font Awesome website and navigate to kits: https://fontawesome.com/kits/
  2. Click "Add New Kit"
  3. Create your kit.
  4.  Copy the link address ( https://kit.fontawesome.com/5cd55019.js ) or whatever is your kit url
  5. Go to your theme or child-theme functions.php file and insert following hook at the bottom:
/**
 * Load font-awesome kit
 */
function enqueue_font_awesome_kit() {
    wp_enqueue_script('font-awesome-kit', 'https://kit.fontawesome.com/5cd55019.js', array(), null, true);
}
add_action('wp_enqueue_scripts', 'enqueue_font_awesome_kit');
add_action('admin_enqueue_scripts', 'enqueue_font_awesome_kit');

That's all. Your icons should load correctly now.

OPTION 2: 

As an alternative you can install the Official Font-Awesome WordPress Plugin.

Activate the plugin and go to Dashboard -> Settings -> Fonts Awesome

To get API Token go to https://fontawesome.com/account/general#api-tokens

Insert your API Token in your WordPress Font-Awesome Plugin


42. Removing the event countdown element using the Builder (v5)

1) From the Calendar Dashboard click on "Add template" button in the Builder block


2) Select template type:

Keep "Blank template" unchecked to start editing with the default elements already inserted.


3) Click on the "Event Counter" element to select it.


4) Press the "Delete" button or click on the trash icon to delete the element.


5) Adjust the "Media Carousel" element's top margin by clicking on "Media Carousel" element:

Click on the cogwheel button to enter properties menu:

In "Properties" set top margin to 0


6) Click "Save" to save the template:


7) You need to tell the Calendar to use this template now. Go to Calendar Dashboard -> Settings -> Builder tab 

Change "Event template" field value to the template you've just created: 

Save the settings.

43. How to Add Event Images to Yoast SEO in Stachethemes Event Calendar Version 5

To tell Yoast Seo to use the event image for it's og:image meta place the following hook in your child-theme functions.php file:

/**
 * OG:Image filter for Yoast SEO plugin
 * Adds first image from event to Yoast SEO Open Graph Image
 * Works only for single event pages
 */
add_filter('wpseo_add_opengraph_images', function ($image_container) {
    if (get_post_type() === 'stec_event') {
        $images = get_post_meta(get_the_ID(), 'images');
        if (is_array($images) && $images) {
            $image = array_shift($images);
            $image_container->add_image_by_id( $image['id'] );
        }
    }
    return $image_container;
});

44. Version 5 Permission Settings

Permission Settings

Permission settings adjust which user roles can create terms ( calendars, categories, locations, organizers, guests ) and events.

Default settings allow only users with Administrator role to create/edit terms and events.

To change these settings navigate to Calendar Dashboard -> Settings -> Dashboard tab


Access Dashboard - Determines the users authorized to access the calendar dashboard.

The dashboard shows only the options permitted for each user. 

If a user can access the dashboard but lacks the ability to manage terms, the corresponding option will not be visible on the dashboard.

By default, all logged-in users can access the dashboard to view reminders, attendances, and ticket orders if the front-end dashboard option is enabled.

Manage terms - Specifies the users with the ability to create and edit new terms. Users cannot edit terms created by other users unless they have additional permissions granted by the term author.

For example when creating a new calendar term the user has option to set "Edit permission"

By default, this value is set to "Private," signifying that only the calendar author can edit it. Other users, even if permitted to "Manage terms," cannot edit this calendar.

Exception: Super admins can see and edit everything.

Manage events - Specifies the users with the ability to create and edit events. 

When creating an event, users can choose which user roles are permitted to edit it. 

Similar to term rules, the same principles apply to events.

By default, only the event author can manage their own events. Even if a user has the authority to manage events, they cannot edit events created by other users without permission.

Import settings - Specifies the users authorized to use the import settings and cron jobs in the Calendar Dashboard.

Enforce private admin

When these options are selected, the calendar will enforce private mode for both terms and events. 

This implies that only the authors can manage or view (when private front-end is enabled) their items. 

All Edit Permissions, Use Permissions, and Read Permissions (when private front-end is enforced) settings will be removed, and items will be automatically assigned to private.

45. Activating Stachethemes Event Calendar version 5

To activate your calendar go to Dashboard -> STEC -> Activator -> Manage License

Enter your purchase key in the field and click "Activate".

"Failed to connect to Stachethemes.com"

If you receive this message, it means the server is unable to connect to our server. This could be due to misconfiguration, firewall restrictions, and various other issues. In such a case, you can attempt to activate your calendar remotely from our website:

https://api3.stachethemes.com/stec/manage


46. Stachethemes Event Calendar version 5 Shortcode Parameters

Calendar Shortcode Parameters

Please note that the parameters are also available in the calendar dashboard. You can access the calendar dashboard to configure and customize various settings to meet your specific needs and preferences. Here are some of the available parameters:

Calendar shortcode: [stec] or [stachethemes_ec]

Gutenberg block: /stec or click "Browse all" and navigate to the "Stachethemes" section.

Elementor widget: The calendar widgets are available under "Stachethemes" section or in "Search widget" input type "stec"

Calendar Settings:

Filter Settings:

Layout Settings:

Dashboard Settings:

Miscellaneous Settings:

Shortcode Examples:

[stec]
[stec filter__calendar=1]
[stec filter__category=101,102,103]
[stec filter__organizer="201"]
[stec calendar__layout=grid calendar__layouts="grid,boxgrid,map"]
[stec calendar__open_events_in="modal"]
[stec filter__min_date="now" filter__max_date="2_years_ahead"]
[stec filter__min_date="start_of_this_month" filter__max_date="end_of_this_month"]
[stec filter__min_date="2023-01-01" filter__max_date="2023-12-31"]

47. Missing Colors and/or Undetected Shortcodes

Missing Colors and/or Undetected Shortcodes

As you can see in this screenshot, background colors are completely missing.

If you encounter such a scenario, you may need to instruct the calendar to load the assets on that page manually. 

To do this, navigate to Calendar Dashboard -> Settings -> Misc. 

Scroll down to "Enable force load scripts" and check it.

In the "Force load [stec] scripts" field below enter the page ID where the calendar is displayed.

To check what is the page ID go to your Dashboard -> Pages and click "edit" on the page where the calendar is displayed.

The page ID can be located in the URL of your navigation bar.