This topic answers the most common questions about getting your Trumba® calendar spuds to behave the way you want them to on your site.
Tip If the question you have is not included in this list, please visit our Product Support Forums, where many more spud questions are answered.
Sure. If you use custom fields and/or organize your content by owning calendar or folder, you can use filter views to pre-filter spud content.
For example, suppose a university calendar uses an "event sponsor" custom field to indicate which academic department sponsors each event. This makes it easy to set up filtered views by department. Each filtered view consists of a collection of spuds pre-filtered to display only one department's events. These pre-filtered spuds can then be embedded in each department's home page.
To learn more, see Filter views.
To display a calendar in a section of a page, such as a tab or drop-down, that is hidden when the page first loads:
For example, in the case of a tab control, use an event handler to make the call.
div(the tab, drop-down, or other section) that contains the spud by including the
spudIdargument in the $Trumba.addSpud() method.
For a demonstration of how to display a calendar in a tab, open one or both of the following files and view the commented source code.
When browsers display content on secure (https) pages, they check to make sure all of the content on the pages is also secure.
Trumba now creates the spuds.js section of the spud script code without specifying the protocol (http vs. https). This script, such as in the example just below, loads using whatever protocol that the hosting page uses:
If you've used spud script code on your website that was generated by Trumba prior to this change, however, the spuds.js section may include "http:" as shown here:
Because the URL in that code begins with http rather than https, the browser interprets the spud content as potentially insecure.
Browsers respond to this differently, sometimes in ways that aren't obvious or that might cause concern for page visitors. For example:
To make sure that visitors to an https page don't have trouble displaying your spuds, remove "http:" from your spud script code (in the spuds.js section), such as in the top example.
If you try to enter spud code into a post on a WordPress blog that is hosted by WordPress.com, the only thing that displays in your blog is the text for the spud code.
Trumba customers who host WordPress have successfully included spuds in their websites using the Enhanced Text Widget plugin. You can download this plugin from WordPress.org at https://wordpress.org/plugins/enhanced-text-widgets/.
By default, event links in promotion spuds point to the version of your calendar hosted on trumba.com. You can easily change where event links point by putting the URL for your own calendar page into the Calendar Address field in Publish Settings.
Updating the Calendar Address field affects more than just spuds. It also means that visitors who click event links in your calendar emails and RSS feeds will jump to the calendar on your website.
Tip Be sure to include the http:// portion of the URL.
As shown here, the name of the selected calendar (Academic) is in bold type and it has a dark black check mark.
To select a calendar, click its name.
Tip The calendar address URL must include http:// or it won't work.
The spud script now contains the
teaserBase argument. As shown below, the value for that argument is the URL you pasted into the Calendar Address field.
To test where each promotion spud's event and other links take you, click Preview.
If you want to make the calendar fit into a set space that's narrower than the default calendar width, you can place it into a
div of the best width and height for your page, and use the
overflow attribute to add scroll bars to the div container. For example,
The Multi-day template requires a width of nearly 800px and currently behaves a little differently than the others. If your calendar uses this template, and you want it to fit into a narrower space, you need to take the code above one step further.
First, you need to create a
div for the dimensions you want the calendar to fill on your page. Then you create a second
div to hold the calendar. This is what the code looks like:
If you embed a Date Finder spud into a page that does not contain your main calendar spud, you need to tell it where to direct visitors when they click a link. To do that, you add the teaserBase argument as described in When I click an event in a spud, it jumps to trumba.com earlier in this FAQ.
Expecially when you use the previous and next buttons to page through the calendar, it's not unusual for the Date Finder and main calendar to appear to be out of sync.
This can happen because:
The following image shows a Date Finder spud beside a main calendar spud displayed using the List calendar view.
The two spuds appear to be out of sync. The Date Finder shows August while the events listed at the top of the main calendar take place in July.
However, because of the List calendar view's paging and grouping settings, the calendar also displays August events.
This organization promotes a relatively small number of events so both the July and August groups appear on the same page.
For example, if seven events occur in July and five in August, a total of 12 events would be listed to keep all events in the August grouping on the same page.
In this case, the Date Finder and calendar are not really out of sync as the Date Finder reflects the August events' display.
The interrlationships between calendar view settings and the Date Finder means that you can't prevent the two spuds from occasionally appearing to be out of sync. Given the primary purpose of the Date Finder spud, it shouldn't cause visitors any problem.
The Date Finder is not merely a thumbnail reflection of the main calendar. Instead, it's a navigation tool. Visitors can click a date to quickly navigate to that day or month (depending upon the calendar view). If you turn on Date Finder popups, visitors can also hover over dates to pop up a list of that date's events. By clicking an event title in the popup, visitors display the event detail page.
The Upcoming Events Crawler spud code contains a
Speed variable that you can modify to control the speed with which events scroll. The default value is 35.
After you paste the code into a webpage, you can control scrolling speed by changing the
Speed variable's value.
With both promotion and control spuds, you have the option of creating multiple versions of the same spud for use either on the same or different webpages. Each version can use different settings to meet your needs.
Why would you want two configurations of the same spud? Suppose a public library places on its home page a Vertical Crawler promotion spud that displays the next ten events. The library also promotes the next five events in its lobby using the same Crawler spud formatted for digital signage.
Tip If you want to copy a spud and maintain exactly the same settings and styles, you can clone the spud. Learn more.
On the Edit Settings... page, under Spud Configuration Name, you see the default name, SpudConfig2. Replace that default name to make it more meaningful.
For example, if the library mentioned earlier created a second Vertical Crawler spud for use in digital signage, the library might name the spud configuration digital_signage. Meaningful naming makes it easy to keep track of each spud's unique purpose.
spudConfig argument is added automatically to the code for each new configuration. For example, the spud code will look something like this:
Each copy of the spud shows events from the same calendar using the specific settings you selected.
The short answer is that this script call:
needs to appear only once on each page that contains spuds, before any individual spud code. If you embed multiple spuds on a page, you have a couple of options:
For example, suppose your webpage includes a Date Finder promotion spud at the top of the left column, followed by the View Chooser and Search control spuds. The Main Calendar spud appears on the right. The only spud that must include the spuds.js script call is the Date Finder.
<head>section of your page and then omit it from each individual spud's code.
The script above runs a file called spuds.js. The code in this file oversees communication among spuds on a page and between spuds and your source calendar data on the Trumba server. Without this code, the individual spuds cannot function.
Although you should use this script only once on each page that contains spuds, the code appears with all spuds in the Publishing Control Panel. This is because any of the spuds can function as the only spud on your page, and the code must appear once. Running it multiple times does not harm anything, but it can affect performance. For the second or subsequent spuds on a page, do not copy this part of the code from the Publishing Control Panel.