Quick Start

Upcoming Events
Waiting for google calendar...
...

QuickStart - Simple Tabular - Multiple Calendars:

This Quick Start is the same as the previous Simple Tabular Quick Start except four calendars are displayed together intead of one:

Usage:

  • Paste the following text at the top of the article you wish to add the calendar to. Notice the additional key, calendar, and category lines. Also the width was increased:

{sdEcho:childTagsOnly}
{sdInclude ./plugins/content/gCalMarkupV015/qs/[gCalMarkupQS-Setup]/}
{gCalDefine group id="grp1" maxResults="4" /}
{sdDefine key-r}teel1p2f28q985gr9i9mod53sg%40group.calendar.google.com{/sdDefine}
{sdDefine key-le}vp2vlho2pa73qidpbggacrc778%40group.calendar.google.com{/sdDefine}
{sdDefine key-gr}dfs8kh1p372d3v3aqf5na94ohg%40group.calendar.google.com{/sdDefine}
{sdDefine key-ce}lp3dhso6sfsarckgcsto0uc1lc%40group.calendar.google.com{/sdDefine}
{sdMacro calendar grp1 r maxDays="7"/}
{sdMacro calendar grp1 le maxDays="7"/}
{sdMacro calendar grp1 gr maxDays="7"/}
{sdMacro calendar grp1 ce maxDays="7"/}
{gCalDefine category id="grp1.r."/}
{gCalDefine category id="grp1.le."/}
{gCalDefine category id="grp1.gr."/}
{gCalDefine category id="grp1.ce."/}
{sdDefine style-grp1}float:right; width:50%; margin:10px;{/sdDefine}
{sdDefine style-table-grp1}border: 3px double gray;{/sdDefine}
{sdDefine style-cell-grp1}white-space:nowrap;{/sdDefine}
{sdDefine style-rowA-grp1}background-color: #DECA95;{/sdDefine}
{sdDefine style-rowB-grp1}background-color: #FEEAB5;{/sdDefine}
{sdDefine style-month-grp1}text-align:center; font-size:larger; border-bottom:1px solid black;color:white; background-color:#135CAE{/sdDefine}
{sdDefine style-title-grp1}color:#135CAE; font-weight:bold;{/sdDefine}
{sdInclude [gCalMarkupQS-Navigation] /}
{sdInclude [gCalMarkupQS-Status] /}
{sdInclude [gCalMarkupQS-Tabular-Simple] grp1/}
{/sdEcho}

  • And the following text where you want the calendar to appear:

{sdMacro gCalMarkupQS-Tabular-Simple grp1 7 "Upcoming Events" /}

Friday 13th Calendar
Waiting for google calendar...
...
Friday 13th Calendar
Waiting for google calendar...
...
 

QuickStart - Simple Tabular Calendar:

This Quick Start creates a simple list of events from one or more calendars in a tabular format. The details of each event appear in a pop-up when the user hovers over them. Navigation icons are displayed in the upper left to move forward and backwards in the calendar. Two examples appear to the right:

 

Installation

  • Create a new article titled "[gCalMarkupQS Tabular Simple]" and insert the text from the bottom of the page.  The text must be inserted using the HTML mode of your editor.

 

Usage (right hand table):

  • Paste the following text at the top of the article you wish to add the calendar to:

{sdInclude "[gCalMarkupQS Tabular Simple]" /}
{sdMacro defineCalendar grp1 f13 365 4 n3kquhu5eqnd9u629gf7uphds7g9i2qe%40import.calendar.google.com /}
{sdMacro addStyle grp1 div "float:right; width:25%; margin:10px;" /}
{sdMacro addStyle grp1 table "border-collapse:collapse; border: 3px solid gray;" /}

    • Change the Google Calendar Key above so the calendar you are interested in is displayed. To do this replace the calendar key ("n3kq...google.com" in the defineCalendar macro with the key from your calendar. See the Google Calendar page for information on finding your Google Calendar Key.
    • Change "365" to the number of days to retreive from the calendar
    • Change "4" to the maximum number of events to display

 

  • Add the following text where you want the calendar to appear:

{sdMacro gCalMarkupQS-Tabular-Simple grp1 365 "Friday 13th Calendar" /}

    • Change "365" to the number of days the navigations buttons should advance by
    • Change "Friday 13th Calendar" to the title of your calendar.

 

Usage (top left table):

  • Paste the following text at the top of the article you wish to add the calendar to:

{sdInclude "[gCalMarkupQS Tabular Simple]" /}
{sdMacro defineCalendar grp2 f13 365 4 n3kquhu5eqnd9u629gf7uphds7g9i2qe%40import.calendar.google.com /}
{sdMacro addStyle grp2 div "float:right; width:25%; margin:10px;" /}
{sdMacro addStyle grp2 table "border-collapse:collapse; border: 3px double gray;" /}
{sdMacro addStyle grp2 table "text-align:center; font-size:larger; border-bottom:1px solid black;color:white; background-color:#135CAE" .monthHeader /}
{sdMacro addStyle grp2 table "background-color:rgba(0,255,255,.5);" .rowA /}
{sdMacro addStyle grp2 table "background-color:rgba(0,255,255,.3);" .rowB /}

  • Three new style lines were added to define CSS styling (Note that the group name was changed to grp2 so that both examples could be displayed together on this page):
    • The row ending with .monthHeader styles the month rows
    • The rows ending with .rowA and .rowB style the alternating rows of the table
  • Add the following text where you want the calendar to appear:

{sdMacro gCalMarkupQS-Tabular-Simple grp2 365 "Friday 13th Calendar" /}

 

[gCalMarkupQS Tabular] contents:

The following is the contents of the "[gCalMarkupQS Tabular Simple]" article.  The text must be inserted using the HTML mode of your editor.

{sdComment}
 =======================================================
 ================ Define the defineCalendar macro ==================
 =======================================================

 ======== Arguments ========================================
 == sdArg groupId - the name of the calendar group
 == sdArg calendarId - the name of the calendar
 == sdArg calendarKey - the google key for the calendar =======================================================
{/sdComment}

{sdDefine defineCalendar groupId calendarId maxDays maxResults calendarKey}
  {gCalDefine group id="{sdArg groupId/}" maxResults="{sdArg maxResults/}" /}
  {gCalDefine calendar
    id="{sdArg groupId/}.{sdArg calendarId/}"
    key="{sdArg calendarKey/}"
    maxDays="{sdArg maxDays/}"
  /}

{sdComment}
 =====================================================
 ======== Define the calendar template ==========
 =====================================================
 {/sdComment}
<div id="{gCalMarkup _id/}.mainTemplate.container.{sdArg groupId/}" style="display: none">
  <table>
    <tbody id="{gCalMarkup _id/}.mainTemplate.{sdArg groupId/}">
      <tr class="{gCalMarkup select=rowA|rowB /}">
        <td>{gCalMarkup _eventDayTextShort/} {gCalMarkup _eventMonth/}/{gCalMarkup _eventDay/} {gCalMarkup _eventTime/}</td>
        <td>{gCalMarkup _eventTitle/}</td>
      </tr>
    </tbody>
  </table>
</div>

{sdComment}
 ==================================================
 ======== Define the month header template ========
 ==================================================
{/sdComment}
<div id="{gCalMarkup _id/}.monthTemplate.container.{sdArg groupId/}" style="display: none">
  <table>
    <tbody id="{gCalMarkup _id/}.monthTemplate.{sdArg groupId/}">
      <tr class="monthHeader">
        <td colspan="2">{gCalMarkup _eventMonthText/} {gCalMarkup _eventYear/}</td>
      </tr>
    </tbody>
  </table>
</div>

{sdComment}
 ==================================================
 ======== Define the calendar category ========
 ==================================================
{/sdComment}
{gCalDefine category id="{sdArg groupId/}.{sdArg calendarId/}."/}

{/sdDefine}

{sdComment}
 ======== Define a macro to insert a simple calendar ========
{/sdComment}
{sdDefine gCalMarkupQS-Tabular-Simple groupId maxDays title}
<div id="{gCalMarkup _id/}.div.{sdArg groupId/}">
<div id="{gCalMarkup _id/}.nav.{sdArg groupId/}">
  <img
    title="Prev {sdArg maxDays/} days"
    src="plugins/content/gCalMarkup{gCalMarkup _version/}/images/arrow_left.png"
    onclick="{gCalMarkup _dateStartChanged {sdArg groupId/} -{sdArg maxDays/}/}" />
  <img
    title="Today"
    src="plugins/content/gCalMarkup{gCalMarkup _version/}/images/house.png"
    onclick="{gCalMarkup _dateStartChanged {sdArg groupId/} 0/}" />
  <img
    title="Next {sdArg maxDays/} days"
    src="plugins/content/gCalMarkup{gCalMarkup _version/}/images/arrow_right.png"
    onclick="{gCalMarkup _dateStartChanged {sdArg groupId/} {sdArg maxDays/}/}" />
</div>
<div style="text-align: center;">{sdArg title /}</div>
<table id="{gCalMarkup _id/}.table.{sdArg groupId/}">
  <tbody id="{gCalMarkup _id/}.main.{sdArg groupId/}">
    <tr>
      <td class="rowA">Waiting for google calendar...</td>
    </tr>
  </tbody>
</table>
<a style="float: right;" alt="gCalMarkupLogo" title="Powered by gCalMarkup" href="http://symmetricdesigns.com/joomla-extensions/gcalmarkup.html">
  <img src="{gCalMarkup _jURIRoot/}/plugins/content/gCalMarkup{gCalMarkup _version /}/images/logo-gCalMarkup.1-210x70-p25.png" style="height: 20px;" />
</a>
<div id="{gCalMarkup _id/}.status.{sdArg groupId/}">...</div>
</div>
{/sdDefine}

{sdComment}
 ====================================================
 ======== Define a macro to add styles ========
 ====================================================
 ( #123 and #125 entities are curly braces - needed to pass in sdArg 2 )
 ( decodeEntities converts back to braces)
{/sdComment}
{sdDefine addStyle groupId name style extra}
  {sdStyle:decodeEntities "{sdArg groupId/}" "{sdArg name/}" "{sdArg style/}" "{sdArg extra/}"}[id^="gCalMarkup"][id*="\.{sdArg 1/}\.{sdArg 0/}"] {sdArg 3/} &#123;{sdArg 2/}&#125;{/sdStyle}
{/sdDefine}

This is a test of this gCalMarkup Quick Start. The next event from this numerology calendar is Waiting for Google.... The event title in the previous sentence was inserted by gCalMarkup.

Quick Start: Events As In-Line Text

This Quick Start inserts the title from the next event on a Google Calendar as in-line text. In the paragraph to the right, the title of the event at the end of the 2nd sentence was extracted from the referenced Google Calendar and inserted in the paragraph.

    Installation

    • Create a new article titled "[gCalMarkupQS In Line]" and insert the text from the bottom of the page.  The text must be inserted using the HTML mode of your editor.

    Usage:

     

    • Add the following line at the top of the article you wish to add the event text to:

    {sdInclude "[gCalMarkupQS In Line]" 6hmji7d389ho5eavfq817fgtmlcg7iur%40import.calendar.google.com /}

    Replace "6hmji7d38.....google.com" in the text above with the Google Calendar Id of the calendar you wish the event information to come from. The id above is for the calendar used in the test above. See the tutorial for instructions for finding the Google Calendar Id.

     

      • Add the following text in-line where you want the event text to appear:

      {sdMacro gCalMarkupQS-In-Line/}

       

      [gCalMarkupQS In Line] contents:

      The following is the contents of the "[gCalMarkupQS In Line]" article.  The text must be inserted using the HTML mode of your editor.

      {sdComment}
        ======== Arguments to [gCalMarkupQS-In-Line] ========
        ==  sdArg 1 - Google Calendar key
        ===============================================================
      {/sdComment}
      
      {sdComment} ======== Define the calendar ======== {/sdComment}
      {gCalDefine calendar key="{sdArg 1/}" maxResults="1"/}
      
      {sdComment} ======== Define the event template ======== {/sdComment}
      <span id="{gCalMarkup _id/}.mainTemplate" style="display: none">{gCalMarkup _eventTitle/}</span>
      
      {sdComment} ======== Define a macro to insert the event text ======== {/sdComment}
      {sdDefine gCalMarkupQS-In-Line}<span id="{gCalMarkup _id/}.main">Waiting for Google...</span>{/sdDefine}
      

       

       

      This section is intended to get you started using gCalMarkup as quickly as possible.

        1. Download gCalMarkup and sdMacros from the download area.
        2. Install both gCalMarkup and sdMacros using the instructions on the installation page.  (While sdMacros is not required for gCalMarkup, it is recommended and is required for these Quick Starts).
        3. Go to the plugin manager in the Joomla! administrator and enable both gCalMarkup and sdMacros.
        4. Important: make sure the sdMacros extension is before the gCalMarkup extension in the plugin list.  This insures that any macros used will run before any gCalMarkup commands.
        5. Choose one of the Quick Starts from the menu on the left.  Each Quick Start contains one or more blocks of gCalMarkup and sdMacros commands that can be pasted into an article.  Follow the instructions on each Quick Start page.
        6. Important: Most of the Quick Starts must be pasted into Joomla articles using the HTML mode of the editor you are using.  This is because the Quick Starts may contain HTML which will be corrupted by the pasting process if you are not in HTML mode.  Another option is to set your editor to "None" which will give you a default HTML only editor.  

         

          The gCalMarkup Quick Starts include other articles to make them more modular. All of the Quick Starts, and the articles they include, are listed here. They are also included in the gCalMarkup installation as files so they can be used without creation of Joomla articles. But, if any changes are made, it is best to copy the file into a Joomla article before changes are made. If the name of the article is kept the same as the names listed here, it will override the default file. Note that all of these articles should be created in HTML mode of whatever Joomla editor is used. While some will work either way, much of the HTML will break if added in normal editing mode. Please see the section on Joomla editors in the Reference Manual for more information.

           

          In-Line: [gCalMarkupQS-In-Line]:

          • This is the top level include for the In-Line Text quick start.

          {sdComment}
            $Id: [gCalMarkupQS-In-Line] 97 2010-10-23 03:09:47Z dgd $
            ======== Arguments to [gCalMarkupQS-In-Line] ========
            ==  sdArg 1 - Google Calendar key
            ===============================================================
          {/sdComment}
          
          {sdComment} ======== Define the calendar ======== {/sdComment}
          {gCalDefine calendar key="{sdArg 1/}" maxResults="1"/}
          
          {sdComment} ======== Define the event template ======== {/sdComment}
          <span id="{gCalMarkup _id/}.mainTemplate" style="display: none">
            {gCalMarkup _eventTitle/} on
            {gCalMarkup _eventMonth/}/{gCalMarkup _eventDay/}/{gCalMarkup _eventYear/}
          </span>
          
          {sdComment} ======== Define a macro to insert the event text ======== {/sdComment}
          {sdDefine gCalMarkupQS-In-Line}
            <span id="{gCalMarkup _id/}.main">Waiting for Google...</span>
          {/sdDefine}
          

          The above text must be inserted using the HTML mode of your editor.

           

          Tabular Simple: [gCalMarkupQS-Tabular-Simple]:

          {gCalEnable 0/}{sdComment}
            $Id: [gCalMarkupQS-Tabular-Simple] 109 2010-11-04 20:35:35Z dgd $
            ======== Arguments ========================================
            ==  sdArg 1 - group Id
            ===========================================================
          {/sdComment}
          
          {sdInclude "[gCalMarkupQS-Tooltips]" /}
          
          {sdComment} ======== Include the month templates ========== {/sdComment}
          {sdInclude "[gCalMarkupQS-Template-Simple]" {sdArg 1 /} /}
          {sdInclude "[gCalMarkupQS-Template-Month]" {sdArg 1 /} /}
          
          {sdComment} ======== Define a macro to insert the calendar ======== {/sdComment}
          {sdDefine gCalMarkupQS-Tabular-Simple groupId maxDays title}
            <div style="{sdMacro style-{sdArg groupId /} /}">
              {sdMacro gCalMarkupQS-Navigation {sdArg groupId /} {sdArg maxDays /} /}
              <div style="text-align:center;{sdMacro style-title-{sdArg groupId /} /}">{sdArg title /}</div>
              {sdInclude "[gCalMarkupQS-Table]"      {sdArg groupId/} /}
              {sdMacro gCalMarkupQS-Status {sdArg groupId /} "font-size:xx-small;" /}
            </div>
          {/sdDefine}
          {gCalEnable 1/}

           

          Tabular: [gCalMarkupQS-Tabular]:

          • This is the top level include for the Tabular quick start.
          {gCalEnable 0/}{sdComment}
            $Id: [gCalMarkupQS-Tabular] 95 2010-10-23 03:03:31Z dgd $
            ======== Arguments to [gCalMarkupQS-Tabular-All-Large] ========
            ==  sdArg 1 - group Id
            ===============================================================
          {/sdComment}
          
          {sdComment} ======== Include the templates ========== {/sdComment}
          {sdInclude [gCalMarkupQS-Template-Large] {sdArg 1/} /}
          {sdInclude [gCalMarkupQS-Template-Month] {sdArg 1/} /}
          {sdInclude [gCalMarkupQS-Template-Select] {sdArg 1/} /}
          
          {sdComment} ======== Define a macro to insert the calendar and the drop-down menu ======== {/sdComment}
          {sdDefine gCalMarkupQS-Tabular maxDays groupId groupStyle title titleStyle}
            <div style="{sdArg groupStyle/}">
              <div style="text-align:center;{sdArg titleStyle/}">{sdArg title/}</div>
              {sdMacro gCalMarkupQS-Navigation {sdArg groupId/} {sdArg maxDays/}/}
              {sdMacro gCalMarkupQS-Key "float:right; font-size:xx-small; margin-left:10px;" /}
              {sdMacro gCalMarkupQS-Dropdown {sdArg groupId/} "float:right;margin-bottom:10px;" /}
              {sdInclude [gCalMarkupQS-Table] {sdArg groupId/} /}
              {sdMacro gCalMarkupQS-Status {sdArg groupId/} "font-size:xx-small;"/}
            </div>
          {/sdDefine}
          {gCalEnable 1/}

           

          Simple Template: [gCalMarkupQS-Template-Simple]:

          {gCalEnable 0/}{sdComment}
            $Id: [gCalMarkupQS-Template-Simple] 97 2010-10-23 03:09:47Z dgd $
            ======== Define the calendar table arguments ========
            ==  sdArg 1 - groupId
            =====================================================
          {/sdComment}
          {sdComment} ======== Define the calendar template ========== {/sdComment}
          <div id="{gCalMarkup _id/}.mainTemplate.container.{sdArg 1/}" style="display: none">
            <table>
              <tbody id="{gCalMarkup _id/}.mainTemplate.{sdArg 1/}">
                <tr gCalMarkup.style.x="{gCalMarkup style/}
                    {gCalMarkup select={sdMacro style-rowA-{sdArg 1/}/}|{sdMacro style-rowB-{sdArg 1/}/}/}"
                    class="{gCalMarkup select=rowA|rowB /}"
                    >
                  <td style="{sdMacro style-cell-{sdArg 1/}/}">
                    <span class="SDTooltip">
                      <a gCalMarkup.href.x="{gCalMarkup href/}">
                        {gCalMarkup _eventDayTextShort/}
                        {gCalMarkup _eventMonth/}/{gCalMarkup _eventDay/}
                        {gCalMarkup _eventTime/}</a>
                      <span>{gCalMarkup title/}</span>
                    </span>
                  </td>
                  <td>
                    <img title="NVRC Series Race"
                      gCalMarkup.src.x="{gCalMarkup hrefImage/}"
                      gCalMarkup.IfProperty="hrefImage" />
                  </td>
                  <td>
                    <span class="SDTooltip" onclick="javascript:void(0);">
                      {gCalMarkup _eventTitle/}
                      <span>
                        {gCalMarkup _eventDescription/}
                        {gCalMarkup iftag=website <br/>Website:/}
                        <a gCalMarkup.href.x="{gCalMarkup tag=website/}">{gCalMarkup tag=website/}</a>
                      </span>
                    </span>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
          {gCalEnable 1/}

           

          Template: [gCalMarkupQS-Template-Large]:

          • This is the top level include for the Tabular quick start.
          {gCalEnable 0/}{sdComment}
            $Id: [gCalMarkupQS-Template-Large] 88 2010-10-21 20:38:09Z dgd $
            ======== Arguments to [gCalMarkupQS-Template-Large] ========
            ==  sdArg 1 - group Id
            ======================================================
          {/sdComment}
          
          {sdComment} ======== Define the calendar template ========== {/sdComment}
          <div id="{gCalMarkup _id/}.mainTemplate.container.{sdArg 1/}" style="display: none">
            <table border="0">
              <tbody id="{gCalMarkup _id/}.mainTemplate.{sdArg 1/}">
                <tr gCalMarkup.style.x=
                    "{gCalMarkup select={sdMacro style-rowA-{sdArg 1/}/}|{sdMacro style-rowB-{sdArg 1/}/}/};
                    text-align:center;"
                    title="{gCalMarkup title[cp]/}">
                  <td  style="white-space:nowrap;padding:4px;">{gCalMarkup _eventDayTextShort/}
                    {gCalMarkup _eventMonth/}/{gCalMarkup _eventDay/}<br/>{gCalMarkup _eventTime/}</td>
                  <td gCalMarkup.style.x="{gCalMarkup style/}">{gCalMarkup _eventTitle/}</td>
                  <td>{gCalMarkup _eventLocation/}</td>
                </tr>
                <tr gCalMarkup.style.x=
                    "{gCalMarkup select={sdMacro style-rowA-{sdArg 1/}/}|{sdMacro style-rowB-{sdArg 1/}/}/}" >
                  <td style="text-align: center">
                    <a class="SDTooltip"
                       title="Show event on Google calendar: location map, add to your calendar, etc."
                       gCalMarkup.href.x="{gCalMarkup _eventURL/}">
                      <img alt="google calendar icon"
                           src="/plugins/content/gCalMarkup{gCalMarkup _version/}/images/google-calendar.png" />
                    </a>
                    <a href="index.php/racing/nvrc-race-series">
                      <img class="SDTooltip" alt="gold medal image" title="NVRC Series Race"
                        gcalcategory=".series"
                        src="/plugins/content/gCalMarkup{gCalMarkup _version/}/images/medal_gold_2.png" />
                    </a>
                    <img class="SDTooltip" alt="green check image" title="Local (central PA) Race"
                      gcalcategory=".local"
                      src="/plugins/content/gCalMarkup{gCalMarkup _version/}/images/tick.png" />
                  </td>
                  <td colspan="2">{gCalMarkup _eventDescription/}</td>
                </tr>
                <tr  gCalMarkup.IfPropertyAny="distance1,distance2,fee,website"
                     gCalMarkup.style.x=
                     "{gCalMarkup select={sdMacro style-rowA-{sdArg 1/}/}|{sdMacro style-rowB-{sdArg 1/}/}/}" >
                  <td></td>
                  <td colspan="2">
                    <table style="border: 1px solid gray; margin: 4px auto 4px 0px; width: 95%;" border="0">
                      <tbody>
                        <tr gCalMarkup.IfPropertyAny="distance1,distance2">
                          <td style="width: 10%;">{gCalMarkup iftag=distance1 Distances:/}</td>
                          <td style="width: 30%;">{gCalMarkup tag=distance1/}</td>
                          <td style="width: 30%;">{gCalMarkup tag=distance2/}</td>
                          <td>{gCalMarkup tag=distance3/}</td>
                        </tr>
                        <tr gCalMarkup.IfProperty="fee">
                          <td style="width: 10%;">Fee:</td>
                          <td colspan="3">{gCalMarkup tag=fee/}</td>
                        </tr>
                        <tr gCalMarkup.IfProperty="website"
                            class="{gCalMarkup select=gCalMarkupRowA|gCalMarkupRowB/}">
                          <td>Website:</td>
                          <td colspan="4">
                            <a gCalMarkup.href.x="{gCalMarkup tag=website/}">{gCalMarkup tag=website/}</a>
                          </td>
                        </tr>
                      </tbody>
                    </table>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>{gCalEnable 1/}

           

          Month Template: [gCalMarkupQS-Template-Month]:

          • This is the month template used for the tabular quick starts.
          {gCalEnable 0/}{sdComment}
            $Id: [gCalMarkupQS-Template-Month] 88 2010-10-21 20:38:09Z dgd $
            ======== Define the month header template ========
            ==  sdArg 1 - groupId
            ==================================================
          {/sdComment}
          <div id="{gCalMarkup _id/}.monthTemplate.container.{sdArg 1/}" style="display: none">
            <table border="0">
              <tbody id="{gCalMarkup _id/}.monthTemplate.{sdArg 1/}">
                <tr class="monthHeader">
                  <td colspan="7">{gCalMarkup _eventMonthText/} {gCalMarkup _eventYear/}</td>
                </tr>
              </tbody>
            </table>
          </div>{gCalEnable 1/}

           

          Select Template: [gCalMarkupQS-Template-Select]:

          • This is the select template used for the tabular quick starts that contain a drop-down.
          {gCalEnable 0/}{sdComment}
            $Id: [gCalMarkupQS-Template-Select] 75 2010-10-03 19:25:48Z dgd $
            ======== Define the category select template ========
            ==  sdArg 1 - groupId
            =====================================================
          {/sdComment}
          <div id="{gCalMarkup _id/}.categorySelectTemplate.container.{sdArg 1/}" style="display: none">
            <select id="{gCalMarkup _id/}.categorySelectTemplate.{sdArg 1/}">
              {sdComment} need to set background-color for color to work on Safari {/sdComment}
              <option gCalMarkup.style.x="{gCalMarkup style/};background-color:transparent;" value="{gCalMarkup id/}">
                {gCalMarkup title/}
              </option>
            </select>
          </div>{gCalEnable 1/}

           

          Race Categories: [gCalMarkupQS-Categories-Races]:

          • This include contains the categories used for the running club race calendar example.
          {gCalEnable 0/}{sdComment}
            $Id: [gCalMarkupQS-Categories-Races] 76 2010-10-03 19:27:23Z dgd $
            ======== Define the calendar categories ========
            ==  sdArg 1 - groupId
            ================================================
          {/sdComment}
          {gCalDefine category id="{sdArg 1/}.r.series" title="Series Races" style="color:#FF8000;"/}
          {gCalDefine category id="{sdArg 1/}.r.local" title="Local Races" style="color:green;"/}
          {gCalDefine category id="{sdArg 1/}.r.kids" title="Kids" /}
          {gCalDefine category id="{sdArg 1/}.r.relay" title="Relays" /}
          {gCalDefine category id="{sdArg 1/}.r.trail" title="Trail Races" /}
          {gCalDefine category id="{sdArg 1/}.r.biathlon" title="Biathlons" /}
          {gCalDefine category id="{sdArg 1/}.r.triathlon" title="Triathlons" /}
          {gCalDefine category id="{sdArg 1/}.r.0M-1M" title="&lt; 1M Races" /}
          {gCalDefine category id="{sdArg 1/}.r.1M" title=" 1M Races" /}
          {gCalDefine category id="{sdArg 1/}.r.1M-5K" title="&gt; 1M &lt; 5K Races" /}
          {gCalDefine category id="{sdArg 1/}.r.5K" title=" 5K Races" /}
          {gCalDefine category id="{sdArg 1/}.r.5K-5M" title="&gt; 5K &lt; 5M Races" /}
          {gCalDefine category id="{sdArg 1/}.r.5M" title=" 5M Races" /}
          {gCalDefine category id="{sdArg 1/}.r.5M-10K" title="&gt; 5M &lt;10K Races" /}
          {gCalDefine category id="{sdArg 1/}.r.10K" title="10K Races" /}
          {gCalDefine category id="{sdArg 1/}.r.10K-10M" title="&gt;10K &lt;10M Races" /}
          {gCalDefine category id="{sdArg 1/}.r.10M" title="10M Races" /}
          {gCalDefine category id="{sdArg 1/}.r.10M-half" title="&gt;10M &lt;13.1M Races" /}
          {gCalDefine category id="{sdArg 1/}.r.halfMarathon" title="13.1M (Half Marathons)" /}
          {gCalDefine category id="{sdArg 1/}.r.Half-Full" title="&gt;13.1M &lt;26.2M Races" /}
          {gCalDefine category id="{sdArg 1/}.r.fullMarathon" title="26.2M (Marathons)" /}
          {gCalDefine category id="{sdArg 1/}.r.ultra" title="&gt;26.2M (Ultras)" /}{gCalEnable 1/}

           

          Dropdown: [gCalMarkupQS-Dropdown]:

          • This is the ???Diff between this and Select?.
          {gCalEnable 0/}{sdComment}
            $Id: [gCalMarkupQS-Dropdown] 88 2010-10-21 20:38:09Z dgd $
          {/sdComment}
          {sdDefine gCalMarkupQS-Dropdown groupId style}
            <span style="{sdArg style/}">
              Show:
              <select
                id="{gCalMarkup _id/}.categorySelect.{sdArg groupId/}"
                onchange="{gCalMarkup _displayGroup {sdArg groupId/}/}">
              </select>
            </span>
          {/sdDefine}
          {gCalEnable 1/}

           

          Key: [gCalMarkupQS-Key]:

          • The calendar key for the running club calendar example.
          {gCalEnable 0/}{sdComment}
            $Id: [gCalMarkupQS-Key] 88 2010-10-21 20:38:09Z dgd $
          {/sdComment}
          {sdDefine gCalMarkupQS-Key style}
            <span style="{sdArg 1/}">
              <img
                alt="green check image"
                title="Local (central PA) Races"
                src="/plugins/content/gCalMarkup{gCalMarkup _version/}/images/tick.png"
              />
              <span>Local Races</span>
            </span>
            <span style="{sdArg 1/}">
              <a href="index.php/racing/nvrc-race-series">
                <img
                  alt="gold medal image"
                  title="NVRC Series Races"
                  src="/plugins/content/gCalMarkup{gCalMarkup _version/}/images/medal_gold_2.png"
                />
              </a>
              <span>NVRC Series Races</span>
            </span>
          {/sdDefine}
          {gCalEnable 1/}

           

          Navigation: [gCalMarkupQS-Navigation]:

          • This article contains the HTML to display navigation icons for a calendar group. Create an article titled "[gCalMarkupQS-Navigation]" and add the following text in HTML mode.
          {gCalEnable 0/}{sdComment}
            $Id: [gCalMarkupQS-Navigation] 88 2010-10-21 20:38:09Z dgd $
          {/sdComment}
          {sdDefine gCalMarkupQS-Navigation groupId maxDays}
            <div id="{gCalMarkup _id/}.nav.{sdArg groupId/}">
              <img
                title="Prev {sdArg maxDays/} days"
                src="./plugins/content/gCalMarkup{gCalMarkup _version/}/images/arrow_left.png"
                onclick="{gCalMarkup _dateStartChanged {sdArg groupId/} -{sdArg maxDays/}/}"
                />
              <img
                title="Today"
                src="./plugins/content/gCalMarkup{gCalMarkup _version/}/images/house.png"
                onclick="{gCalMarkup _dateStartChanged {sdArg groupId/} 0/}"
                />
              <img
                title="Next {sdArg maxDays/} days"
                src="./plugins/content/gCalMarkup{gCalMarkup _version/}/images/arrow_right.png"
                onclick="{gCalMarkup _dateStartChanged {sdArg groupId/} {sdArg maxDays/}/}"
                />
            </div>
          {/sdDefine}
          {gCalEnable 1/}

           

          Setup: [gCalMarkupQS-Setup]:

          • This article contains the Google Calendar IDs for each calendar used as well as formatting information for each one. This article will normally need to be edited to add the actual Google Calendar IDs for the calendars you wish to use. Please see the section on Google Calendar IDs in the reference manual for more information. Create an article titled "[gCalMarkupQS-Setup]" and add the following text in HTML mode.
          {gCalEnable 0/}{sdComment}
            $Id: [gCalMarkupQS-Setup] 109 2010-11-04 20:35:35Z dgd $
            ======== Definitions for each Google calendar ========
            ==  Define calendar macro to create each calendar
            ==  Define sub macros to describe each calendar
            ======================================================
          {/sdComment}
          
          {sdComment} ======== Set the path to the Quick Starts ======== {/sdComment}
          {sdPath ./plugins/content/gCalMarkupV015/qs/ /}
          
          {sdComment} ======== Define the Google keys for each calendar ======== {/sdComment}
          {sdDefine key-r }This email address is being protected from spambots. You need JavaScript enabled to view it.{/sdDefine}
          {sdDefine key-le}This email address is being protected from spambots. You need JavaScript enabled to view it.{/sdDefine}
          {sdDefine key-gr}This email address is being protected from spambots. You need JavaScript enabled to view it.{/sdDefine}
          {sdDefine key-ce}This email address is being protected from spambots. You need JavaScript enabled to view it.{/sdDefine}
          {sdDefine key-bf}This email address is being protected from spambots. You need JavaScript enabled to view it.{/sdDefine}
          {sdDefine key-lm}This email address is being protected from spambots. You need JavaScript enabled to view it.{/sdDefine}
          {sdDefine key-rr}This email address is being protected from spambots. You need JavaScript enabled to view it.{/sdDefine}
          {sdDefine key-w }This email address is being protected from spambots. You need JavaScript enabled to view it.{/sdDefine}
          
          {sdComment} ======== Define the titles for each calendar ======== {/sdComment}
          {sdDefine title-r }Race Calendar{/sdDefine}
          {sdDefine title-le}Local Events Calendar{/sdDefine}
          {sdDefine title-gr}Group Run Calendar{/sdDefine}
          {sdDefine title-ce}Club Events Calendar{/sdDefine}
          {sdDefine title-bf}Bellefonte Calendar{/sdDefine}
          {sdDefine title-lm}Ladies Morning Calendar{/sdDefine}
          {sdDefine title-rr}Rec. Hall Regulars Calendar{/sdDefine}
          {sdDefine title-w }Wahoo Calendar{/sdDefine}
          
          {sdComment} ======== Define the links for each calendar ======== {/sdComment}
          {sdDefine link-r }http://nvrun.com/index.php/racing{/sdDefine}
          {sdDefine link-le}http://nvrun.com/index.php/racing{/sdDefine}
          {sdDefine link-gr}http://nvrun.com/index.php/training/running-groups/group-runs{/sdDefine}
          {sdDefine link-ce}http://nvrun.com/index.php/club{/sdDefine}
          {sdDefine link-bf}http://nvrun.com/index.php/training/running-groups/bellefonte-road-raiders{/sdDefine}
          {sdDefine link-lm}http://nvrun.com/index.php/training/running-groups/ladies-early-morning{/sdDefine}
          {sdDefine link-rr}http://nvrun.com/index.php/training/running-groups/rec-hall-regulars{/sdDefine}
          {sdDefine link-w }http://nvrun.com/index.php/training/running-groups/beginners{/sdDefine}
          
          {sdComment} ======== Define the styles for each calendar ======== {/sdComment}
          {sdDefine style-r }color:#0080D0;{/sdDefine}
          {sdDefine style-le}color:#ff00ff;{/sdDefine}
          {sdDefine style-gr}color:#000070;{/sdDefine}
          {sdDefine style-ce}color:#707000;{/sdDefine}
          {sdDefine style-bf}color:#007000;{/sdDefine}
          {sdDefine style-lm}color:#700000;{/sdDefine}
          {sdDefine style-rr}color:#700070;{/sdDefine}
          {sdDefine style-w }color:#007070;{/sdDefine}
          
          {sdComment} ======== Define a macro to help define the calendars ======== {/sdComment}
          {sdDefine calendar groupId calId extra1 extra2 extra3}
            {gCalDefine calendar
              id="{sdArg groupId/}.{sdArg calId/}"
              class="{sdArg calId/}Calendar"
              key="{sdMacro key-{sdArg calId/}/}"
              title="{sdMacro title-{sdArg calId/}/}"
              href="{sdMacro link-{sdArg calId/}/}"
              style="{sdMacro style-{sdArg calId/}/}"
              {sdArg extra1/} {sdArg extra2/} {sdArg extra3/}
            /}
          {/sdDefine}
          
          {sdComment} ======== Define the styles for the table ======== {/sdComment}
          {sdDefine style-table}border: 3px double gray; width: 100%; border-collapse:collapse;{/sdDefine}
          {sdDefine style-rowA}background-color:#DECA95;{/sdDefine} {sdComment} tan {/sdComment}
          {sdDefine style-rowB}background-color:#FEEAB5;{/sdDefine} {sdComment} light tan{/sdComment}
          {sdDefine style-cell}white-space:nowrap; padding:4px;{/sdDefine}
          
          {sdComment} ======== Define a macro to create a single calendar ======== {/sdComment}
          {sdDefine single-calendar calId style}
            {sdDefine style-table-grp1}border: 3px double gray;{/sdDefine}
            {sdDefine style-rowA-grp1}background-color: #DECA95;{/sdDefine}
            {sdDefine style-rowB-grp1}background-color: #FEEAB5;{/sdDefine}
            {sdDefine style-month-grp1}text-align:center; font-size:larger; border-bottom:1px solid black;
              color:white; background-color:#135CAE{/sdDefine}
            {sdMacro calendar grp1 {sdArg calId/} maxDays="7" /}
            {gCalDefine category id="grp1.{sdArg calId/}."/}
            {sdInclude [gCalMarkupQS-Navigation] /}
            {sdInclude [gCalMarkupQS-Status] /}
            {sdInclude [gCalMarkupQS-Tabular] grp1 {sdArg calId/} 7 999 /}
            {sdMacro gCalMarkupQS-Tabular 7 grp1 "{sdArg style/}" "{sdMacro title-{sdArg calId/}/}"
              "color:#135CAE; font-weight:bold; font-size:1.5em;" /}
          {/sdDefine}
          {gCalEnable 1/}

           

          Status: [gCalMarkupQS-Status]:

          • This article contains the HTML to display a status line for a calendar group. Create an article titled "[gCalMarkupQS-Status]" and add the following text in HTML mode.
          {gCalEnable 0/}{sdComment}
            $Id: [gCalMarkupQS-Status] 88 2010-10-21 20:38:09Z dgd $
          {/sdComment}
          {sdDefine gCalMarkupQS-Status groupId}
            <div id="{gCalMarkup _id/}.status.{sdArg groupId/}">...</div>
          {/sdDefine}
          {gCalEnable 1/}

           

          Table: [gCalMarkupQS-Table]:

          • This article contains the table used in the tabular quick starts.
          {gCalEnable 0/}{sdComment}
            $Id: [gCalMarkupQS-Table] 88 2010-10-21 20:38:09Z dgd $
            ======== Define the calendar table arguments ========
            ==  sdArg 1 - groupId
            =====================================================
          {/sdComment}
          <table id="{gCalMarkup _id/}.table.{sdArg 1/}">
            <tbody id="{gCalMarkup _id/}.main.{sdArg 1/}">
              <tr>
                <td class="rowA">Waiting for google calendar...</td>
              </tr>
            </tbody>
          </table>
          <a style="float:right;" alt="gCalMarkupLogo" title="Powered by gCalMarkup"
            href="http://symmetricdesigns.com/joomla-extensions/gcalmarkup.html">
            <img src="{gCalMarkup _jURIRoot/}/plugins/content/gCalMarkup{gCalMarkup _version /}/images/logo-gCalMarkup.1-210x70-p25.png"
              style="height:20px;" />
          </a>
          {gCalEnable 1/}

           

          Tooltips: [gCalMarkupQS-Tooltips]:

          • This article contains the HTML and CSS used to create tooltips in the tabular quick starts.
          {gCalEnable 0/}{sdComment}
            $Id: [gCalMarkupQS-Tooltips] 75 2010-10-03 19:25:48Z dgd $
            ======== Define styles for pop-up tool-tips ========
            ====================================================
          {/sdComment}
          {sdComment} (Technique from:http://naspinski.net/post/css-Tooltips--tutorial.aspx) {/sdComment}
          {sdStyle}
          .SDTooltip       {position:relative;}
          .SDTooltip:hover {z-index:25; border:0px;} {sdComment}border:0px is needed to fix IE7 z-index bug{/sdComment}
          .SDTooltip span
            {
            color: black;
            display:none;
            position:absolute;
            top:1em;
            left:2em;
            padding:2px;
            border:1px solid black;
            background-color:#FEEAB5;
            }
          .SDTooltip:hover span{display:block;}
          {/sdStyle}{gCalEnable 1/}