Trumba
Google 
Trumba Help Center What’s New | FAQ | Support Forum | Email Support

Embed calendar spuds into your web pages

You can easily integrate your Trumba® calendar spuds right into your website. In your Trumba account, you configure the spuds the way you want them. Trumba Connect generates code that you can paste into your web page to display the spud with the settings you chose.

The default code for an individual spud looks like this:

<script type="text/javascript">
$Trumba.addSpud(
{ webName: "name",
  spudType: "type"});
</script>

Where name is the web name of your calendar and type is the name of the spud you choose to embed. To get the spuds to work, though, you also need to embed the spud controller script in the <head> section your page:

<script type="text/javascript" src="http://www.trumba.com/scripts/spuds.js"></script>

What are calendar spuds and why would I want to do this?

The details

The remaining sections of this topic expand on the information above to give you step-by-step instructions for embedding calendar spuds and help you get the best results.

Topic links

Requirements for embedding calendar spuds

  • You can embed spuds from published calendars only, and the published calendar must not be password protected.

    I haven't published my calendar yet.

    I published my calendar but I need to remove password protection.

  • You need to know the web name of your published calendar. To find it, display the calendar in your Trumba account, and then click Settings.
  • You must have editing access to your web pages and be familiar enough with HTML to be able to find the location on your site where you want a calendar or date finder.

Embed a calendar spud

  1. In your Trumba account, display the calendar you published and click Publish to display the Publishing Control Panel.

    If you haven't published your calendar yet, go through the publishing settings, and click OK. The Publishing Control Panel appears after you publish the calendar. More information about the publishing settings…

  2. In an HTML or text editor, open the web page into which you want to embed the spud so that you can edit the code.
  3. Back in the Publishing Control Panel for your Trumba calendar, copy the code provided for the spud you want to embed, and paste the code into your web page's HTML code where you want the spud to appear.

    To embed spuds in a page, you need two sections of code:

    • One time per page, for example in the <head> section, you need to paste the script that controls communication among spuds on the page and between spuds and your source calendar data:
      <script type="text/javascript" src="http://www.trumba.com/scripts/spuds.js"></script>

      Note Although you should use this script only once, it appears with all spuds, because all of the spuds could be the only spud on your page. For the second or subsequent spuds on a page, do not copy this part of the code from the Publishing Control Panel.

    • The code for the spud itself. Here's the default code:
      <script type="text/javascript">
      $Trumba.addSpud(
      { webName: "name",
        spudType: "type"});
      </script>

      Where name is the web name of your calendar and type is the type of spud you choose to embed.

  4. (Optional but recommended) If you embed a promotion spud that includes the teaserBase argument, such as an Upcoming Events list or crawler, replace the URL to your hosted calendar page with the URL of the web page in which you embedded your main calendar spud. That way, when visitors click an event in the promotion spud, they are directed to the main calendar on your website instead of being directed off of your site to your hosted calendar on the Trumba Connect site.

    The $Trumba.addSpud method then looks like this:

    $Trumba.addSpud(
    { webName: "name",
      spudType: "type",
      teaserBase: "URL of the page that contains your main calendar spud" });

    Where you replace the placeholder text with the appropriate values.

  5. Save and close your web page file, and then view the page in the web browser to see your embedded calendar spud.

    If the calendar spud doesn't display the way you want it, see Tips below.

Tips for optimizing the display of calendar spuds

You can find additional tips in the Spud FAQ.

  • Main calendar spuds have minimum width requirements, which vary according to the default view you select. The List and Classic Day views have relatively small width requirements, and the Classic Month, Classic Multi-Week, Classic Table, and Classic multi-day views have larger width requirements.

    • How can I put the calendar into a narrower space?

  • Information at the top of the calendar, such as the date range displayed, will wrap if your Web page is narrow. In addition, the calendar won't display properly if the allocated width is too narrow. To solve the problem, you can either increase the allocated width or republish the calendar using a different template.
  • The date finder, mix-in, and upcoming events spuds stretch to fill the width that is defined in the HTML page. These spuds look their best if you place them into a div with a width of 175 to 200 pixels.

    For example:

    <div style="width:200px;">
    spud code from publishing wizard goes here
    </div>

  • Security settings in some browsers may prevent the scripts from running or prompt viewers to allow blocked content. You might want to include a <noscript> tag in the <head> section of the pages you edit. Including this tag means people who can't run the script will at least see some text.

    For example, the tag for the date finder might look something like this:

    <noscript><a href="URL of your main calendar page">Date finder for our site calendar</a></noscript>
Privacy | Terms | Public Calendars