Header Image

Documentation

The plugin documentation is here to help you understand how the plugin work and how to you use it!

Plugin Requirements

Keeping your WordPress up to date will minimize the problems you may experience.

  • Browsers: IE10, IE11, Firefox, Safari, Opera, Chrome, Edge
  • Scripts: PHP 5.3, jQuery 1.12.3+
  • Compatible with: WooCommerce 3+, Visual Composer 4.8.x WordPress version: WordPress 4.3 and above

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 Active plugin and a new menu should appear named Stachethemes Event Calendar.

Activation

As of version 1.4 the plugin requires activation.

To activate the plugin go to Dashboard Stachethemes Event Calendar License and paste your Purchase Code and click Activate.

If you are using the plugin on your test server and need to reset your activation later please contact our support team on here.

Displaying on the Front-end

Quick Video Demo.

From Dashboard go to Pages or Posts. Add New Page or Post, fill desired Post/Page title and inside the
Post/Page content write [stachethemes_ec].

Click Publish. This page will display the calendar when visited. You can place the shortcode in any existing Page or Post as well.

If you are uncomfortable writing shortcodes the plugin supports WPBakery Page Builder (formerly Visual Composer) as well.

For more information about shortcodes see below.

Shortcodes

Default shortcode:

[stachethemes_ec]

Shortcode attributes:

cal - include only following calendars. 
Example: [stachethemes_ec cal=1,2,3] 
where 1,2,3 are calendar ids
view - sets default view.
Example [stachethemes_ec view="month"]
Values are agenda, month, week, day
show_views - show/hide top menu views buttons. 
Example [stachethemes_ec show_views=0]
Values are 1 or 0.
show_top - show/hide top menu. 
Example [stachethemes_ec show_top=0]
Values are 1 or 0.
agenda_cal_display - show/hide agenda calendar slider from agenda view. 
Example [stachethemes_ec agenda_cal_display=0]
Values are 1 or 0.
agenda_get_n - number of events to show in agenda view per "look for more" click. 
Example [stachethemes_ec agenda_get_n=5]

So for displaying upcoming events you can use something like following:

[stachethemes_ec view="agenda" show_top=0 agenda_cal_display=0 cal=1]

This will display the agenda accordion only with upcoming events from calendar with id 1 Show only today events from calendars 2,3 example:

[stachethemes_ec view="day" show_top=0 cal=2,3]

New with Update 2.3.7

[stachethemes_ec cat=1,2,3]
[stachethemes_ec cat=1]

Where 1,2,3 are category id numbers

[stachethemes_ec start_date=2018-01-01]

start_date - Calendar date on initial load. Defaults to "now"

[stachethemes_ec min_date=2018-01-01 max_date=2018-12-31]

min_date, max_date values: date in YYYY-MM-DD format, "next_week", "this_week", "next_month", "this_month"

Updating

Version 2.0 and Above

  • Go to Dashboard St. Event Calendar Updates.
  • Click Check for updates.
  • If new update is available a blue button Download & Install will appear.

Version 1.7.2 and Below

Steps to update manually:

  • First BACKUP the calendar folder ( wp-content/plugins/stachethemes_event_calendar ) !
  • Deactivate the plugin. DO NOT UNINSTALL or you will lose your events.
  • Copy the new files to wp-content/plugins/stachethemes_event_calendar and overwrite if asked.
  • Re-activate the plugin.

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

Creating Calendar

Quick Video Demo.

To create a calendar category 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.

Creating Events

Quick Video Demo.

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.

Creating Custom Tabs

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

Download the Instructions

Obtaining Weather API Key

To obtain free API KEY register at https://developer.forecast.io/register

Click the button TRY FOR FREE and fill the registration form (2).

You will receive an e-mail to complete the registration. Click the link in the e-mail.

Now your account is ready and after login in you will see this screen with your API key (4).

Copy the key and go to Stachethemes Event Calendar General Settings and paste it in the Weather API Key field (5).

Obtaining Captcha API Key

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.

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.

Obtaining Google Maps API Key

Google recently changed the way you obtain Google Map API key and now you have to create a billing profile. Read more here.

To obtain Google Maps API key go to https://developers.google.com/maps/documentation/javascript/tutorial.

Click Get API Key.

Then click Step 1

And then click the button Get Started and follow the instructions.

When you are done copy and paste your API key General Google Maps API Key field and press Save Settings.

Adding Products with WooCommerce

Quick Video Demo

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

  • Go to Events.
  • Select Calendar.
  • Click Add Event or Edit Event.
  • Click on WooCommerce tab.
  • From the dropdown select the WooCommerce product you want to add to the product.
  • 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 WooCommerce 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.

Embed Events

Quick Video Demo

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.

Create Event Category

Quick Video Demo

To Create Event Category simply go to St.Event Calendar and select . Write the category title and select the category tag background color. The notes are for personal use and completely optional.

New Category Shortcode attributes are now available:

For displaying certain category or categories only where 1,2,3 are category id numbers:

[stachethemes_ec cat=1,2,3]
[stachethemes_ec cat=1]

Displaying different views for Desktop and Mobile Device

If you want to display different view depending on the device your users (desktop or a mobile) are using you can use this code to do that.

You will find the instructions here: Instructions Article

Changing Single Event Page URL from stec_event/ to just event/

If need to change the single event page url at this point you can do it with few lins of code. Please follow the link to the instructionts: https://stachethemes.ticksy.com/article/13414/

Creating Event Coming Soon Page

To create Event Coming Soon Page first you need to know you event ID number. Go to St. Event Calendar Events and find the Event you want to display in Coming Soon page and see what ID number is.

Now when you know the Event ID number go to Dashboard and Create New Page. Enter the Title you want and in the text area below enter the id number of the event, nothing else. When this is done in the Page Attributes Templates select St. Event Calendar Coming Soon Page.

Your page is now ready to be published. You can watch video demonstration here.

My layout is broken, what to do?

If after installing the plugin, the layout is really messed up try to see if the calendar shortcode is not wrapped in PRE tag. Go to the page containing the calendar shortcode and in TEXT mode see if the shortcode is wrapped in pre tag. If so, just remove that pre tag and update the page. If this don't fix the problem please contact us and we will check it out.

More information and video demo on the topic you can see here.

Frequently Asked Questions

I get this error on activation: Parse error: syntax error, unexpected ‘[’ in …stachethemes_event_calendar.php on line 27

Make sure your server is running PHP version 5.4 or newer

Calendar layout is really REALLY messed up!

Make sure the shortcode [stachethemes_ec] is not wrapped in PRE tags! Check the Page/Post editor in Text mode rather than Visual.

If the calendar style is missing try following:

Go to Dashboard Stachethemes Event Calendar General Other Settings and set Force load calendar scripts to Yes.

I got this error on browser console “top.calfilter.js:56 Uncaught TypeError: $.uniqueSort is not a function(anonymous function)

$.uniqueSort was added in jQuery version 1.12.3.

If you are not using the newest WordPress version then you most likely have earlier version of jQuery as well.

How to fix:

Open your theme functions.php and at the end add:

wp_deregister_script( 'jquery' ); 
wp_register_script( 'jquery' , 'https://ajax.googleapis.com/ajax/libs/jquery/1.12.3/jquery.min.js'); 

This function will load jQuery version 1.12.3.

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.